I am facing an issue with implementing a form input box inside a panel body using CSS grid layout. The input box seems to overflow outside the panel body, which is not the desired behavior. Strangely, the code works fine with regular CSS, but I prefer using CSS grid. Any guidance on how to tackle this problem would be greatly appreciated.
Thank you for any assistance provided.
For reference, here is the fiddle:
<pre>
Simply add *{box-sizing: border-box} and your layout will adjust accordingly. Make sure to review the snippet provided. The CSS3 box-sizing property is useful for including 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;
}
...
<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>Instead of utilizing display table for your input group, try using display flex.
This problem seems to keep coming back for me. I can't figure out what's causing it. Here are two images showing the issue: On desktops: https://i.sstatic.net/AAGbb.png On mobile devices: https://i.sstatic.net/Zk4pc.jpg As you can see, the ...
When resizing vertically on mobile, my date-time-container is overlapping the upper elements welcome and weather. Despite setting them as block level elements, adding clear: both, and not using absolute positioning or floats, the overlap issue persists. An ...
Hi, I'm having trouble with styling and I can't seem to figure out how to resolve it. The style pointer-events: none doesn't seem to be working for me. Here is an example of my code: The style snippet: .noclick { cursor: default; ...
I'm looking for some guidance on JavaScript and CSS. Is there a way to create a popup box where users can input a color (any main primary color recognized by CSS) and then have the background color of the page change accordingly in an external styles ...
Check out the image link here I'm looking to position the share and read more buttons at the bottom of the div, similar to "Sample Post 14". The trick seems to involve using excerpt or dummy text. Is there a way to achieve this styling with the skele ...
I have successfully adjusted the images in the gallery to display one per row for horizontal orientation and two per row for vertical orientation. Now, I am facing a challenge in making the images scalable so they can resize dynamically with the window. A ...
Check out this example The HTML: <div class="container"> <img src="http://placehold.it/500x500" alt="500x500" /> </div> <div class="container"> <img src="http://placehold.it/100x500" alt="100x500" /> </div> < ...
Is it feasible to achieve this using Bootstrap v3? After conducting extensive research, it appears that a custom solution may be necessary. In essence, I am working with a navbar positioned at the bottom of the content area. Upon page load, if the navbar& ...
Is there a way to neatly organize the divs on a page, depending on available space? I want them to align horizontally if there is enough room before moving to the next line. The tab-content parent div may contain several divs. Any suggestions on how this c ...
Looking to revamp the layout of my angularJS website, specifically one page. Currently, information is displayed in a table format but I would like to switch it up by adding a left sidebar featuring a list of names (tiles). When a user clicks on a name, th ...
I am facing an issue with a fixed div on my webpage. When the height of the div exceeds the viewport height of the browser, I am unable to scroll within the div itself as the background scrolls instead (due to the position being fixed). For example: < ...
The span's background color is not changing correctly when the radio button is changed. Why is this happening and how can it be fixed? div { margin: 0 0 0.75em 0; } .formgroup input[type="radio"] { display: none; } input[type="radio"], label { ...
Hopefully, my description of a "nested div" was accurate. My current situation involves an image within a div structured like this: content -> content-inner -> column_left I'm struggling to start the image at 0 px (the extreme left side of th ...
At the moment, I am facing an issue with setting the width of a checklist from Dash Core Components to match the width of the dropdown menu it is placed in. Here's a glimpse of how it appears currently: https://i.sstatic.net/mjzAd.png Below is the P ...
I recently started working with Groovy and Grails, designing my own personal website. I'm looking to set an image (located in the asset folder) as the background for my index.gsp page. How can I achieve this? ...
Currently, I have a video clip set to play when the timer reaches a certain point. My goal is for the video to automatically enter full-screen mode when it starts playing and return to its original position when it stops, as the timer will continue ticking ...
I'm having some trouble applying animations to an angular js button using traditional CSS and JS methods. Specifically, I'm attempting to include an opacity animation on the button. Can someone offer assistance? HTML <span id="sign_btn"> ...
I am struggling with my random number generator that should generate numbers between 5 and 15. I am trying to change the position of the 'chest' div based on the number generated by the computer, but for some reason it is not working as expected. ...
I am looking to center the text in a header and apply color to it using Bootstrap. Unfortunately, there is no direct option for font-color or text-color in Bootstrap. Below is my HTML and CSS code: #header { width: 800px; height: 50px; color :whi ...
I am working with a list that is generated using ngRepeat, which looks like this <ul class="list-group"> <li class="list-group-item" ng-repeat="data in tree | filter:key"> {{data.name}} </li> </ul> My goal is to ma ...