Input don't resize after a specific size

Question

I am working on a web site (Bons Alunos).

On the page documents I have a search input.

When I resize the window to a smaller size the input becomes smaller as expected.

But when the window is really small the input stops resizing and the button on the right starts to get hidden.

Any idea what is wrong?

Thank you, Miguel

Could you post the code related to the search box, and anything you've tried. — Andrew, Dec 22 '13 at 21:22
It looks like you have a min-width property set on the div that wraps the text input. — Andrew, Dec 22 '13 at 21:22
Yes, I know I have that minimum size ... The question is why does the button gets hidden ... Shouldn't the button be inside the div? — Miguel Moura, Dec 22 '13 at 21:33
Even if I have a minimum width the button should be inside the window ... the input would resize ... If I would have a minimum-width applied to the input that would make sense ... But not this — Miguel Moura, Dec 22 '13 at 21:35

score 2 · Accepted Answer · edited May 23 '17 at 12:03

2

the input and the button are enclosed in a fieldset, and the browser gives the fieldset a min-width. Either eliminate the fieldset, or add fieldset {min-width:0;} to your css

UPDATE Fieldset doesn't properly resize in Firefox. It's explained in this stackoverflow article:

<fieldset> resizes wrong; appears to have unremovable `min-width: min-content`

I suggest trying the url it recommends:

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

If that fails, you may have to abandon fieldset.

edited May 23 '17 at 12:03

Community

1
1

answered Dec 22 '13 at 21:36

yitwail

1,999
3
20
27

The minimum width didn't solved it ... I would like to have the field set because this way i would be able to share the css with other parts of the site. – Miguel Moura Dec 22 '13 at 21:40
@MDMoura I have edited it to be `` from chrome developer tools and it works for me, running chrome 31.0.1650.63 m on Windows 8.1. – Theraot Dec 22 '13 at 21:42
I am on Firefox ... going to test on chrome – Miguel Moura Dec 22 '13 at 21:42
@MDMoura after checking, on Firefox this doesn't solve the problem. – Theraot Dec 22 '13 at 21:43
I get the same result. I'll update the answer if I find a solution for Firefox. – yitwail Dec 22 '13 at 21:45
I added a border to div with class group and it seems the input and button are outside of the div on the right ... maybe that is the problem? – Miguel Moura Dec 22 '13 at 21:47
I updated the answer to add firefox specific css. You still need to set `min-width:0` in every browser, including firefox. – yitwail Dec 22 '13 at 21:59
You are most welcome. Firefox, chrome, and Safari all have bugs, but not as many as IE. – yitwail Dec 22 '13 at 22:40

Input don't resize after a specific size

1 Answers1