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
DJR
DJR17mo ago
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.
Bence
Bence17mo ago
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.
Bence
Bence17mo ago
so gave me the directions I needed thanks ❤️
DJR
DJR17mo ago
Great! You're welcome!
Want results from more Discord servers?
Add your server