Wrapping slider parent to child height

[jon0102]

So, I’m doing battle with Slider Revolution CSS and it’s driving me a little bit crazy!

I’ve set the height of .tp_tabs to wrap to the height of its contents, but I just can’t seem to get the parent div .rev_slider to wrap to the height of .tp_tabs.

I’ve tried everything I can think of, but it just won’t play nice. I’ve tried clears, floats, table displays, various overflows and it just won’t do what I want it to do.

I’m really hoping someone can help me win this battle!

Easiest way to troubleshoot it is probably to have a look at the demo site: http://devvy.site/ and fiddle with the inspector. That’s what I’ve been doing.

[Senff]

I’m wondering why you specifically need to do that, since Revolution Slider is working fine without that. By that I mean that it’s a proven concept, lots of testing has been done, so there shouldn’t be a direct need to mess with it (so to speak).

The height of .rev_slider is calculated and assigned (with inline styles) by the plugin itself, so in order to override it you’ll have to use some “!important” tag (not recommended in the first place) or do some hacking in the plugin scripts.

Not sure if that Devvy site is what you’re working on or if you just use it as an example, but with the inspector I can change the height easily of course.

[jon0102]

The reason is that it uses absolute heights (e.g. slider height 350px, or tab height 50px) which don’t work well with variable content. The length of the title in particular.

As you can see on the example the length of the title varies between 1 and 3 lines of text, which (using the default settings) was getting cut off. Likewise, once you change the height of the individual tabs to react to the height of the content the .tp_tabs bar cuts off anything outside its own set height.

The point is that I don’t want to use a static height – for any of it. It needs to adapt to how long (how high) the individual post titles are, which will vary.

Hope that makes sense? I can upload the ‘standard’ version to the dev site if it’ll help you see what I mean.

[jon0102]

It’s the tab settings that just aren’t right CSS-wise.

This is what it looks like, without any interference from me, using the default settings and tab styling “Hebe”:

http://devvy.site/test/

Just tried “Zeus” as well. They both look awful…

[jon0102]

Issue exactly the same on another test site, with a fresh install: http://devvy.xyz/test/

I’ll talk to the developers as well, as they may be able to come up with a fix, but won’t be able to help with customisation.

[Author]

Posts