Jump to content
Sign in to follow this  
hkust_itsc

BootStrap tabbable tabs-left class rendered incorrectly

Recommended Posts

hkust_itsc    0
hkust_itsc

Hi,

 

I tried to use "tabbable tabs-left" class to make a tab layout with the tabs on the left, but it was rendered incorrectly that the content area are misplaced on the bottom of the tab.  Does PageLines support tabs on the left in Bootstrap CSS?

 

I am using Pageline 2.4.2.

 

thanks,

Ken

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello hkust_itsc

 

Could we have a link tot your site please? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
hkust_itsc    0
hkust_itsc

Hi, 

 

I am sorry that I cannot show you the page URL now. but I can include the following codes which triggered the problems.  You may start with a blank new page and test the following simple coding.  They were actually copied from the Bootstrap website documentation.  The attached image shows the coding and the rendered page view after saving the page.

 

 

<div class="tabbable tabs-left"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

 

thanks,
Ken

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Can you link us to the Bootstrap page which your code is based off please?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

That's correct the tabs on the left code is inserted from the following code snippet

 

<div class="tabbable tabs-left">

 

I've tested this on my test site and it seems to be working correctly, so i can only assumed there's something wrong in the previous code before you amended the class information. Have you tried wrapping the code in the [pl_raw] tags mentioned on the demo page, the pl-raw tags will insert the code as raw code, which will prevent any stripping or spacing in the html.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hkust_itsc    0
hkust_itsc

HI James,

 

Thanks for your assistance in the testing.  I tried to trace back the CSS where it triggered the problem.  If the following style is removed, the tab works perfectly.  

 

.tab-content {
   width: 100%; <-- to be removed
   // other styles are not included for brevity
}

 

That style is from the following style sheet which has not been customized by us.
 

<link rel='stylesheet' id='pagelines-less-css' href='http://host/wp-content/uploads/pagelines/compiled-css-1371111218.css' type='text/css' media='all' />

 

Inserting the [pl-raw] shortcodes didn't work either. The [pl-raw] shortcodes actually displayed on the page! Please see the attached image.

 

Any ideas to get around the tab display problem?

 

thanks,
Ken
 

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

It looks like the [pl_raw] tags were added in Visual mode, not in Text mode.  That would do two things: 

1.  It could cause the raw tags to display

2.  It would break the shortcode, as there could be added HTML code included, even if hidden.

 

Validate your shortcode and only add it in Text Mode.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
hkust_itsc    0
hkust_itsc

Hi,

 

Thanks for the info and help.  However,I did add the [pl-raw] shortcode in text mode, NOT in visual mode.  Please see the attached image for reference.  I just wondered if the [pl-raw] shortcode does work, will it also resolve the width issue in the style that I have pointed out in my previous discussion?

 

thanks,

Ken

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

Without the ability to see the site live, you're preventing us from properly seeing what's going on, and asking us to rely upon snapshots only.

 

Our PL shortcode, which I thought you were using, is written as such:

