Kevin Powell - Community•4mo ago

SOLVED: select element not respecting grid cell- heights gonna height

Edit: Heights will cause overflow have you heard?? 🤦🏻‍♀️ it can’t be a block size of 100% when it has a sibling taking half ##New Problem: i have html {color-scheme: dark } and if iset the select background-color to transparent, the dropdown is white and i cant see the options. is there a way to make the trigger button/box transparent but see the dropdown options? I havent yet thrown this in a codepen but i am puzzled why this standard select element when applying block-size: 100% escapes outside of its parent. I couldn’t find anything in the dev tools styles that would account for this. The relevant html is as follows: -form -fieldset > input + label (*5) -fieldset > select + label -fieldset.span-2 > textarea + label -fieldset.span-2 > checkbox + label -button the relevant css:

form {grid-template-columns: 1fr 1fr; gap: 1em;}

.span-2 {grid-column: span 2;}

fieldset:has(select) { outline: 1px solid red; }

select {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

form {grid-template-columns: 1fr 1fr; gap: 1em;}

.span-2 {grid-column: span 2;}

fieldset:has(select) { outline: 1px solid red; }

select {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

as you can see when given a block-size of 100%, it escapes out of its fieldset parent (the red outline)? why?? I know i will probably have to wipe all the styles anyway and build a custom select element but I am so confused as to why it can escape outside of its parent/cell.

11 Replies

clevermissfox•4mo ago

The bottom of the select box is touching the top of the”about” the textarea label 😵‍💫 its extended past the gap even

Kevin Powell•4mo ago

Could you put this in a codepen, I don't get why that's happening either 😄

clevermissfox•4mo ago

I’m wondering if it’s normal behavior I just never run into bc I don’t work with heights ever. It’s the same block-size as its parent but it has to share space with the label so it’s overflowing? Could it be that simple ? The exact reason I don’t set heights ? https://codepen.io/Miss-Fox/pen/poXvmbP

CleverMissFox-GAcct

CodePen

Select El overflow

...

Kevin Powell•4mo ago

Oh wait, block-size: 100%, it's matching the height of the grid cell it is that simple, yes 🙂

clevermissfox•4mo ago

I should not be debugging so late at night or making posts about “why is my height overflowing?” 😆 good grief. For some reason I expected it to act like a flex grow and take the remaining space. Thank you 🤦🏻‍♀️

Kevin Powell•4mo ago

If you add select to your :is(input ...) selector, and give the select the same font size as the other inputs, I think they'll match

clevermissfox•4mo ago

Beautiful thank you, they do. I didn’t realize “select” wasn’t in my reset to set font: inherit etc . Now I’m wondering what else I’m missing. Really appreciate it

clevermissfox•4mo ago

##New Problem: i have html {color-scheme: dark } and i get the black bg initially but if i set the select background-color of the select to transparent, the dropdown is white and i cant see the options. is there a way to make the trigger button/box transparent but see the dropdown options?

clevermissfox•4mo ago

oh wait. tried select:-internal -list-box to no avail, tried select options no dice but if i just use select > * the box styles work? edit: i mustve done something wrong initially because selecting select options {background-color: var(--my-clr) } does work 🤦🏻‍♀️ however is there a way to change the default blue on the highlighted option?

Kevin Powell•4mo ago

There's basically nothing you can style 😅 - one of the reasons I'm hoping to start seeing some progress on <selectmenu>, which is a select, but fully styleable 😄

clevermissfox•4mo ago

I was just looking at the support for it the other day , still zero progress and that it is now being called selectlist instead. For now anyway 🤣 thanks KPow!

Gaming

Programming

SOLVED: select element not respecting grid cell- heights gonna height