Sign in to follow this  
Uaithne

 Coding Can Tabbed Content Adjust Length for Each Tab?

Recommended Posts

I figured out how to do tabbed content.  Yay!  But then I come across the problem that some tabs have content that is longer than the content in other tabs.  This results in awkwardly long areas of nothing or lots of scrolling in order to compensate for the length of other tabs.  Is there a way so that the area of each tab changes size in order to adapt to the length of the content in that tab?

 

This is for doHTML on Jcink.  This is the tabbed stuff if that helps at all.

Share this post


Link to post
Share on other sites

I'm having a heckuva time using the "inspect" feature.  No worries, though.  I appreciate the help.

 

Though if anyone else can answer my question, that would be great.

Share this post


Link to post
Share on other sites

I made the following changes in inspect element:

 

.content {

position: absolute;

top: 28px;

bottom: 0px;

left: 0px;

right: 0px;

background: #0A0A0A;

padding: 20px;

margin-left: auto;

margin-right: auto;

max-width: 450px;

overflow-x: auto;

font-size: 12px;

line-height: 180%;

height: fit-content;

max-height: 800px;

}

 

The magical thing here being height: fit-content; You need to add a max height otherwise the div absolutely will make itself longer to fit the content - in the timeline's case, no fun.

 

So that works....but the other content is still visible underneath the content you've selected:

 

example.thumb.PNG.e3f7322500ab2646d347be91bd68946d.PNG

 

So we need the contents to not display, until they're selected.

 


[code].content {

display:none;

position: absolute;

top: 28px;

bottom: 0px;

left: 0px;

right: 0px;

background: #0A0A0A;

padding: 20px;

margin-left: auto;

margin-right: auto;

max-width: 450px;

overflow-x: auto;

font-size: 12px;

line-height: 180%;

height: fit-content;

max-height: 800px;

}
:checked ~ div.content {
display: block;
}

 

Your last problem is infohold, which does not expand or contract based on the child div, even with fit-content. (Because the content is absolutely positioned, it has been removed from the normal flow of the document. AKA. The parent doesn't see it anymore.)

 

I couldn't think of a CSS fix. I was thinking maybe you could use https://css-tricks.com/almanac/properties/b/border-image/ border-image on the content and then just position the tabs how you want them?

 

Apparently javascript also fixes this problem however. JS Fiddle

 

Play around with both and see what you get?

 

Edited by Kit the Human

Share this post


Link to post
Share on other sites
Awards

Hmm.  I might have to go back to the drawing board and find a new tabbed template to use.  Thank you for your help.

Edited by Uaithne

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  

  • Recently Browsing   0 members

    No registered users viewing this page.