fieldsets are ignoring container's padding
Hi everyone!
I'm struggling with the first two fieldset to respect the parent the container, but only the last one does (and I didn't get why)
Here some images to help u understand the problem (unluckly I can't take screenshots from company's PC)
10 Replies
What do you mean by “respect the parent the container”? What are the first two fieldsets doing that you don’t want them to do? I’m not understanding what the last one is doing that you want to replicate in the first two
@hart❤🔥
Ok so, in the end I found what's causing the problem!
Let me explain.
I have the first two fieldset that are completely ignoring the container's padding (the second image) and the first two fieldset are "kinda" overflowing, while the last one is behaving correctly (to make it easier to undestand, the bottom thin gray border, in the last one is delimited by the parent' padding)
After some error and trials and investigation, I found out that what's causing this issue is a fixed width set on the input elements (maybe one of my collegues did this)
I'm curious to know why a fixed width was causing this issue
Hmm, you'd expect it to wrap down, and not overflow out the side, if it's a fixed width. Are they flex items, by any chance? Flex items, by default, don't wrap unless it's declared on the parent.
If flex-shrink is off, it'll cause an overflow pretty easily.
I'm just speculating though, without seeing more it's really hard to say what the caue might be
Hi Kevin, thanks for your help!
I misused the term overflow here, but I dont have any overflow issue here, so my apoligize! 😅
I'll make a codepen to re-create the issue, hopefully it'll be clear! 🙂
sounds good 🙂 - to me, going into the padding is overflowing, since it shouldn't go there 😄
here's the pen 🙂
https://codepen.io/fracav99/pen/OJqbpVY?editors=1100
I have an issues with inputs too; the text “input” delineated by its border shrinks with its parent but as it’s shrinks , any placeholder or text inside gets covered up/cut off by some invisible something within the input, even it looks like there is space between the end of the placeholder and the right border of the input. It’s so weird. It’s like some box inside pushes to the left and isn’t scaling so it cuts off/covers up the end of the text inside. I’m trying to find an example but of course it’s not doing it on this device.
But for your issue, in the sceeenshot I see you have flex on the last fieldset but not the first two. In your codepen, even if you take off the fixed widths it’s still overflowing unless you add a flex-wrap: wrap; on your .row class
@hart❤🔥 yeah, of course without flex-wrap it will overflow, but the main issue was about the fixed width, but thanks for the help! 🙂
For your issue, can you recreate like I did in codepen?
I have an example on icodethis but I’m gonna have to wait until I get on PC to record it bc now I’m not able to recreate it on my phone
Ye no prob, whenever