Jump to content
Sign in to follow this  
pracede

Tabs does not work well

Recommended Posts

pracede    0
pracede

Hi,

 

I have added tabs on my website. I use shortcode provide on the link http://support.pagelines.me/docs/miscellaneous/shortcodes/ .  Instead of be displayed on the same like on the pagelines example. You can see it on the following link http://troll.ws/image/87c96c86#.UbWoLNjvjCo

 

 

My tabs are displayed the first on the first line and the second below. You can see it here : http://troll.ws/image/b8dc5a76#.UbWocdjvjCo

 

When i inspect the code i notice this :

 

 

<ul class="nav nav-tabs"><br />
<li class='active'><a href="#1" data-toggle="tab">Title 1</a></li><br />
<li ><a href="#2" data-toggle="tab">Title 2</a></li><br />
</ul></p>
<p> <div class="tab-content"><br />
<div class="tab-pane active" id="1"><p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</p></div><br />
<div class="tab-pane " id="2"><p><p>
<img class="pl-imageframe" alt="" /></p>
</p></div><br />
</div></p>
<p> </div>

 

The <br/> is generated on my code. I am wondering if it is normal ?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

This is a Wordpress quirk, see this topic to resolve your issue.

 

http://www.pagelines.com/forum/topic/27437-unwanted-empty-pp-markup/

 

Basically Wordpress likes to add p tags when you do a line-break, so you can either follow the instructions from the topic above or edit your shortcode so it contains no line-breaks.

For example:

[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 search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem!


Please search our forums, before posting!

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

    • John Olsson
      By John Olsson+
      We're often working with ACF (https://www.advancedcustomfields.com/) that's great for user experience in the backend, 'cause we don't want out clients to be in the editor to much.
      So we want to be able to use shortcodes in the editor fields, regardless of section, THIS WOULD BE SO GREAT. Is there a way to fix this, it should open up som much more functionality.
      In ACF, the shortcode is for example: 
      [acf field="field_name"] ...for example, I want to att field_names value to display in a section, i understand I can make it in embed and so, but I want it in titles and options, the whole range.
      I know I can build my own sections, that we've done, but it's not very effective, and thats what PL5 is about.
      Any ideas on this, can Pagelines take this in the core? I guessing there are more than just ACF out there who can use this.

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • jojoking
      By jojoking+
      I have to admit to being baffled.
      I'm trying to embed a video (from my WP media library) within a WP post using the videobox section shortcode.
      The shortcode section popup only allows two items to be configured - the section type, in this case videobox - and a unique id. There's no URL or other parameters such as autoplay or loop which are available within the Pagelines editor.
      Whatever I put in the unique ID makes no difference to what is shown which seems to be a default video with stars or white noise on a black background.
      I assume I need to define this ID somewhere else, or maybe WP has done it for me?
      HELP!
       
      PS This is the page source generated when a shortcode is added within the WP post editor
      <!-- VideoBox | Section --> <section id="videobox_1675853156" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="1675853156" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="280414138" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/plugins/pl-section-videobox/default.mp4?r=280414138" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#280414138')[0].load(); </script> </div> </div></div></section> </div>  
      If I add a videobox section using the Pagelines page editor the page source generated includes my video:
      <!-- VideoBox | Section --> <section id="videobox_udvu4uz" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="udvu4uz" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="429558737" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/uploads/2017/04/HIHWelcome.mp4?r=429558737" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#429558737')[0].load(); </script> </div> </div></div></section>  
    • bnapoli
      By bnapoli+
      On my site www.anewbeginning.com the "toggle" function mysteriously stopped working.  I have tried all browsers, tried disabling plugins, removing all the relevant CSS but still cant understand why it isn't working.
      The toggle is placed on this page: http://anewbeginning.com/?page_id=15965 and http://anewbeginning.com/?page_id=10779 but it does not display.
      On my other Platform5 websites, that exact code works fine: see here http://4aa.d11.myftpupload.com/?page_id=123
      Code is the same. Please help, thank you!
    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
×