CODEWITHSUNDEEP
htmlcss
Marco Dinatsoli
Marco Dinatsoli

Reputation: 10570

min-width css is not working

I have a form and I put the max width to 600 px it works perfectly,when the user submits the form and there are errors, I created the form again with the error message each to the input field.

the problem is that I want the form to expand where there are error messages.

What have I tried

I google the problem and I found this question How do I make a div dynamically change to content width AND have it remain that width even as the browser window changes size?

I tried it like this:

.inputForm{
    min-width:600px;
    width: 100%;

with removing the max-width of course, but that just make the form as if the width 100%.

This is a jsfiddle before submitting

http://jsfiddle.net/e9Y4w/

This is the jsfiddle after submitting: http://jsfiddle.net/e9Y4w/1/

Upvotes: 1

Views: 3448

Answers (2)

Joel
Joel

Reputation: 2257

The problem is you're setting a % width on your inputs. Change it to a specific pixel width like so:

.inputForm input[type="text"], .inputForm input[type="email"], .inputForm textarea, .inputForm select {
...
width: 420px; /*70%;*/
...
}

Then change your form to be an inline-block so that it will auto-size the width and add in your min-width:

.inputForm{
min-width:600px;
display: inline-block;
/* width: 100%; */
/* max-width: 600px; */
...
}

Upvotes: 4

ZeroBased_IX
ZeroBased_IX

Reputation: 2727

If I understand you correctly, you want to stop the text wrapping of the required field text.

To do this simply add the below to your form: 

 .inputForm{
       min-width:600px;
       white-space: nowrap;
       display: inline-block;
...

This stops it from wrapping the text and makes sure the container grows with the text if the display is small enough, this is done with the inline-block.

I also added a min-width to the input["text"] fields. But that's personal preference.

http://jsfiddle.net/e9Y4w/3/

Upvotes: 2

Related Questions