Inspiring

Answered

Tab pane content moves down

Forum|Forum|4 years ago
May 30, 2021
2 replies
466 views

Hi wonderful people,

After making my pages all php in order to link up with a template, the tab panes are not working properly - content in each subsequent pane moves down the page even further than the last - using Dreamweaver 21.1 Bootstrap 4.4.1

https://www.quodvultdeus.com/KS3_Philo.php

There is nothing additional in the css apart from the default settings - margin (auto) and padding (3em) for each pane. Any ideas?

This topic has been closed for replies.

Correct answer osgood_

I have just republished the page with Lorem Ipsum content replaying the links etc but the tab pane error still occurs.

https://www.quodvultdeus.com/TestingTabPanes.php

I have just republished the page with Lorem Ipsum content replaying the links etc but the tab pane error still occurs.
https://www.quodvultdeus.com/TestingTabPanes.php

By @Weat01

You still have errors in your coding. Maybe either Nancy or Ben can give you some advice as to what to do to correct them, they are efficient Bootstrap users. I don't sort Bootstrap errors out because the component code is too bloated for me to have any desire to waste my time looking through the mess it creates.

EDITED

Can you please STOP corrupting the default Bootstrap css file. If you link the CDN version up to your page and get rid of the corrupted version of the css file you currently have, the tab panel works as expected, regardless of the errors still in your page.

CDN version:

How do you expect things to function correctly when you keep corrupting them, it aint going to happen my friend, not in a million years.

NEVER alter the default Bootstrap file UNLESS you're a css expert. If you want to overide the default styling use a separate stylesheet linked to your page/s

O

osgood_

Legend

the tab panes are not working properly - content in each subsequent pane moves down the page even further than the last - using Dreamweaver 21.1 Bootstrap 4.4.1

By @Weat01

What is the below junk? Did Bootstrap output that. I know Bootstrap is pretty bad when it comes to how much extra coding and utility classes it uses for simple components, but even this is beyond the capabilities of Bootstrap.

On the following page, if you scroll way down, under the heading 'Javascript behaviour' you will find a couple of Bootstrap tab nav examples, with code.

https://getbootstrap.com/docs/4.0/components/navs/

<div role="tabpanel" class="tab-pane fade show active" id="home1" aria-labelledby="hometab1">
       	  <p>KNOWING GOD<br>
        <p class="Paragraph-Style-18pt" id="u250481-4" style="user-select: auto;">Ways of Knowing God<a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP1_WaysKnowGod.pptx" style="user-select: auto;"> powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-8" style="user-select: auto;">Activity <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP1_WaysKnowingGod.docx" style="user-select: auto;">Texts</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-9" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-13" style="user-select: auto;">Through Jesus<a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP2_ThroughJesus.pptx" style="user-select: auto;"> powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-16" style="user-select: auto;"><a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/HWKnowingJesusSEN.docx" style="user-select: auto;"><span id="u250481-14" style="user-select: auto;">SEN/HW sheet</span></a></p>
        <p class="Paragraph-Style-18pt" id="u250481-17" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-21" style="user-select: auto;">Through the Bible - <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP3_ThroughBible.pptx" style="user-select: auto;">powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-24" style="user-select: auto;"><a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP3_GodBibleSEN.docx" style="user-select: auto;"><span id="u250481-22" style="user-select: auto;">SEN Sheet</span></a></p>
        <p class="Paragraph-Style-18pt" id="u250481-25" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-29" style="user-select: auto;">Through Prayer<a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP4_ThroughPrayer.pptx" style="user-select: auto;"> powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-30" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-34" style="user-select: auto;">Through Conversion <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP5_ThroughConversion.pptx" style="user-select: auto;">powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-38" style="user-select: auto;">Extra activity -<a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP4_ConversionStory.docx" style="user-select: auto;"> story</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-39" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-43" style="user-select: auto;">Through Church <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP6_Miracles.pptx" style="user-select: auto;">powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-44" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-48" style="user-select: auto;">Through Miracles <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP7_ChurchTradition.pptx" style="user-select: auto;">powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-52" style="user-select: auto;">Miracles <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP6_Miracles.docx" style="user-select: auto;">Activity</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-53" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-57" style="user-select: auto;">Through Nature <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP6_Nature.pptx" style="user-select: auto;">powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-58" style="user-select: auto;">&nbsp;</p>
        <p class="Paragraph-Style-18pt" id="u250481-62" style="user-select: auto;">Through History <a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP6_Nature.pptx" style="user-select: auto;">powerpoint</a></p>
        <p class="Paragraph-Style-18pt" id="u250481-66" style="user-select: auto;">Activity<a class="nonblock" href="http://quodvultdeus.com/Resources/PhilosophyKS3/KnowingGod/LP7_History.docx" style="user-select: auto;"> Texts</a></p>
        <p class="Paragraph-Style-14pt" id="u250481-67" style="user-select: auto;">&nbsp;</p>
      </div>

Nancy OShea

Community Expert

Blaming Bootstrap is no solution. The critical code errors must be resolved ASAP.

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

Blaming Bootstrap is no solution. The critical code errors must be resolved ASAP.

By @Nancy OShea

Joke, cant resist, the OP seemed to point the finger partially at Bootstrap - <snip>using Dreamweaver 21.1 Bootstrap 4.4.1</snip>

Nancy OShea

Community Expert

Fix your code errors.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.quodvultdeus.com%2FKS3_Philo.php

Nancy O'Shea— Product User & Community Expert

W

Weat01Author

Inspiring

OK I have fixed most of them but I don't understand the hats error :
"The aria controls attribute must point to an element in the same document."

<li class="nav-item"> <a class="nav-link" href="#paneTwo1" role="tab" id="hatstab1" data-toggle="tab" aria-controls="hats">Nature of God  </a> </li> <li class="nav-item"> <a class="nav-link" href="#paneThree1" role="tab" id="hatstab2" data-toggle="tab" aria-controls="hats">Theology of Body  </a> </li>

The corresponding code for the pane content is

<div role="tabpanel" class="tab-pane fade" id="paneTwo1" aria-labelledby="hatstab1"> <div role="tabpanel" class="tab-pane fade" id="paneThree1" aria-labelledby="hatstab2">

What should I change? The 'hats' field is default
Also W3 tells me that it doesn't like the div tag that starts off the tab panel content (not being a child of ul), but how can i remove this?

<div id="clothingnavcontent1" class="tab-content">

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded