Aligning input box inside panel body with the use of css grid - css

Question

I have created a login using css grid layout. I want to implement a form input box inside the panel body. However, the input box not respecting inside the panel body. The input box was overflow outside the panel body. For some reason, the code is working with regular css. I just want to implement css grid and i'm not sure about to go about this.
Thanks for any help.
Here is the fiddle.
<pre>
https://jsfiddle.net/80fc325h/

Answer 1

Just use *{box-sizing: border-box} It will be updated. Hope it is helpful to you. Kindly check the snippet. As CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.
body {
margin: 0;
font-size: 13px;
color: #222;
background-color: #f5f5f5;
}
* {
box-sizing:border-box;
}
.text-right{
text-align: right;
}
/*--------------------------------------------------------------
style:
--------------------------------------------------------------*/
.login-wrapper{
display:grid;
grid-template-columns:1fr;
width: 50%;
margin: 0 auto;
}
.content{
display:grid;
grid-template-columns:1fr;
border:1px solid red;
}
.panel {
background-color: #fff;
border: 1px solid #dbd9d9;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
padding: 15px;
}
.panel-heading {
text-align: center;
padding: 5px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
color: inherit;
}
.panel-footer {
padding: 10px 15px;
background-color: #fff;
border-top: 1px solid #dbd9d9;
}
/*--------------------------------------------------------------
Form:
--------------------------------------------------------------*/
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-control:focus {
outline: 0;
}
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}
.form-control::-ms-expand {
background-color: transparent;
border: 0;
}
.input-sm {
height: 29px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.has-feedback {
position: relative;
}
.has-feedback .form-control {
padding-right: 42.5px;
}
.form-control-feedback {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: none;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
color: #f44336;
}
.has-error .form-control {
border-color: #f44336;
}
.has-error .form-control:focus {
border-color: #f44336;
}
.has-error .input-group-addon {
color: #f44336;
background-color: #f2dede;
border-color: #f44336;
}
.has-error .form-control-feedback {
color: #f44336;
}
.has-feedback label ~ .form-control-feedback {
top: 25px;
}
.has-feedback label.sr-only ~ .form-control-feedback {
top: 0;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
.input-group .form-control:focus {
z-index: 3;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon {
padding: 6px 12px;
font-weight: normal;
line-height: 1;
color: #555;
text-align: center;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
.input-group-addon.input-sm {
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
}
.input-group-addon.input-lg {
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
margin-top: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group-addon:last-child {
border-left: 0;
}
label {
display: inline-block;
max-width: 100%;
font-size: 13px;
margin-bottom: 5px;
}
input:focus{
outline:none!important;
}
.form-control-feedback i{
margin-top: -5px;
}
.form-group{
margin-bottom: 10px;
}
.footer-section{
background-color: #e9ecef;
display: grid;
border-top: 1px solid #d8dadd;
grid-template-columns:1fr;
font-size: 11px;
text-align: center;
}
/* ==========================================================================
Button Scripts
========================================================================== */
.btn{
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
padding: 3px 10px;
line-height: 1.5384616;
border-radius: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.btn:focus{
outline: none;
}
.btndrk-orange{
background-color: #ec8b02;
color:#fff;
}
<div class="login-wrapper">
<div class="content">
<div class="panel">
<div class="panel-body">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="icon-user-tie"></i></span>
<input type="text" class="form-control" name="username" id="username" autocomplete="off" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="icon-lock2"></i></span>
<input type="password" class="form-control" name="password" id="password" autocomplete="off" placeholder="Password">
</div>
</div>
</div>
<div class="panel-footer text-right">
<button type="button" class="btn">LOGIN</button>
</div>
</div>
</div>
</div>

Answer 2

Use display flex not display table on your input group.