CODEWITHSUNDEEP
htmlcss
Yeats
Yeats

Reputation: 2065

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?

Upvotes: 1

Views: 2049

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371143

Add this to your button element:

white-space: normal;

Revised Fiddle

Buried deep in the user agent stylesheet is:

white-space: pre;

enter image description here

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.

Upvotes: 6

Hans
Hans

Reputation: 2492

just add to your stylesheet:

display: block;

it takes care of that for you

Upvotes: -2

Related Questions