Having trouble positioning hamburger menu below container in a table header.
Hello, I have to create a table with a settings button in its header's first column. When clicking on the button it should open a pre-defined checkbox list below the button.
My problem is that there is a little offset of the pop-up checkbox list. You can see it in the images.
http://jsfiddle.net/mbence16/sanLy0u5/176/
Can completely rework everything and anything, but it must be pure css html. I am open to any suggestion.
table with settings button - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
4 Replies
This is happening because your list is being positioned relative to the table. With
box-sizing: border-box;, that includes the extra pixel.
A way around this would be to change position: relative; from your .header-with-settings class, and instead apply it directly to the .table class and then adjust the positioning accordingly.
You'll then be able to use left: 0;, but you'll need to use top: 20.5px; because of the border.http://jsfiddle.net/mbence16/sanLy0u5/334/
Added the relative positioning to the th element and moved the checkbox list into the th element, this way I could use
top: 100% and left: -1px (border width)table with settings button - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
so gave me the directions I needed thanks ❤️
Great! You're welcome!