Css issue in my finished Survey form project

Hello there guys!

I would really love any feedback on my survey form page:

But mainly I have an issue that’s bothering me, that I’m setting the width of input boxes to 100% with:

.form-item .square-input {
  width: 100%;
  padding: 6px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;

But they don’t seem to take up the whole available width, if I remove the display: flex from the parent container they do, so I’m suspecting that the labels have to do something with this.

Thanks in advance.

I used the Dev tool in chrome and found out the width of input.square-input is wider than form#survey-form because of the padding setting. (The width of form#survey isn’t fulfill the width.) If you set “overflow: hidden;” on form#survey-form, those inputs would be cut off. Maybe because of the default input width setting of browsers.

I think maybe give a width to the form#survey-form or use reset, normalize.css could solve it.

1 Like

Thanks for your reply @cyishere, actually as I said when I remove the display: flex from the parent container (div with class=“content”) the issue of the full width is resolved, and I’m not sure why I’m making the display flex in the parent container, because it’s not giving me benefit so I’ll remove it.

Now my main issue is that the <select> tag is not taking full width as the input elements, and the button is taking the same width as the <select> tag, do you guys have any idea why?

I tried giving width: 100% to #survey-form but nothing changed.

As @cyishere noted, I notice that the form element doesn’t take the full width of the div.content and the <select> tag and the Submit button are taking the width of the form element. why is that?

I’ve just noticed that I’ve added a padding of 2.5rem to the div.content element that contains the form, so the form was behaving correctly but turned out the .form-item .square-input divs were incorrect and they are going out of bound.

The items had padding of 6px 12px; which caused them to get out of bound! after removing the padding they returned to be contained in the form space, I’m not sure yet how I’ll handle this.

In the sample project, he uses padding with the input fields and sets their width to 100% and the out of bound doesn’t happen, why?

I think I found the info I need in these links:

I added

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */

to the css where I’m setting the width and padding and it worked!

Everything is great now, I have only one question, why when I add display: flex to the container, there becomes an empty space in the right inside of it! But maybe I’ll find out in later projects. Cheers!

1 Like

Glad you solve it, cheers! box-sizing is really a tricky one.

1 Like