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

#1 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 13 June 2013 - 03:09 AM

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



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 13 June 2013 - 02:28 PM

Hello hkust_itsc

 

Could we have a link tot your site please? 



#3 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 14 June 2013 - 07:55 AM

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

Attached Files



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17618 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 14 June 2013 - 08:04 AM

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

#5 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 20 June 2013 - 08:00 AM

Hi, the codes I was trying to put in PageLines were taken from the following page in BootStrap

Please Login or Register to see this Hidden Content

 

please scroll to "Tabs on the left" section under "Tabbable in any direction".

 

Thanks,

Ken



#6 James B

James B

    Advocate

  • Members

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

Posted 20 June 2013 - 07:34 PM

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.



#7 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 21 June 2013 - 01:37 AM

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='

Please Login or Register to see this Hidden Content

' 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
 

Attached Files



#8 Rob

Rob

    One Smart Egg

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

Posted 21 June 2013 - 11:57 AM

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.



#9 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 23 June 2013 - 05:15 AM

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

Attached Files



#10 Rob

Rob

    One Smart Egg

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

Posted 23 June 2013 - 02:03 PM

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:

Please Login or Register to see this Hidden Content

Please see

Please Login or Register to see this Hidden Content

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



#11 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 24 June 2013 - 03:26 AM

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



#12 James B

James B

    Advocate

  • Members

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

Posted 24 June 2013 - 11:39 PM

Hi there, 

 

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



#13 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 02 July 2013 - 02:14 AM

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



#14 Rob

Rob

    One Smart Egg

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

Posted 02 July 2013 - 02:35 PM

Please use an URL masking site like

Please Login or Register to see this Hidden Content

instead of email.  Thanks.



#15 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 03 July 2013 - 06:45 AM

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



#16 Rob

Rob

    One Smart Egg

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

Posted 03 July 2013 - 06:59 PM

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.



#17 James B

James B

    Advocate

  • Members

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

Posted 03 July 2013 - 07:27 PM

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



#18 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 04 July 2013 - 01:19 AM

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



#19 hkust_itsc

hkust_itsc

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 04 July 2013 - 06:30 AM

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



#20 Rob

Rob

    One Smart Egg

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

Posted 04 July 2013 - 12:46 PM

Your tabs look fine and work correctly.







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