CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
dajnz
dajnz

Reputation: 1188

Strange behavior of an input html element with display: block

I'm trying to make some html form with help of bootstrap. Some of my inputs must have no gap from left or right side. But bootstrap .col-XX-Y blocks have gutter via paddings from left and right. So my idea was to use negative margin for my input elements, and display: block. And here I'm stuck. Please refer to this codepen example. I was faced with several strange things for me:

  1. Why input with display: block doesn't fill all it's parent container, like div does? It fills the container only with: width:100%; (comment width for red-bordered input in codepen example)

  2. Why if I'm apply negative margin-left to compensate parent container's left padding, my input shifts to the left, but keeps it's original width (like if left css property was used). Doesn't it have to behave like a block element (e.g. div): shifts to the left and keep filling of all width of it's parent, excluding right padding?

  3. When I'm apply negative right margin for my input to compensate parent's right padding, then nothing happens (look my example, compare orange div with red input). Why? What about of a behavior like block element?

If this is normal behavior, can you give me some link to html standard docs with explanations of that.

Upvotes: 0

Views: 793

Answers (2)

Jackson
Jackson

Reputation: 3518

Form elements do not behave the same way as regular block level elements. When you display an <input> field as block it will not fill the full width.

For this reason you need to make give the element width: 100%. This is how Bootstrap styles form elements.

Like any other block element, giving it a width of 100% will allow it to fill the width of its container. When you apply a negative margin-left, the width will still be the same (100% = containers width) which will cause the gap to appear.

I would suggest wrapping the <input> field in a <div> and apply the negative margin to that instead:

.wrap {
    margin: 0 -20px;
}
.wrap input {
    width: 100%;
    display: block;
}

Upvotes: 1

katwekibs
katwekibs

Reputation: 1437

If you don't want the padding on a grid parent element to effect its children, surround all its children elements in a block element with a class of row.

Bootstrap input elements are meant to span the whole width of there parent elements even without display block style attribute.

<div class="col-md-12">
  <div class="row"> <!--this is what you need -->

  </div>
</div>

full example code

<div class="col-md-12">
    <div class="row">
        <input type="text" placeholder='I\'m some damned input' />
    </div>
    <div class="row">
        <div>I am some div</div>
    </div>
</div>

Upvotes: 1

Related Questions