• 0
Sign in to follow this  
Followers 0

BootStrap tabbable tabs-left class rendered incorrectly


Question

Posted · Report post

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

28 answers to this question

  • 0

Posted · Report post

Hi Ken,

 

I think the problem is:

1.  If you don't have custom code for the classes on your website directly, it will not pull styling from Twitter.  Do you have the CSS for the classes in Custom Code?  (Sorry if you answered this previously.)

2.  PageLines has a Twitter Bootstrap built in already, which I think conflicts with what you're trying to do.  The tabs code we have should work within the tabbable tabs-left class you're using, provided you have the CSS.

 

Here's what I tested in my site, which worked fine, as our standard tabs. See it here: http://www.epicurus.com/members/test-accordion

[pl_raw]
<div class="tabbable tabs-left"><!-- your Twitter Bootstrap code -->
[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" src="http://www.epicurus.com/members/wp-content/uploads/2013/06/avocado-mint-bruschetta-thumb.png" alt="bruschetta" />
[/pl_tabcontent]
[/pl_tabcontentsection]
     
[/pl_tabs]
</div>
[/pl_raw]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello hkust_itsc

 

Could we have a link tot your site please? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

Can you link us to the Bootstrap page which your code is based off please?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

Hi there, 

 

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

Your tabs look fine and work correctly.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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  
Followers 0