CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
Jemai
Jemai

Reputation: 2849

How to prevent an input, that has a width of 100%, from overflowing?

I have a problem.

I have a set of divs that displays like a table, it has a row and 3 columns.

These divs are responsive when it reaches the max width of 768px, the 1st column will be hidden and the 2nd and 3rd column will remain and will have an input text. That input text will have a label and that label will display as an inline text.

My problem is the input has a css of 100% but the input's text over-extends outside the table.

Here's the code

/* DivTable.com */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

 
@media (max-width: 768px) {
      .hide1 {
        display:none;
      }
      
      .force-display {
        display:block;
      }
      
      .forcew {
        white-space:nowrap;
      }
  }
<div class="divTable" style="width: 100%;border: 1px solid #000;" >
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell hide1"><p class="f-bold override" style="">First Name:</p></div>
  <div class="divTableCell force-display">  
    <div class="forcew">
          <label>First Name:</label>
         <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
    </div>

  </div>
  <div class="divTableCell force-display">  
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
    </div>
</div>
</div>
</div>

Here's the fiddle: https://jsfiddle.net/bt6hrc4h/

Upvotes: 1

Views: 3577

Answers (3)

grinmax
grinmax

Reputation: 1855

Add this values

.forcew {
    display: flex;
    align-items: center;
}

Upvotes: 0

kukkuz
kukkuz

Reputation: 42372

If flexbox is an option, a simple fix would be to let your forcew to be a flexbox - add this to your styles:

.forcew {
  display: flex;
  align-items: center;
}

See demo below:

/* DivTable.com */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.divTable {
  display: table;
  width: 100%;
}
.divTableRow {
  display: table-row;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}
.form-control {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.forcew {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .hide1 {
    display: none;
  }
  .force-display {
    display: block;
  }
  .forcew {
    white-space: nowrap;
  }
}
<div class="divTable" style="width: 100%;border: 1px solid #000;">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell hide1">
        <p class="f-bold override" style="">First Name:</p>
      </div>
      <div class="divTableCell force-display">
        <div class="forcew">
          <label>First Name:</label>
          <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
        </div>

      </div>
      <div class="divTableCell force-display">
        <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Mukesh Ram
Mukesh Ram

Reputation: 6338

You should calculate the width of first input text using calc() function;

.forcew input {
    width: calc(100% - 80px);
} 


/* DivTable.com */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.forcew input {
    width: calc(100% - 80px);
}

 
@media (max-width: 768px) {
      .hide1 {
        display:none;
      }
      
      .force-display {
        display:block;
      }
      
      .forcew {
        white-space:nowrap;
      }
  }
<div class="divTable" style="width: 100%;border: 1px solid #000;" >
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell hide1"><p class="f-bold override" style="">First Name:</p></div>
  <div class="divTableCell force-display">  
    <div class="forcew">
          <label>First Name:</label>
         <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
    </div>

  </div>
  <div class="divTableCell force-display">  
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First" value="$!CQS0013.firstName" required/>
    </div>
</div>
</div>
</div>

Upvotes: 0

Related Questions