Yeats Yeats - 5 months ago 31
CSS Question

input button not responsive (overflowing container)

Before, I used a home-made submit call so I could have forms without

<form>
and
<input>
buttons. A button could for example look like this:

<div class="ui big green button">This is a long button that should not go off screen</div>


Now, though, I've switched to a different front-end library so I have to do this:

<input type="submit" class="ui big green button" value="This is a long button that should not go off screen" />


This, however, comes with the caveat that my
input
button isn't responsive to the window size, i.e. it doesn't grow thicker when the window is small, instead just disappears off screen.

I think this is because some strange styling is added automatically to
input
that I can't reach or change:

user agent stylesheet
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
}


There are way more than this and I don't know exactly what makes my button behave this way, so I don't know what to override (if I can).

Here's my code so you can see this in action:



<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/button.min.css" rel="stylesheet"/>
<input type="submit" class="ui big green button" value="This is a long button that should not go off screen" />

<div style="margin-top: 20px;" />

<div class="ui big green button">This is a long button that should not go off screen</div>





https://jsfiddle.net/vLaf94t1/

What can I do to fix this simply?

Answer

Add this to your button element:

white-space: normal;

Revised Fiddle

Buried deep in the user agent stylesheet is:

input[type="button" i] { white-space: pre; }

16.6 White space: the white-space property

This property declares how white space inside the element is handled. Values have the following meanings:

normal

This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

pre

This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.

Comments