I have two columns. Desktop:
Mobile:
This is expected behavior, but I want the column on the left "Browse Programs" to show up on top of the left column, not below it. I've tried a few different things, including reversing the order of columns in HTML and using "float-left" (which works, but not a great solution). I've also used col-md-pull and col-md-push but neither is working.
For what it's worth, I'm not using bootstraps 4 and I'd prefer to keep that as is for now.
Place the blocks inside the layout in the order in which they should go on the mobile.
Introduction: Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries.
Change their order. To do this, Bootstrap 3 provides classes of the type .col-md-push-9 and .col-md-pull-3, and Bootstrap 4 provides the order classes.
Demo for Bootstrap 3: https://codepen.io/glebkema/pen/qBONaQd
/* Demo Decorations */
.row-demo > div {
color: white;
font: bold 20px sans-serif;
padding: 9px 15px 30px;
}
.row-demo > div:first-child {
background: #69c;
}
.row-demo > div:last-child {
background: #c69;
}
<div class="container">
<div class="row row-demo">
<div class="col-md-3 col-md-push-9">Top on mobile / Right on desktop</div>
<div class="col-md-9 col-md-pull-3">Bottom on mobile / Left on desktop</div>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
Demo for Bootstrap 4: https://codepen.io/glebkema/pen/GRpZVZq
/* Demo Decorations */
.row-demo > div {
color: white;
font: bold 20px sans-serif;
padding: 9px 15px 30px;
}
.row-demo > div:first-child {
background: #69c;
}
.row-demo > div:last-child {
background: #c69;
}
<div class="container">
<div class="row row-demo">
<div class="col-md-3 order-md-last">Top on mobile / Right on desktop</div>
<div class="col-md-9 order-md-first">Bottom on mobile / Left on desktop</div>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
It's mostly in the title. I am displaying products in divs on my website. On hover, I make them increase in size by applying a margin of -15px to give them a nice hover effect. When I hover over any of them, it is fine except for the right-most ones, as it pushes the products below it away into the Bootstrap row below. Here are images:
Good (hover over a middle one):
Bad (hover over the right-most one):
Here is the code:
Search results page:
<div id="search-results">
<div data-bind="template: { name: 'product-template', foreach: allProducts }"></div>
</div>
Product template:
<script type="text/html" id="product-template">
<div class="col-sm-6 col-lg-2" style="margin-top:20px; padding: 25px;">
<div class="product-item">
<div data-bind="style: { backgroundImage: 'url(\'../../the_vegan_repository/product_images/' + product.imagePath + '\')' }"
style= "height: 160px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
background: center no-repeat;
background-size:cover;
vertical-align:bottom;">
</div>
<div style="height: 110px; padding: 10px; background: #fc4747;">
<h6 class="medium-text" data-bind="text: product.brand" style="text-transform: uppercase; color: white; margin-top:0; margin-bottom:5px;"></h6>
<h6 class="medium-text" data-bind="text: product.name" style="text-transform: uppercase; color: white; margin-bottom:5px;display: inline;"></h6>
</div>
</div>
</div>
</script>
CSS:
div.product-item:hover {
margin: -15px;
}
div.product-item {
border: 5px solid #fc4747;
border-radius: 15px;
height: 240px;
overflow: hidden;
cursor: pointer;
}
How do I stop the Bootstrap grid system from pushing the bottom row into the row lower?
on hover, I make them increase in size by applying a margin of -15px
Use transform: scale(x); instead of margin: -15px; as transforms do not affect the box-model of the element.
CSS Transforms Module Level 1:
Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also means transforms do not affect results of the Element Interface Extensions getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].
If you want to move it up by a certain amount, use transform: translateY(-15px) instead of changing the margin on the div.product-item:hover class. To move it in a context that does not interrupt the rest of the document. Or you can use transform: scale(1.2) to make things bigger.
The problem is that it's actually changing the dimentions of the div when you change the margin which in turn affects others. Check out this link . It gives an example on how to give such zoom effect.
Creating a Zoom Effect on an image on hover using CSS?
I went through couple of links for this issue, but none of the fix worked for me.
I used Padding, but still getting same result.
I used position: relative, still same result and so on..
I have a CSS which looks like below:
.ItemsStyle
{
margin-top: 5px;
margin-bottom: 5px;
width: 720px;
}
and my div looks like below:
<div id="Items" class="ItemsStyle">
<!--Work Here... -->
</div>
and I have a textbox above this div which looks like:
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana"/>
Now, I want 5px margin between my textbox and my div. CSS is working perfectly fine on IE 11 and the margin is just fine.
But, when I run my application on IE 8, the margin is more, something like 30px down the textbox when I need 5px.
I have tried and tested all the methods that have been suggested in other similar posts, but I am getting same result.
I've tried to replicate this on a virtual machine using the following code and was unable to:
<style type="text/css">
.ItemsStyle{
margin-top: 5px;
margin-bottom: 5px;
width: 720px;
background:#f00;
height:200px;
}
</style>
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana"/>
<div id="Items" class="ItemsStyle">
<!--Work Here... -->
</div>
Nevertheless, you could just use margin-bottom on the input rather than margin-top on the div. You should get the results you're looking for:
<style type="text/css">
.ItemsStyle{
margin-bottom: 5px;
width: 720px;
}
</style>
<input id="textBoxName" type="text" style="width: 415px; font-family: Verdana; margin-bottom:5px;"/>
<div id="Items" class="ItemsStyle">
<!--Work Here... -->
</div>
As a general "flow" to a document I try to push everything down (ie margin-bottom, padding-bottom) the page rather than up (ie margin-top, padding-top)
Internet explorer 8 is a huge headache for any developer. Try this code:
.ItemsStyle
{
margin: 5px auto;
width: 720px;
}
I upgraded to the most recent version of Firefox, but this is still happening. It works fine in Chrome. Instead of my horizontal rule appearing near the bottom of the page where it belongs, I have a 1024 pixel line appearing to the right of my web page in firefox.
HTML5:
hr {
height: 2px;
width: 1000px;
border-color: #938FEB;
margin-left: 12px;
margin-right: 12px;
}
footer {
background-color: black;
width: 1024px;
}
<footer>
<p/>
<hr/>
<p style="text-align:center;">Home | E-Mail Form | Calendar |</p>
<br/>
</footer>
I have no clue what's causing this. Thank you
You need to be clearer with what you're trying to achieve, also please post jsfiddles so we have something to work from or indent your code.
hr {
height: 2px;
width: 1000px;
border-color: #938FEB;
margin-left: 12px;
margin-right: 12px;
}
footer {
background-color: black;
width: 1024px;
}
<footer>
<p/><!--(Not valid)-->
<hr/>
<p style="text-align:center;">
Home | E-Mail Form | Calendar |
</p>
<br/>
</footer>
http://jsfiddle.net/25zcvws2/
Rather than setting exact px measurements, I think you'd be better either using percentage units, or additionally using calc, both of which are shown below. This way, you'll make your code responsive as well as more efficient by making the following alterations.
Removed redundant closing p tag
altered width of both footer and hr element (as described above)
added a color to footer to allow text elements to appear
placed text-align property in css
Added a font coloring to display the other text for demo only (i'm presume this has been left out for demo purposes by OP, i've just added one in)
This can be seen below:
hr {
height: 2px;
width: calc(100%-24px);
border-color: #938FEB;
margin-left: 12px;
margin-right: 12px;
}
footer {
background-color: black;
width: 100%;
color:red;
}
footer p{
text-align:center;
}
<footer>
<hr/>
<p>Home | E-Mail Form | Calendar |
</p>
<br/>
</footer>
I'm trying to let an <input type="text"> (henceforth referred to as “textbox”) fill a parent container by settings its width to 100%. This works until I give the textbox a padding. This is then added to the content width and the input field overflows. Notice that in Firefox this only happens when rendering the content as standards compliant. In quirks mode, another box model seems to apply.
Here's a minimal code to reproduce the behaviour in all modern browsers.
#x {
background: salmon;
padding: 1em;
}
#y, input {
background: red;
padding: 0 20px;
width: 100%;
}
<div id="x">
<div id="y">x</div>
<input type="text"/>
</div>
My question: How do I get the textbox to fit the container?
Notice: for the <div id="y">, this is straightforward: simply set width: auto. However, if I try to do this for the textbox, the effect is different and the textbox takes its default row count as width (even if I set display: block for the textbox).
EDIT: David's solution would of course work. However, I do not want to modify the HTML – I do especially not want to add dummy elements with no semantic functionality. This is a typical case of divitis that I want to avoid at all cost. This can only be a last-resort hack.
With CSS3 you can use the box-sizing property on your inputs to standardise their box models.
Something like this would enable you to add padding and have 100% width:
input[type="text"] {
-webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
-moz-box-sizing: border-box; // Firefox, other Gecko
box-sizing: border-box; // Opera/IE 8+
}
Unfortunately this won't work for IE6/7 but the rest are fine (Compatibility List), so if you need to support these browsers your best bet would be Davids solution.
If you'd like to read more check out this brilliant article by Chris Coyier.
Hope this helps!
You can surround the textbox with a <div> and give that <div> padding: 0 20px. Your problem is that the 100% width does not include any padding or margin values; these values are added on top of the 100% width, thus the overflow.
Because of the way the Box-Modell is defined and implemented I don't think there is a css-only solution to this problem. (Apart from what Matthew described: using percentage for the padding as well, e.g. width: 94%; padding: 0 3%;)
You could however build some Javascript-Code to calculate the width dynmically on page-load... hm, and that value would of course also have to be updated every time the browserwindow is resized.
Interesting by-product of some testing I've done: Firefox does set the width of an input field to 100% if additionally to width: 100%; you also set max-width to 100%. This doesn't work in Opera 9.5 or IE 7 though (haven't tested older versions).
How do I get the textbox to fit the container in 2019?
Just use display: flex;
#x {
background: salmon;
padding: 1em;
display: flex;
flex-wrap: wrap;
}
#y, input {
background: red;
padding: 0 20px;
width: 100%;
}
<div id="x">
<div id="y">x</div>
<input type="text"/>
</div>
This is unfortunately not possible with pure CSS; HTML or Javascript modifications are necessary for any non-trivial flexible-but-constrained UI behavior. CSS3 columns will help in this regard somewhat, but not in scenarios like yours.
David's solution is the cleanest. It's not really a case of divitis -- you're not adding a bunch of divs unnecessarily, or giving them classnames like "p" and "h1". It's serving a specific purpose, and the nice thing in this case is that it's also an extensible solution -- e.g. you can then add rounded corners at any time without adding anything further. Accessibility also isn't affected, as they're empty divs.
Fwiw, here's how I implement all of my textboxes:
<div class="textbox" id="username">
<div class="before"></div>
<div class="during">
<input type="text" value="" />
</div>
<div class="after"></div>
</div>
You're then free to use CSS to add rounded corners, add padding like in your case, etc., but you also don't have to -- you're free to hide those side divs altogether and have just a regular input textbox.
Other solutions are to use tables, e.g. Amazon uses tables in order to get flexible-but-constrained layout, or to use Javascript to tweak the sizes and update them on window resizes, e.g. Google Docs, Maps, etc. all do this.
Anyway, my two cents: don't let idealism get in the way of practicality in cases like this. :) David's solution works and hardly clutters up HTML at all (and in fact, using semantic classnames like "before" and "after" is still very clean imo).
This behavior is caused by the different interpretations of the box model. The correct box model states that the width applies only to the content and padding and margin add on to it. So therefore your are getting 100% plus a 20px right and left padding equaling 100%+40px as the total width. The original IE box model, also known as quirks mode, includes padding and margin in the width. So the width of your content would be 100% - 40px in this case. This is why you see two different behaviors. As far as I know there is no solution for this there is however a work around by setting the width to say 98% and the padding to 1% on each side.
#Domenic this does not work. width auto does nothing more then the default behavior of that element because the initial value of width is auto ( see page 164, Cascading Style Sheets Level 2 Revision 1 Specification). Assigning a display of type block does not work either, this simply tell the browser to use a block box when displaying the element and does not assign a default behavior of taking as much space as possible like a div does ( see page 121, Cascading Style Sheets Level 2 Revision 1 Specification). That behavior is handled by the visual user agent not CSS or HTML definition.
i believe you can counter the overflow with a negative margin. ie
margin: -1em;
The default padding and border will prevent your textbox from truly being 100%, so first you have to set them to 0:
input {
background: red;
padding: 0;
width: 100%;
border: 0; //use 0 instead of "none" for ie7
}
Then, put your border and any padding or margin you want in a div around the textbox:
.text-box {
padding: 0 20px;
border: solid 1px #000000;
}
<body>
<div id="x">
<div id="y">x</div>
<div class="text-box"><input type="text"/></div>
</div>
</body>
This should allow your textbox to be expandable and the exact size you want without javascript.
To make the input fill up width of parent, there're 3 attributes to set: width: 100%, margin-left: 0, margin-right: 0.
I just guess zero margin setting can help, and I had tried it, however I don't know why margin (left and right; of course top and bottom margins don't affect here) should to be zero to make it works. :-)
input {
width: 100%;
margin-left: 0;
margin-right: 0;
}
Note: You may need to set box-sizing to border-box to make sure the padding don't affect the result.
I use to solve this with CSS-only tables. A little bit long example but
important for all who wants to make entry screens for large amount of fields
for databases...
// GH
// NO JAVA !!! ;-)
html {
height: 100%;
}
body {
position: fixed;
margin: 0px;
padding: 0px;
border: 2px solid #FF0000;
width: calc(100% - 4px);
/* Demonstrate how form can fill body */
min-height: calc(100% - 120px);
margin-top: 60px;
margin-bottom: 60px;
}
/* Example how to make a data entry form */
.rx-form {
display: table;
table-layout: fixed;
border: 1px solid #0000FF;
width: 100%;
border-collapse: separate;
border-spacing: 5px;
}
.rx-caption {
display: table-caption;
border: 1px solid #000000;
text-align: center;
padding: 10px;
margin: 10px;
width: calc(100% - 40px);
font-size: 2.5em;
}
.rx-row {
display: table-row;
/* To make frame on rows. Rows have no border... ? */
box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
}
.rx-cell {
display: table-cell;
margin: 0px;
padding: 4px;
border: 1px solid #FF0000;
}
.rx-cell label {
float: left;
border: 1px solid #00FF00;
width: 110px;
padding: 4px;
font-size: 1em;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rx-cell label:after {
content: " :";
}
.rx-cell input[type='text'] {
float: right;
border: 1px solid #FF00FF;
padding: 4px;
background-color: #eee;
border-radius: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
/* Fill the cell - but subtract the label width - and litte more... */
width: calc(100% - 130px);
overflow: hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
input[type='submit'] {
font-size: 1.3em;
}
<html>
<meta charset="UTF-8">
<body>
<!--
G Hasse, gorhas at raditex dot nu
This example have a lot of frames so we
can experiment with padding and margins.
-->
<form>
<div class='rx-form'>
<div class='rx-caption'>
Caption
</div>
<!-- First row of entry -->
<div class='rx-row'>
<div class='rx-cell'>
<label for="input11">Label 1-1</label>
<input type="text" name="input11" id="input11" value="Some latin text here. And if it is very long it will get ellipsis" />
</div>
<div class='rx-cell'>
<label for="input12">Label 1-2</label>
<input type="text" name="input12" id="input12" value="The content of input 2" />
</div>
<div class='rx-cell'>
<label for="input13">Label 1-3</label>
<input type="text" name="input13" id="input13" value="Content 3" />
</div>
<div class='rx-cell'>
<label for="input14">Label 1-4</label>
<input type="text" name="input14" id="input14" value="Content 4" />
</div>
</div>
<!-- Next row of entry -->
<div class='rx-row'>
<div class='rx-cell'>
<label for="input21">Label 2-1</label>
<input type="text" name="input21" id="input21" value="Content 2-1">
</div>
<div class='rx-cell'>
<label for="input22">Label 2-2</label>
<input type="text" name="input22" id="input22" value="Content 2-2">
</div>
<div class='rx-cell'>
<label for="input23">Label 2-3</label>
<input type="text" name="input23" id="input23" value="Content 2-3">
</div>
</div>
<!-- Next row of entry -->
<div class='rx-row'>
<div class='rx-cell'>
<label for="input21">Label 2-1</label>
<input type="text" name="input21" id="input21" value="Content 2-1">
</div>
<div class='rx-cell'>
<label for="input22">Label 2-2</label>
<input type="text" name="input22" id="input22" value="Content 2-2">
</div>
<div class='rx-cell'>
<label for="input23">Label 2-3</label>
<input type="text" name="input23" id="input23" value="Content 2-3">
</div>
</div>
<!-- And some text in cells -->
<div class='rx-row'>
<div class='rx-cell'>
<div>Cell content</div>
</div>
<div class='rx-cell'>
<span>Cell content</span>
</div>
</div>
<!-- And we place the submit buttons in a cell -->
<div class='rx-row'>
<div class='rx-cell'>
<input type="submit" name="submit1" value="submit1" />
<input type="submit" name="submit2" value="submit2" />
</div>
</div>
<!-- End of form -->
</div>
</form>
</body>
</html>