I'm trying to format a slide in a bootstrap that has the format of the following fiddle: fiddle
The two divs with "hidden" in them are meant to disappear when on desktop so that when someone is using a tablet or phone they stack on top of each other. This works fine in the fiddle where the height is set to a fixed number
height: 100px;
But I don't want to set the height this way. If I remove this line you can see in the fiddle that "hidden2" drops down in a weird way instead of acting as a spacer for the text content on the bottom. I've also noticed if I remove the img tag the grid works fine.
I'm not sure why it does this and with real content it just looks like there's no spacer and all the text hugs the left side. Any ideas?
Edited: You can have a width of the content so there is space on both sides, and using the bootstrap grid system drop the text content down.
HTML
<div class="whole">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<img src="http://placehold.it/100x100"/>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">text content</div>
</div>>
CSS
div {
height: 100px;
background: red;
border: 1px solid black;
text-align: center;
}
img {
border-radius: 50%;
}
.whole {
margin: 0 10%;
width: 80%;
}
As much as i understood from your question, you're trying to preserve the functionality found on the fiddle link you provided, but also preserving equal heights. I also understand that you do not want to assign the height manually (i.e in your case, hard-coded).
There are two ways of approaching the solution: Javascript or CSS3.
Javascript:
I usually wouldn't solve layout issues with Javascript, but since your scenario has more than one row invloved, the easy way is JavaScript. With the help of jQuery, you can iterate through the div elements, having an initialized variable (example: var bHeight = 0). Check for each element's height; if it's greater, assign it to bHeight.
Your code should something like this:
$(document).ready(function(){
var bHeight = 0;
$("div").each(function(){
if($(this).height() > bHeight)
bHeight = $(this).height();
}); //end of loop
//now, assign height to all
$("div").height(bHeight);
});
This method will allow you to assign the height of your columns dynamically.
CSS3:
A little research online cold introduce you to the CSS3 display: flex, yet it's totally up to you to decide regarding browser support (CSS flex Property), and more details on solving your issue here: (A Complete Guide to Flexbox)
Related
I am learning bootstrap and I tried to use the HERE maps based on this example from HERE
I realized, that to be able to use relative height (e.g. height: 50%) I have to make the css styles like that:
html, body {
height: 100%;
width: 100%;
}
#map {
width:100%;
height: 100%;
margin:0 auto;
}
Now I would like to create two columns with bootstrap, left for itinerary and right for the map view.
<div class="container">
<div class="row">
<div class="col-sm-4">
Here comes the itinerary
</div>
<div class="col-sm-8" id="map">
</div>
</div>
I quickly realized, that I have to use absolut size for the map element (e.g. width: 400px), otherwise the map is not displayed at all (when using height: 100%;) or the columns are stack from the beginning (using width: 100%;)
I suspect, that the reason for this lies in the width/height styling of the parent elements (row, container), but I do not know the right solution.
I also know, that after getting the styling right I need to take care about the automatic adapting of the maps size on window resize, but I would like go get the right styling first.
From earlier reply from HERE support
"try this after the map object initialization:
window.addEventListener('resize', function () {
map.getViewPort().resize();
});
That should solve the problem.
How to redraw Here Map when container resizes?"
For a webpage grid-layout I decided to use Flexbox. Now I wanted to implement some "auto-functionality", so that grid-boxes can later be inserted without the need to add classes or styles in the HTML. One of this features is to make a box allways be 75% as tall as it is wide - even if the box is resized by, for example, browserwindow resize. Off course, if the boxes content extends the 75%-height, it should (and only then should) increase its height to fit the content. I searched for hours to find a suitable solution, but I finally got it working. So I thought at least, until I added content to the box.
The auto aspect-ratio works fine, as long as the box is empty. If I add content, the 75% of the width is allways added to the height it has through extension by its content. I made a jsfiddle to clearly visualize the problem:
JSFiddle wd5s9vq0, visualizing the following Code:
HTML-Code:
<div class="container">
<div class="content-cell"></div>
<div class="content-cell"></div>
</div>
<div class="container">
<div class="content-cell">
This cell has an inreased height because of
it's content. The empty space below the
content is the 75% of the cells width.
</div>
<div class="content-cell"></div>
</div>
CSS:
.container {
display: flex;
width: 400px;
}
.content-cell {
flex: 1 1 0;
margin: 10px;
background-color: #ccc;
}
.content-cell::after {
content: "";
display: block;
padding-top: 75%;
}
If I didn't knew it better, it looks like a floating-problem - but I think the ::before / ::after selector should add the block-element before the element it is used on and not inside it.
Does anyone has an idea on how to fix this problem?
This seems to be a very widespread problem on the internet, and most solutions you find are either about wrapping the content, absolute-positioning the content or a mixture of both. This has numerous and case-dependent downsides. After hours of playing around with the code, I finally found a combination of CSS proporties that work without the need to add any DOM or make the content absolute-positioned. This looks quit basic, and I am wondering why it took me so long and why you can't find it out there on the web.
The HTML:
<div class="mybox aspect-full">
This is text, that would normally extend the box downwards.
It is long, but not so long that it extends the intended aspect-ratio.
</div>
The CSS:
.mybox {
width: 200px;
}
.aspect-full::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
The only downside I could find is that the content of your cell must float. If you use clear on one of your child objects, it is positioned below the expander-block and you are back to the original problem. If you need to clear the floating of divs inside of these aspect-ratio-cells, you might consider to wrap them and keep the wrapper floatable.
I've attached a screenshot with this question. There are three columns and I want to keep the height of all the three columns exactly same. I managed to keep the width same with width css property now i wanted to adjust to height. Can anyone help me out in this regard. Thanks in advance.
I would use the following CSS to achieve this:
.wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
.column {
display: table-cell;
}
With table-layout: fixed you're telling every child elements with display: table-cell to have same width, equally distributed based on wrapper's width, as well equal height.
Demo
In pure CSS you can use CSS3 columns: for a 3-column layout just try with
<div style="columns:3">...</div>
(with both -moz- and -webkit- prefixes)
See https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts for the reference, in particular about the height balancing:
Height Balancing
The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal.
There is actually no right, cross browser way to do this, but rather you have to resort to some hacks.
A method I have used previously is to wrap the three columns inside a container and set a custom background to the hole container. Basically you create an image, having the same width of the website, having the two vertical lines, and you set it as the background of the container.
<div class="wrapper">
<div class="column">....</div>
<div class="column">....</div>
<div class="column">....</div>
</div>
<style> .wrapper { background-image: url(wrapper-bg.png); } </style>
You could use a javascript library like http://www.cssnewbie.com/equalheights-jquery-plugin/#.UVwCaZAW200 to achive this. This method however does not work if, the hight of the columns is dinamically changing in height (e.g. you have a collapsable item in it). Of course you can handle this cases by handling those events and recalculating the hight.
Finally you could use height: 100%. It's not as simple as it seems however! This solution does only work for block elements and the size of the parent has to be known. So, if you know the size of the website in advance you can do something like the following:
<div class="wrapper">
<div class="column">....</div>
<div class="column">....</div>
<div class="column">....</div>
</div>
<style>
.wrapper { height: 1000px; width:900px; }
.column { width:300px; float:left; height: 100%; }
</style>
Hopefully this will become simpler in future....
How is it possible to make an exception on the overflow:hidden; container property to a matched set of child elements?
Here's a sample scene:
<div style = "overflow:hidden;">
<p>item</p>
<p>item</p>
<p class="special">item that needs to show itself outside the parent borders</p>
</div>
I do have a reason why I'm doing this :] I'm building a pretty complex scrolling menu whose elements are expanding out of the menu's borders. The menu obviously clips everything outside its borders since it's scrolling around.
Here's a chunk of code relevant to the issue:
http://jsfiddle.net/Birowsky/fNLbP/15/
Uncomment the marked line in the JavaScript to see the issue below the 'special item'.
You might notice that the scrolling isn't working, it's ok, I think it's fiddle issue.
You can make the special element to be absolutely positioned
.special{
position:absolute;
}
But this will only work when the .special does not define a position (top/left/bottom/right), and also it will not be used if you later want to calculate the height of the parent div..
example : http://jsfiddle.net/gaby/aT3We/
The requirement though is a bit weird, and it might be better to rethink the whole issue..
(what exactly are you trying to achieve with this ?)
I don't think you'll be able to find a way to do this. Even if you do, I'd recommend against using it because it probably won't be future-proof or very cross-browser compatible.
In the case of a menu, you're probably better off putting these items in separate divs. I'd need to see your code in context to recommend a specific way of doing things, but layering your elements kinda like this might work for you:
<div style = "overflow: hidden; width: 200px; height: 100px; margin: 0; padding: 0; background-color: #CCCCCC; z-index: 1;">
<p>item</p>
<p>item</p>
</div>
<div style = "overflow: visible; width: 200px; height: 100px; margin: -30px 0 0 0; padding: 0; z-index: 2;">
<p class="special">item that needs to show itself outside the parent borders</p>
</div>
If that doesn't fit your needs, maybe you could describe the structure of your menus better so that we can understand what you need? Do you have a link to an example, perhaps?
Edit based on new information
After looking at your example link, it looks like what you want to do is clip content horizontally, while still allowing it to overflow vertically. You can do this by using a very high height value, and then setting a negative bottom margin:
<div style="width: 200px; height: 2000px; margin: 0 0 -1960px 0; overflow: hidden;">
<p>Thisisaverylongsentencedesignedtooverflowthewindowverticallysopleasepermitmetotypeitwithoutandspaces</p>
Item 1<br />
Item 2<br />
Item 3<br />
Item 4<br />
</div>
Is this what you want?
I had a problem like this where the aforementioned solutions weren't working. There was a list of items in a container, each of which could be varying size depending on how many where in the list (with a minimum). The container was overflow: hidden; and there was a part of the items in the list that was a drop down and would be cut off.
My solution:
// get dropdown container position, make a modification, and apply to dropdown
function openDropdown(){
var offSet = $('.dropdown.open').parent().offset();
offSet.top = offSet.top + ($('.dropdown.open').parent().height() / 2);
$('.dropdown.open').offset(offSet);
}
// on scroll reassess dropdown position
$(window).on('scroll', window, function(){
if($('.dropdown.open')[0] != undefined){
openDropdown();
}
});
// on click close open dropdowns and open this one
$('body').on('click', '.dropdown', function(){
$('.dropdown.open').removeClass('open');
$(this).addClass('open');
openDropdown();
});
Why would you need to do this? Maybe a better solution can be made.
I don't think that defining overflow: auto; selectively is possible, as overflow is applied to the parent, not it's children, so it's like having color: red and color: blue on the same element, at the same time; they just don't make sense when put together (bad example, but you get the idea).
This question already has answers here:
How can I reorder my divs using only CSS?
(27 answers)
Closed 6 years ago.
Given that the HTML
<div>
<div id="content1"> content 1</div>
<div id="content2"> content 2</div>
<div id="content3"> content 3</div>
</div>
render as
content 1
content 2
content 3
My question:
Is there a way to render it as below by using CSS only without changing the HTML part.
content 1
content 3
content 2
This can be done in browsers that support the CSS3 flexbox concept, particularly the property flexbox-order.
See here
However, support for this is only in current versions of most browsers still.
Edit Time moves on and the flexbox support improves..
This works for me:
http://tanalin.com/en/articles/css-block-order/
Example from this page:
HTML
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
CSS
#example {display: table; width: 100%; }
#block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */
#block-2 {display: table-row-group; } /* Will be displayed in the middle */
#block-3 {display: table-header-group; } /* Will be displayed at the top */
As stated there, this should work in most browsers. Check link for more info.
It might not exactly match what you're after, but take a look at this question:
CSS positioning div above another div when not in that order in the HTML
Basically, you'd have to use Javascript for it to be reliable in any way.
This is one of the classic use-cases for absolute positioning--to change rendering from source order. You need to know the dimensions of the divs to be able to do this reliably however, and if you don't javascript is your only recourse.
I was messing around in Firefox 3 with Firebug, and came up with the following:
<div>
<div id="content_1" style="height: 40px; width: 40px; background-color: rgb(255, 0, 0); margin-bottom: 40px;">1</div>
<div id="content_2" style="width: 40px; height: 40px; background-color: rgb(0, 255, 0); float: left;">2</div>
<div id="content_3" style="width: 40px; height: 40px; background-color: rgb(0, 0, 255); margin-top: -40px;">3</div>
</div>
It's not perfect, since you need to know the heights of each container, and apply that height value to the negative top margin of the last element, and the bottom margin of the first element.
Hope it helps, nd
I got it to work by doing this:
#content2 { position:relative;top:15px; }
#content3 { position:relative; top:-17px; }
but keep in mind that this will not work for you as soon as you have dynamic content. The reason I posted this example is that without knowing more specific things about your content I cannot give a better answer. However this approach ought to point you in the right direction as to using relative positioning.
One word answer: nope. Look into XSLT (XML Stylesheet Language Transforms), which is a language specifically geared towards manipulating XML.
If you know the height of each element then it is a simple case of vertical relative positioning to swap around the orders. If you don't know the heights then you either have to give them heights and allow the divs to get scroll bars if there is any overflow or calculate it all with JavaScript and add the relative positioning on-the-fly.
with jquery you can simply do:
$('#content2').insertAfter($('#content3'));
I don't think there's a way to do it with CSS, except to force fixed positioning of each of the divs and stack them that way.