Jump to content


Photo
- - - - -

BootStrap tabbable tabs-left class rendered incorrectly

bootstrap tabbable tabs-left

Best Answer Rob , 11 July 2013 - 03:39 PM

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..../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]

Go to the full post


  • Please log in to reply
28 replies to this topic

#21 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 06 July 2013 - 02:18 PM

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

Attached Files



#22 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 July 2013 - 01:19 AM

Please Login or Register to see this Hidden Content

 

This is what I see when I use your site in Firefox on a Windows 7 machine.



#23 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 10 July 2013 - 01:43 AM

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! 



#24 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 July 2013 - 08:36 PM

Hi there,

 

I see the tabs displaying incorrectly -

Please Login or Register to see this Hidden Content

 

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



#25 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 11 July 2013 - 01:40 AM

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

Attached Files



#26 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 July 2013 - 03:39 PM   Best Answer

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:

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content



#27 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 July 2013 - 11:33 PM

Hi there,

 

As a last resort, you could try using css to fix, reducing the width of the tab content to see if it pushes up to the right side of the tab. -

Please Login or Register to see this Hidden Content

 

.tab-content {
    backgroundnone repeat scroll 0 0 #F5F5F5;
    width90%;
}


#28 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 12 July 2013 - 07:41 AM

Hi James,

 

Thanks for the solution.  The tabs now work as expected! although I still can see the same problems in Rob's link which demonstrated that the problem was not only the result of the style customization of my site.  Thanks for the help anyway.

 

Ken



#29 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 July 2013 - 01:33 PM

Happy to hear it's resolved!







Also tagged with one or more of these keywords: bootstrap, tabbable, tabs-left