Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 Horizontal scrolling from max-height property
So I encountered a weird issue when trying to use max-height to overflow it horizontally.

This is the test thread, testing using the same code multiple times with changes on the height properties.

-webkit-column-count:2;-webkit-column-fill:balance;-moz-column-count:2;-moz-column-fill:balance;column-count:2;height: 300px; overflow-x: auto; overflow-y: hidden; padding: 5px;

1. Height: 300px - works
2. Min-height: 300px - works
3. Max-height: 300px - doesn't work (it scrolls vertically though)
4. Min-height: 100px; Max-height: 300px - Max height doesn't register (though I think I know why but I'm not sure.)

I may probably be missing a logic here though.
I don't think this is a bug with the service but one with the browser.

Everything seems to work as expected for me in Firefox.

In Chrome, max-height is working properly, however overflow isn't. This seems like a bug with webkit's column-count and column-fill properties. Perhaps they do not respect max-height property when it comes to overflow?

I've never used those properties before so I don't have any experience with them, so I'm not really sure how to go about fixing it. Looks like you can just use height for now (though that does have the issue of making all posts at least 300px tall when they don't need to be...)

Experience with Invision Power Board 1.x since 2003
Everything appears to work as expected for me as well in Firefox.

I suspect a problem/conflict with webkit-column-fill, but I've never even seen any of these attributes. They are quite new.

Have you tried just regular column-fill and column-count instead of all the browser specific attributes? It may or may not make a difference; the -moz and -webkit ones are specific to said browsers and don't have to listen to universal rules if they so choose whereas the global attribute is held to different standards (or should be...).

email: :: blog: John C.
Ow, cross-browser issue. I haven't encountered a problem like that in a while so it hadn't crossed my mind (especially since the code was supposedly cross-browser in the first place.)

It doesn't work at all without the webkit. I also fiddled around and it seemed max-height is the issue. It worked fine with max-width, both with and without the columns.

Hmm. I guess I could try to figure out a javascript code for this.

This post has been edited by AMB Tanz: Jan 24 2014, 05:00 AM
I don't think you'll be able to do this with JavaScript. Looks like the attribute isn't global either - sorry about that.

email: :: blog: John C.
Hey, not entirely certain if this will help but a recent code I was helping out on had some strange issues in Chrome due to the horizontal overflow properties, we found manually setting the whitespace css variable for the HTML object in question worked. It seems like a common hack at the moment for hidden content spill over, though I'm still not entirely certain as to how it works so it may not be of any help. Just an idea wink.gif

There is a war going on for your mind. Those who seek to occupy it will stop at nothing. The battlefield is everywhere. There is no sanctuary. There are no civilians. You have two choices: surrender or enlist

Why do people feel the need to copyright codes in a way that prevents further editing. As long as the copyright remains intact your work is noted; allowing further editing/release spreads your name as a coder further and creates greater possibilities from something you created - that cannot be a bad thing. Next time you release a code, allow it to be modified and I won't set my zombie minions upon your cookie stash user posted image

My To-Do List

* I miss when this had stuff in it user posted image *

Or Check Out My Test Forum For All My Custom Codes/Skins!
Codes: 11 || Skins: 3 || Macro Sets: 3
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll