Jump to content
  • Spotlight RPG
  • Spotlight RPG
  • Spotlight RPG
  • Spotlight RPG
  • Spotlight RPG
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up
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 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

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.

×

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy