Marek Zakrzewski Marek Zakrzewski - 2 months ago 9
HTML Question

Making input inside div always scale in one line

I would like to scale my input fields better.

When browser is maximized they look like this:

enter image description here

On smaller screens they look like this, the input fields goes to the bottom while it should be on the right:

enter image description here

My code:



.table-body {
width: 100%;
max-width: 952px;
border-spacing: 0px;
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
}
.table-body div {
padding-top: 3px;
padding-bottom: 3px;
}
.table-field1 {
text-align: center;
float: left;
padding-left: 11px;
padding-right: 11px;
}
.table-field2 {
font-size: 15px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #8f268d;
float: left;
margin-top: -2px;
}
.table-field3 {
color: #323232;
display: inline;
padding-left: 10px;
}
.table-field3 input {
border: 1px solid #e4e4e4;
width: 95%;
max-width: 844px;
color: #333333;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 15px;
padding-top: 3px;
border-radius: 7px;
padding-left: 4px;
behavior: url(/panel/css/pie/pie.php);
}

<div class="table-body">
<div class="table-header">
<div class="left">&nbsp;
<input type="checkbox" name="usun_wszystkie" id="checkbox_all" class="css-checkbox" onchange="checkAll('checkbox[')">
<label for="checkbox_all" class="css-label">&nbsp;Zaznacz wszystkie</label>
</div>
</div>
<div class="tabela_0">
<div class="table-field1">
<input type="checkbox" name="usun[438]" id="checkbox[438]" class="css-checkbox">
<label for="checkbox[438]" class="css-label"></label>
<input type="hidden" name="tag[438]" value="test.com">
</div>
<div class="table-field2">
<div>USUŃ</div>
</div>
<div class="table-field3">
<input type="text" name="entry" value="test.com">
</div>
</div>
</div>

<div class="table-end"></div>




Answer

If you can use flexbox to support your project, then try this:

.table-body {
  width: 100%;
  max-width: 952px;
  border-spacing: 0px;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
.tabela_0 {
  display:flex;
}
.table-body div {
  padding-top: 3px;
  padding-bottom: 3px;
}
.table-field1 {
  text-align: center;
  padding-left: 11px;
  padding-right: 11px;
}
.table-field2 {
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #8f268d;
  margin-top: -2px;
}
.table-field3 {
  color: #323232;
  padding-left: 10px;
  flex-grow:1;
}
.table-field3 input {
  border: 1px solid #e4e4e4;
  width: 95%;
  max-width: 844px;
  color: #333333;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 15px;
  padding-top: 3px;
  border-radius: 7px;
  padding-left: 4px;
  behavior: url(/panel/css/pie/pie.php);
}
<div class="table-body">
  <div class="table-header">
    <div class="left">&nbsp;
      <input type="checkbox" name="usun_wszystkie" id="checkbox_all" class="css-checkbox" onchange="checkAll('checkbox[')">
      <label for="checkbox_all" class="css-label">&nbsp;Zaznacz wszystkie</label>
    </div>
  </div>
  <div class="tabela_0">
    <div class="table-field1">
      <input type="checkbox" name="usun[438]" id="checkbox[438]" class="css-checkbox">
      <label for="checkbox[438]" class="css-label"></label>
      <input type="hidden" name="tag[438]" value="test.com">
    </div>
    <div class="table-field2">
      <div>USUŃ</div>
    </div>
    <div class="table-field3">
      <input type="text" name="entry" value="test.com">
    </div>
  </div>
</div>

<div class="table-end"></div>