I'm working on a lightbox where I'd like to do as much as possible in CSS.
I'm using viewport units to make the whole thing responsive.
Unfortunately IE (I've tested it in version 11) doesn't resize dynamically loaded images properly.
Compare the following jsfiddle's and resize your browser to see what I mean.
Static image
<div class="lightbox lightbox--active">
<div class="lightbox__inner">
<div class="lightbox__content" data-lightbox-content="">
<img src="path/to/image">
</div>
</div>
</div>
Dynamically loaded image
<div class="lightbox lightbox--active">
<div class="lightbox__inner">
<div class="lightbox__content" data-lightbox-content="">
<!-- Image loaded with JS -->
</div>
</div>
</div>
Any thoughts on how to work around this?
IE10+ has been weird with the width and height attributes (which seem to be added automatically in this case), so we'll override them:
.lightbox .lightbox__content img {
...
width: auto;
height: auto;
}
Demo
I have a bootstrap column defined as follows:
<div class="col-md-4 limit">
<img id="myImage" src="" class="img-responsive"/>
</div>
<style>
.limit {
max-height:500px;
overflow:hidden;
}
</style>
The source of the image is obtained programatically so I do not know in advance the height or width of my image. What I want to do is that the image in this column whose height is limited appear completely inside of the div. With the img-responsive class I have achieved the image to horizontally fill my column, however, as this class also sets the height to auto, most of the time this causes the image to overflow and be hidden. I do not want my image to overflow in any way.
So, lets say that my column measures:
Width: 300px (defined by bootstrap)
Height: 500px (.limit)
And my image dimensions are:
Width: 600px
Height: 1500px
The current configuration makes the image shrink to 300px x 750px. As its container is set to only 500px, this causes the last 250px to be lost inside the overflow. I would like to image instead to be resized to 200px x 500px in order for it to completely into the containing div
How can I do this?
Thanks!
Try this:
<div class="row">
<div class="col-md-4">
<div class="limit">
<img src="images/yourimage.png" alt="" />
</div>
</div>
</div>
<style type="text/css">
.limit{
width: 300px;
height: 500px;
max-height: 500px;
overflow: hidden;
}
.limit img{
width: 100%;
height: 100%;
}
</style>
You could try to inherit the height or the width of the parent div (as both would not contain proportions). This could only work if you have the same type of img (all portret or landscape). Other solution is to calculate the dimensions based on the max width/height of the img in your program language. Pick the one that matches the condition (both var <= max value). Then echo the solution in your html.
#Luis Becerril I normally used this plugin with those type of issues. Please try this. If may suit to your requirement. jQuery Image Center
Simplest way in Bootstrap 4
<div class="row">
<div class="col-md-4">
<img src="images/yourimage.png" alt="" class="w-100" />
</div>
</div>
I am trying to limit the horizontal size of whatever I load in a blockquote (I do not control that content in the blockquote so I know it's going to screw up my layout). Here is a reduced testcase of what the page layout looks like:
<html>
<body>
<div style="width: 800px; background-color: #ff0000;">
<div style="display: table;">
<div style="display: table-row;">
<blockquote style="overflow:hidden;">
<div style="width: 1000px; height: 400px;background-color: #00ff00;"></div>
</blockquote>
</div>
</div>
</div>
</body>
</html>
The size of the blockquote is implicitely set through a width on one of its parent elements and a table container is used to layout the blockquote itself.
Now, if you try to copy/paste the above html into a test.html file, you will see the entire inner div displayed as blue, beyond the boundaries of the red background. I would like to make sure it gets cliped at the background boundaries.
The question is then: is there a way to do this without changing the structure of the html layout and without having to set again an explicit width on the blockquote itself (I cannot do the latter because I do not know the real size of the blockquote in the real layout because there are other elements within the outer div that take an unknown amount of horizontal space) ?
EDIT
Earlier, I naively tried the following. I added an extra column in the table to illustrate the fact that I really do not know how much space the other elements in the table will suck up.
<html>
<body>
<div style="width: 800px; background-color: #ff0000;">
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
<blockquote style="overflow:hidden;" id="inner">
<div style="width: 1000px; height: 400px;background-color: #00ff00;"></div>
</blockquote>
</div>
<div style="display: table-cell;">
<div style="width:100px; background-color:#0000ff; height: 300px;"></div>
</div>
</div>
</div>
</div>
<script>
var width = document.getElementById('inner').parentNode.offsetWidth;
console.log(width);
</script>
</body>
</html>
In order for overflow: hidden; to work you have to set the dimensions of the element explicitly. So, yes, sorry, you have to specify the width on blockquote.
If you are allowed to, you can use javascript to determine the width of the parent element which has a set width and then set the width of the blockquote accordingly.
Here's an example of how that might work, using your current markup:
var root = document.getElementsByTagName('div')[0],
block = document.getElementsByTagName('blockquote'),
i;
for (i = 0; i < block.length; i += 1) {
block[i].style.maxWidth = root.style.width;
}
Demo
However, this would be vastly improved if you were to give the div that's got the set width a class name or id. Check out this fiddle to see how that would work.
I want to create alternating 100% colored blocks. An "ideal" situation is illustrated as an attachment, as well as the current situation.
Desired setup:
Currently:
My first idea was to create an div class, give it a background color, and give it 100% width.
.block {
width: 100%;
background: #fff;
}
However, you can see that this obviously doesn't work. It's confined to a container area. I tried to close the container and that didn't work either.
The container class is intentionally not 100% width. It is different fixed widths depending on the width of the viewport.
If you want to work with the full width of the screen, use .container-fluid:
Bootstrap 3:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
</body>
Bootstrap 2:
<body>
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span8"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="span12"></div>
</div>
</body>
QUICK ANSWER
Use multiple NOT NESTED .containers
Wrap those .containers you want to have a full-width background in a div
Add a CSS background to the wrapping div
Fiddles: Simple: https://jsfiddle.net/vLhc35k4/ , Container borders: https://jsfiddle.net/vLhc35k4/1/
HTML:
<div class="container">
<h2>Section 1</h2>
</div>
<div class="specialBackground">
<div class="container">
<h2>Section 2</h2>
</div>
</div>
CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }
FURTHER INFO
DON'T USE NESTED CONTAINERS
Many people will (wrongly) suggest, that you should use nested containers. Well, you should NOT.
They are not ment to be nested. (See to "Containers" section in the docs)
HOW IT WORKS
div is a block element, which by default spans to the full width of a document body - there is the full-width feature. It also has a height of it's content (if you don't specify otherwise).
The bootstrap containers are not required to be direct children of a body, they are just containers with some padding and possibly some screen-width-variable fixed widths.
If a basic grid .container has some fixed width it is also auto-centered horizontally.
So there is no difference whether you put it as a:
Direct child of a body
Direct child of a basic div that is a direct child of a body.
By "basic" div I mean div that does not have a CSS altering his border, padding, dimensions, position or content size. Really just a HTML element with display: block; CSS and possibly background.
But of course setting vertical-like CSS (height, padding-top, ...) should not break the bootstrap grid :-)
Bootstrap itself is using the same approach
...All over it's own website and in it's "JUMBOTRON" example:
http://getbootstrap.com/examples/jumbotron/
This is how you can achieve your desired setup with Bootstrap 3:
<div class="container-fluid">
<div class="row"> <!-- Give this div your desired background color -->
<div class="container">
<div class="row">
<div class="col-md-12">
... your content here ...
</div>
</div>
</div>
</div>
</div>
The container-fluid part makes sure that you can change the background over the full width. The container part makes sure that your content is still wrapped in a fixed width.
This approach works, but personally I don't like all the nesting. However, I haven't found a better solution so far.
There is a workaround using vw. Is useful when you can't create a new fluid container.
This, inside a classic 'container' div will be full size.
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
After this there is the sidebar problem (thanks to #Typhlosaurus), solved with this js function, calling it on document load and resize:
function full_row_resize(){
var body_width = $('body').width();
$('.row-full').css('width', (body_width));
$('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
return false;
}
In bootstrap 4, you can use 'w-100' class (w as width, and 100 as 100%)
You can find documentation here:
https://getbootstrap.com/docs/4.0/utilities/sizing/
If you can't change the HTML layout:
.full-width {
width: 100vw;
margin-left: -50vw;
left: 50%;
}
<div class="container">
<div class="row">
<div class="col-xs-12">a</div>
<div class="col-xs-12">b</div>
<div class="col-xs-12 full-width">c</div>
<div class="col-xs-12">d</div>
</div>
</div>
Demo: http://www.bootply.com/tVkNyWJxA6
Sometimes it's not possible to close the content container.
The solution we are using is a bit different but prevent a overflow because of the
firefox scrollbar size!
.full-width {
margin-top: 15px;
margin-bottom: 15px;
position: relative;
width: calc(100vw - 10px);
margin-left: calc(-50vw + 5px);
left: 50%;
}
Here is a example: https://jsfiddle.net/RubbelDeKatz/wvt9253q
Instead of
style="width:100%"
try using
class="col-xs-12"
it will save you 1 character :)
Sorry, should have asked for your css as well. As is, basically what you need to look at is giving your container div the style .container { width: 100%; } in your css and then the enclosed divs will inherit this as long as you don't give them their own width. You were also missing a few closing tags, and the </center> closes a <center> without it ever being open, at least in this section of code. I wasn't sure if you wanted the image in the same div that contains your content or separate, so I created two examples. I changed the width of the img to 100px simply because jsfiddle offers a small viewing area. Let me know if it's not what you're looking for.
content and image separate: http://jsfiddle.net/QvqKS/2/
content and image in same div (img floated left): http://jsfiddle.net/QvqKS/3/
I would use two separate 'container' div as below:
<div class="container">
/* normal*/
</div>
<div class="container-fluid">
/*full width container*/
</div>
Bare in mind that container-fluid does not follow your breakpoints and it is a full width container.
I'd wonder why someone would try to "override" the container width, since its purpose is to keep its content with some padding, but I had a similar situation (that's why I wanted to share my solution, even though there're answers).
In my situation, I wanted to have all content (of all pages) rendered inside a container, so this was the piece of code from my _Layout.cshtml:
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
<div class="container">
#RenderBody()
</div>
</section>
</div>
In my Home Index page, I had a background header image I'd like to fill the whole screen width, so the solution was to make the Index.cshtml like this:
#section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
<div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}
<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
<div class="container">
<div class="row">
MORE CONTENT
</div>
</div>
</div>
I think this is better than trying to make workarounds, since sections are made with the purpose of allowing (or forcing) views to dynamically replace some content in the layout.
Though people have mentioned that you will need to use .container-fluid in this case but you will also have to remove the padding from bootstrap.
The following answer is not exactly optimal by any measure, but I needed something that maintains its position within the container whilst it stretches the inner div fully.
https://jsfiddle.net/fah5axm5/
$(function() {
$(window).on('load resize', ppaFullWidth);
function ppaFullWidth() {
var $elements = $('[data-ppa-full-width="true"]');
$.each( $elements, function( key, item ) {
var $el = $(this);
var $container = $el.closest('.container');
var margin = parseInt($container.css('margin-left'), 10);
var padding = parseInt($container.css('padding-left'), 10)
var offset = margin + padding;
$el.css({
position: "relative",
left: -offset,
"box-sizing": "border-box",
width: $(window).width(),
"padding-left": offset + "px",
"padding-right": offset + "px"
});
});
}
});
This must work (Mobile phone as well as Desktop screen):
class: alignfull and class: img-fluid will do the magic.
<div class="alignfull">
<img class="img-fluid" style="background-size: cover;
background-position: center ;
background-repeat: no-repeat;
height: auto;
min-width: 100%;
width: -moz-available; "
src="{{ $image->image }}" alt="An image">
</div>
I have a page which generates coupons. Each coupon is a div with a height varying depending on the content. I want to print as many coupons on each page as possible, but I do not want the coupons to be split out over several pages. The CSS property page-break-inside does exactly what I need. However, I need this to work for Firefox and/or Chrome. And this is not supported. Two years and one year ago the same question was asked, and there was no good alternative for this. We are a lot of CSS3/HTML5/overall browser development further... is there an alternative to get this working?
Example is here:
http://jsfiddle.net/e3U66/2/
Assume that a page, when printed, measures 1000px. I want the second DIV to appear on the second page, because otherwise it is split out over the first and second. This code works in Opera, but not in FF or Chrome.
Why not, after the page is loaded with your content, use js to scroll through the content and add up the height of the divs.
Once you've reached 1000px or whatever you've determined to be the page height, then insert a blank div styled with page-break-before before the latest div.
Below a solution made with the help of Prototype (1.7) library
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
//page height in px
//thisPageTotal is the total of pixels on the current page, in px
pageHeight = 1000;
thisPageTotal = 0;
Event.observe(window, 'load', function(){
$$('.coupon').each(function(el){
var layout = el.getLayout();
thisPageTotal += parseInt(layout.get('margin-box-height'));
if(thisPageTotal > pageHeight) {
thisPageTotal = parseInt(layout.get('margin-box-height'));
var pageBreak = new Element('div', {
'class': 'pagebreak'
});
el.insert({before: pageBreak});
}
//this shows the current amount of px on the current page
el.update(thisPageTotal);
});
});
</script>
<style type="text/css">
div {
border: 1px solid #000;
margin: 30px;
}
.pagebreak {
page-break-after: always;
}
</style>
</head>
<body>
<div id="div_1" class="coupon" style="height: 500px"></div>
<div id="div_2" class="coupon" style="height: 200px"></div>
<div id="div_3" class="coupon" style="height: 500px"></div>
<div id="div_4" class="coupon" style="height: 200px"></div>
<div id="div_5" class="coupon" style="height: 200px"></div>
<div id="div_6" class="coupon" style="height: 400px"></div>
<div id="div_7" class="coupon" style="height: 300px"></div>
<div id="div_8" class="coupon" style="height: 400px"></div>
<div id="div_9" class="coupon" style="height: 500px"></div>
<div id="div_10" class="coupon" style="height: 200px"></div>
</body>
</html>
Maybe it helps
Honestly I would just advise creating images of the actually coupons or generating a pdf. I'm assuming you are probably generating barcodes for all the coupons already, so generating the actually images shouldn't be to hard using php (or whatever the code choice might be).
Here is some info on php image creation, but SO would probably be a better source for examples.
http://php.net/manual/en/function.imagecreate.php
Then you could just list the images.
<img src>
<img src>
<img src>
...
There's no sense it recreating the wheel.
set float left for these div and set width as 100%.
i wont tryed it ., it's may work.