cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

Tab pane content moves down

Weat01
Explorer ,
May 30, 2021 May 30, 2021

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?

394
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

osgood_
LEGEND , May 30, 2021 May 30, 2021
quote

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

...
Translate
replies 10 Replies 10
latest latest Jump to latest reply
Nancy OShea Community Expert
Community Expert ,
May 30, 2021 May 30, 2021

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 & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Weat01
Explorer ,
May 30, 2021 May 30, 2021
In Response To Nancy OShea

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&nbsp;&nbsp;</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&nbsp;&nbsp;</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">
 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
May 30, 2021 May 30, 2021

 

 

 

quote

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>

 

 

 

 

 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
May 30, 2021 May 30, 2021
In Response To osgood_

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

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
May 30, 2021 May 30, 2021
In Response To Nancy OShea
quote

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>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Weat01
Explorer ,
May 30, 2021 May 30, 2021
In Response To osgood_

I originally made the site using Muse, and as a short cut to getting all the links to all the individual files, i copied the html export of the file, and it came with junk included.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
May 30, 2021 May 30, 2021
In Response To Weat01
quote

I originally made the site using Muse, and as a short cut to getting all the links to all the individual files, i copied the html export of the file, and it came with junk included.


By @Weat01

 

I think youre better off rebuilding the tab panel component by refering to the Bootstrap documentation at the link I provided. At the moment it's very messy and by the time you interweave the Bootstrap code that is needed it will become even more obtuse.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Weat01
Explorer ,
May 30, 2021 May 30, 2021
In Response To 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

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
May 30, 2021 May 30, 2021
In Response To Weat01
quote

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:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

 

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

 

 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
May 30, 2021 May 30, 2021
LATEST
In Response To Weat01

 

quote

I originally made the site using Muse...

======

Pure poison and a really bad way to begin a new project.   Muse code was hideous.  Garbage in, garbage out.  For best results, start fresh with clean code.

 

1. Go to File > New > Starter Template.

2. Click on Bootstrap Templates.

3. Pick a layout.

4. Hit the Create button.

5. File > SaveAs BS4-tabbed-panels.html (see screenshot).

 

File > New > Starter TemplatesFile > New > Starter Templates

 

Once saved, your Files Panel should look something like this:

Files Panel (F8), Local SiteFiles Panel (F8), Local Site

 

Go to Insert > Bootstrap Components> Tab.

Ctrl + S to save.

 

 

 

Post back if you have further questions.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices