Click here to Skip to main content
15,567,415 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I have 2 Tabs next to each other and some text (p) below the tabs.

Margin-Top of P is and stays equal to the height of the longest content of a tab.

How can i make it, that the Margin-Top of my P is always the same, ex.: 20px ?
HTML
<div class="wrapper">
  
      <button> Tab 1</button>
       <button> Tab 2</button>
        
    <div id="tab" class="tabs inliner">
        <div>
            <h2>Content 1 </h2>
        
        </div>
        <div>
            <h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam    </h2>
       
        </div>
    </div>
</div>
<p>Margin-Top of this text is set for the longest content. How to change that?</p>

CSS
.wrapper {
    overflow: hidden;
}

.tabs {
    position: relative;
    -webkit-transition: all .9s ease-in-out; 
    -moz-transition: all .9s ease-in-out; 
    -ms-transition: all .9s ease-in-out; 
    -o-transition: all .9s ease-in-out; 
    transition: all .9s ease-in-out;
 
}
.active {
 color:blue;
}
.tabs> * {
    width: 100%;
}

.tabs[data-tab='1'] {
    transform: translateX(-100%);
}

.tabs[data-tab='2'] {
    transform: translateX(-200%);
}
.tabs[data-tab='3'] {
    transform: translateX(-300%);
}
.tabs[data-tab='4'] {
    transform: translateX(-400%);
}

.inliner {

    white-space: nowrap;
}

.inliner > * {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-size: 1rem;
    letter-spacing: normal;
    vertical-align: top;
    word-spacing: normal;
    white-space: normal;
}

JavaScript
const btn = [].slice.call(document.getElementsByTagName('button'))
btn.forEach((item, index) => {
  item.addEventListener('click',function(){
    btn.forEach((item) => {item.classList.remove('active')})
    item.classList.add('active')
    document.getElementById('tab').setAttribute('data-tab', index)
  })
}  
)


What I have tried:

New to CSS and no experience with JS.

Really appreciated if someone can help me out on that.

Many thanks
Posted
Updated 1-Dec-22 0:13am
v2
Comments
Chris Copeland 1-Dec-22 4:15am    
I don't fully understand what the issue is here, though I have doubts about what you're trying to achieve with the above. For a tab control you shouldn't need to use transform: translateX() but I guess that's a different story. I doubt that the margin-top of the <p> element is changing, are you sure it's not just moving relative to the content displayed in the wrapper element?
Member 15627495 1-Dec-22 4:20am    
as you need to fix your margin-top, work on the container, not on the content..
because content can change, and container must stay the same.

1 solution

https://stackoverflow.com/users/14325417/lv[^] answered:
"I think you can only change the #tab height dynamically, check the code below:"

document.getElementById('tab').style.height = document.querySelector(`#tab div`).getBoundingClientRect().height + 'px'

const btn = [].slice.call(document.getElementsByTagName('button'))
btn.forEach((item, index) => {
  item.addEventListener('click',function(){
    btn.forEach((item) => {item.classList.remove('active')})
    item.classList.add('active')
    document.getElementById('tab').setAttribute('data-tab', index)

    const currentTab = index === 0 ? document.querySelector(`#tab div`) : document.querySelector(`#tab div + div`)
    document.getElementById('tab').style.height = currentTab.getBoundingClientRect().height + 'px'
  })
}  
)

And that did the trick.
Still, many thanks for your replies!
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900