add overflow if needed-- CSS equivalent of if statement

Question

In this fiddle: https://jsfiddle.net/9erLby1o/4/, using JS I add if needed an overflow property. If the container of my table is smaller than the width of table. this is done in the following js lines:

for(var el=0; el<document.querySelectorAll("table").length; el++){
    if (document.querySelectorAll("table")[el].parentElement.offsetWidth < document.querySelectorAll("table")[el].offsetWidth ){
        document.querySelectorAll("table")[el].parentElement.classList.add("overflow");
    }
}

I would like to know if something like that is possible in pure CSS.

I am a bit influenced by the checkbox hack which implies if statement but I cannot access the properties of the elements in css so I would like to see how and if I could use it in this context.

Lastly I would like to know why I should prefer CSS than javascript in this scenario. (The only possible reason I can think is that since CSS use is inevitable it should be able to handle all the style of the application. But I may be wrong)

The problem with adding overflow every time was that if you have a tooltip inside it will to the vertical overflow, because you cannot have overflow only in one axis. @epascarello — partizanos, Dec 05 '16 at 13:39
@Johan Kratzik ,I am using media querioes for now but I want to use same class with many tables so I was thinking of something more generic.. Except if there a way to get the initial width of the parent element — partizanos, Dec 05 '16 at 13:40
So you are saying that [overflow-x](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x) does not work? — epascarello, Dec 05 '16 at 13:42
No because you cannot apply overflow only in x or y dimension it is being marked by all browsers hidden automatically. http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue — partizanos, Dec 05 '16 at 13:46
The only hack to beat the overflow only for my tooltip is here but I couldn't make it work.. — partizanos, Dec 05 '16 at 14:12

score 1 · Accepted Answer · answered Dec 05 '16 at 13:41

1

You can use the overflow: auto; property on the container of the table to achieve this. This property automatically adds a scrollbar if the child element's size becomes bigger than the parent element's size.

You should use css for this because you would not want to write a multi line JS function to achieve what you can do with one single line in css. Hope this helps you.

answered Dec 05 '16 at 13:41

Nishant Kumar

71
5

Thank you a lot, I have tried this but my problem was that some of my tables have tooltip which need to exit the parent if they are near border – partizanos Dec 05 '16 at 13:45
You can create a fixed element for showing tooltip which will appear where your mouse pointer's coordinate. In such case the tooltip wont be inside the table so container will not overflow vertically. – Nishant Kumar Dec 05 '16 at 13:53
Is it possible to get mouse coordinates and display the tooltip only using CSS? – partizanos Dec 05 '16 at 14:06
Thank you your answer pushed e to search a bit I found this post mentioning that via cursor property in some browsers you can get the mouse coordinates https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property. I will try create it and let you post it :) – partizanos Dec 05 '16 at 14:24
I didnt have time yet to replicate it but using js for coordinates overflow : auto to parent element and js for takeing coordinatees of click event and making the tooltip appear as needed should fix the problem. I will edit the question as soon as I implement it. Thank you again and if you know/learn a pure css way let me know. Cheers! – partizanos Dec 06 '16 at 14:13

add overflow if needed-- CSS equivalent of if statement

1 Answers1