[pl_tabs][pl_tabtitlesection type="tabs"]
[pl_tabtitle active="yes" number="1"]Title 1[/pl_tabtitle]
[pl_tabtitle number="2"]Title 2[/pl_tabtitle]
[/pl_tabtitlesection][pl_tabcontentsection]
[pl_tabcontent active="yes" number="1"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit
[/pl_tabcontent]
[pl_tabcontent number="2"]
<img class="pl-imageframe" alt="" />
[/pl_tabcontent]
[/pl_tabcontentsection]

[/pl_tabs]

Please see http://demo.pagelines.me/tools/.  We can't support code you've found elsewhere. You'd have to seek support for third party code from the source.

 

That said, the tabbable tags_left option should work in PageLines, within the proper context of our code. My suggestion would be to modify the code, or test it in another page, using our shortcode system.  It can't hurt! :)  The div works fine, as part of the overall shortcode, but you don't appear to be using the shortcode anywhere, only CSS, DIVs and classes. While this should work, there's no assurance and it may be conflicting with some of our built in Twitter Bootstrap shortcode.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
hkust_itsc    0
hkust_itsc

Hi,

 

Thanks for your advice and information.  Do you have an email address that I can send you the address of the page which is having the tab rendering problem?  It is not appropriate for us to disclose the website URL in a public forum.  We need your professional help to see what went wrong with the bootstrap horizontal tab layout.  We want to use the horizontal tab so much.

 

thanks,
Ken

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, 

 

Sorry it's [pl_raw] not [pl-raw]. Needs an underscore


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hkust_itsc    0
hkust_itsc

I did try using [pl_raw] and making another page to test the vertical tabs, but they were all not working.  If it helps you guys to look at the real site, can you give me an email address that I can send the URL to you so that it won't make the website URL public in this forum?

 

thanks,
Ken

Share this post


Link to post
Share on other sites
Rob    547
Rob

Please use an URL masking site like http://tinyurl.com/ instead of email.  Thanks.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
hkust_itsc    0
hkust_itsc

Rob, 

 

Thanks for the suggestion.  It would only shorten the URL, but still the shortened URL will still be exposed and visible in this public forum.  Any other suggestion will be highly appreciated!

 

thanks for your help anyway.

 

Ken

Share this post


Link to post
Share on other sites
Rob    547
Rob

Ken,

 

I'll politely disagree with you.  The URL is not shortened, it is masked.  There is a major difference.  Shortened, a search engine can read the full-length URL.  Masked, the search engine finds and reads the mask, not the underlying link.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
James B    436
James B

You can add the url to the private url field inside your forum profile, this will make it visible to moderators only.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hkust_itsc    0
hkust_itsc

Thanks you guys for the advice.  It is not the URL itself which cannot be shown. It is the contents on the page that are not appropriate to show to public. Is there another way that I can let you guys know the URL of the problematic page, but not disclosing the address of the page in this forum?

 

thanks again for your advice.

 

Ken

Share this post


Link to post
Share on other sites
hkust_itsc    0
hkust_itsc

Hi James,

 

I finally get what you mean.  The URL is now typed in the Site URL field in my profile of this forum.  It is a demo page using simple horizontal tabs from bootstrap.  Please help to see if you can spot any errors.

 

Thanks,

Ken

Share this post


Link to post
Share on other sites
Rob    547
Rob

Your tabs look fine and work correctly.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
hkust_itsc    0
hkust_itsc

Dear Rob,

 

Thanks for checking it up.  But I don't understand why you said the page looked fine and worked correctly.  I have checked the my page with major browsers in both PC and mac and even iPad.  The tab still rendered incorrectly with the content area display under the tabs! It should be rendered on the right of the tabs, as it is using vertical tabs with the navigation showed on the left.  

 

To illustrate and help you understand the problem, I have again attached one image (error tab.jpb) showing the problem and another image (bootstrap tab.jpg) showing the correct rendering in the Bootstrap official website. 

 

 

Thanks,

Ken

Share this post


Link to post
Share on other sites
hkust_itsc    0
hkust_itsc

Yes. You saw the same behavior as what I saw. The content areas after clicking on the clickable tabs now appear under the tabs, not right next to the tabs! 

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

I see the tabs displaying incorrectly - http://screencast.com/t/7cHCR5lyEW

 

If you use the pl_raw tags this should correct the above and force the tab to display next to the content.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
hkust_itsc    0
hkust_itsc

Hi James,

 

Thanks for checking it up.  The tab codes used in the page are actually enclosed with [pl_raw] tags.  Please see the attached image for the raw codes.  

 

Thanks,

Ken

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • ppotent
      By ppotent
      Any chance of a pagelines table plug-in coming? I know that the use of short codes and bootstrap can achieve this, but I can't seem to find any easy/visual editor way of doing this. There are table plug-ins around for wordpress, but honestly, they are pretty clunky. I'd pay for a tables plug-in, given how much I would use tables if I could.
       
       
    • nandorj78
      By nandorj78+
      I checked the demo for the new bootstrap theme (http://themes.pagelines.com/bootstrap/) and I really liked the slider on it. I suppose it was not done using 'impulse' or 'flick slider', was it? How was it done?
    • micstepl
      By micstepl+
      is Bootstrab (http://getbootstrap.com/ ) kompatible to PL5? how to install most fitting?
    • respectgb
      By respectgb+
      Hi,
      I'm having problems with bootstrap popovers being cut off the edge of the browser. I'm using the latest version of dms (2.2) and this problem occurs on all browsers tested. Please can you let me know how we can fix this?

      Cheers

    • brightonkeller
      By brightonkeller+
      For some reason my Tabbed content isn't working correctly (see this page - click on all tabls)
       
      It could TOTALLY be the shortcodes I've got in there but I wanted to see if any of you could pinpoint the issue faster than I could. Any help would be must appreciated. 
       
      attached is a screenshot of what I see.
       
      And here is the code I have in the edit html...
      [pl_raw][pl_tabs][pl_tabtitlesection type="tabs"] [pl_tabtitle active="yes" number="1"]Currently Obsessed[/pl_tabtitle] [pl_tabtitle number="2"]gifts for him[/pl_tabtitle] [pl_tabtitle number="3"]Office // Desk[/pl_tabtitle] [pl_tabtitle number="4"]PLAID TREND[/pl_tabtitle] [pl_tabtitle number="5"]GIFT IDEAS[/pl_tabtitle] [pl_tabtitle number="6"]baubles[/pl_tabtitle] [pl_tabtitle number="7"]FUR VESTS[/pl_tabtitle] [/pl_tabtitlesection] [pl_tabcontentsection] [pl_tabcontent active="yes" number="1"] [show_boutique_widget id="122328"] [/pl_tabcontent] [pl_tabcontent number="2"] [show_boutique_widget id="201724"] [/pl_tabcontent] [pl_tabcontent number="3"] [show_boutique_widget id="203968"] [/pl_tabcontent] [pl_tabcontent number="4"] [show_boutique_widget id="201832"] [/pl_tabcontent] [pl_tabcontent number="5"] [show_boutique_widget id="176320"] [/pl_tabcontent] [pl_tabcontent number="6"] [show_boutique_widget id="203960"] [/pl_tabcontent] [pl_tabcontent number="7"] [show_boutique_widget id="176328"] [/pl_tabcontent] [/pl_tabcontentsection] [/pl_tabs][/pl_raw]
×