Jump to content

Can Tabbed Content Adjust Length for Each Tab?


Uaithne
 Share

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.

WoL___dark01.png

Link to comment
Share on other sites

I managed to achieve something like that but I can't say I remember how... is something like this good for you? http://silenceandwhispers.icyboards.net/showthread.php?tid=463

 

You can take my app template and see if you find anything useful there, or just edit the thing to look the way you need.

  • Love 1

UNMASQUED

Vampires are real. Now the world knows about them.

Link to comment
Share on other sites

@featherstone Yes, exactly!  I don't know where your template is for me to check out the difference in coding, though.

WoL___dark01.png

Link to comment
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.

WoL___dark01.png

Link to comment
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

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites

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

WoL___dark01.png

Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.