CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
FrozenHeart
FrozenHeart

Reputation: 20746

input-group doesn't fit the whole td content in Chrome

I have the following web page:

HTML

<div class="center-both">
  <table>
    <tr>
      <td></td>
      <td>
        <img src="http://placehold.it/246x105">
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <img src="http://placehold.it/128x128">
      </td>
      <td>
        <img src="http://placehold.it/640x390">
      </td>
      <td>
        <img src="http://placehold.it/128x128">
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div class="input-group">
          <input id="video-url" type="text" class="form-control" value="some_text">
          <div class="input-group-btn">
            <button id="copy-clipboard" type="button" class="btn btn-default">
              <i class="glyphicon glyphicon-copy"></i>
            </button>
          </div>
        </div>
      </td>
      <td></td>
    </tr>
  </table>
</div>

CSS

.center-both {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -webkit-filter: blur(0);
}

.center-both img {
  display: block;
  margin: auto;
}

(JSFiddle link -- https://jsfiddle.net/7rkrfj87/2/)

It looks as expected in Firefox:

enter image description here

But in Chrome input-group doesn't fit the whole td:

enter image description here

Why? What am I doing wrong? How can I force it to fit the whole td instead?

Upvotes: 1

Views: 214

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You can add width: 100% duh!

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    width: 100%;
}

I have checked it in Chrome, Firefox.

Fiddle: https://jsfiddle.net/fLs7t1v8/

Upvotes: 1

Related Questions