I've got a problem as in this Question
CSS Two Columns of Lists - responsive merge into one column
The problem with this solution is when the items have different heights. Put in a <br> and you see what i mean. I am looking for a solution where the side by side cells have automatically the same height.
I created a fiddle that shows how the result should look like.
http://jsfiddle.net/w4n9da10/
Is it somehow possible to create this without using JavaScript or doubling the markup, like i did in my example?
Thanks in advance
Utilizing a responsive framework such as Bootstrap will make your life a whole lot easier when it comes to doing something like this. However, I understand, sometimes it is not permitted by the client's environment or other restrictions. But, the concept remains. So all you have to do is use the browser inspector to see which classes are being used and their properties and use those only. But again, if you can use bootstrap, I recommend it.
I am attaching a demo HERE
And here is the code
<div class="wrapper">
<div class="col-md-6 col-xs-12">
<div id="1" class="col-md-12">1</div>
<div id="2" class="col-md-12">2</div>
<div id="2" class="col-md-12">3</div>
</div>
<div class="col-md-6 col-xs-12">
<div id="3" class="col-md-12">4</div>
<div id="4" class="col-md-12">5</div>
<div id="2" class="col-md-12">6</div>
</div>
</div>
Good luck
Related
I'm working with Bootstrap 4 beta at the moment and everything works fine, but I have one problem... the display classes like d-none, d-inline, d-inline-block... don't have any effect. Everything else works just fine and I don't understand why they don't work.
for example:
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="bg-success d-inline">Test</h1> <h1 class="bg-success d-inline">Test2</h1>
</div>
</div>
</div>
Those h1 elements are still displayed as block elements. has anyone an idea where the problem could be?
Ok I think I found the problem. The CSS file has only the display classes with breakpoints, like d-md-inline... but the overall display classes d-inline, d-block, and so on are missing.
I need to create a UIKit grid like this:
This is my code:
<div className="uk-grid uk-grid-collapse">
<div className="uk-width-5-8">
<div className="uk-grid">
<div className="uk-width-1-2">.Variable..</div>
<div className="uk-width-1-2">..Modelo.</div>
<div className="uk-width-1-2">..Mes.</div>
<div className="uk-width-1-2">..Escenario.</div>
</div>
</div>
<div className="uk-width-1-8">BUSCAR</div>
<div className="uk-width-2-8">RANGE</div>
</div>
I've followed the example on https://getuikit.com/docs/grid.html (Nested Grid) but I can't get it, this is what I got:
Any tip? Could be fault of another css? I'm using an html template based on UIkit.
UPDATE: When I remove this width I got what I need:
But I can't edit that source, there must be another way to do it. Adding width inline won't work.
Excuse me, but please remove className from your html, use class instead;) And it seems that theres no 5-8ths in grid docs neither in src folder(have looked, but couldn't find)
I'm typically more of a backend guy, but I find myself working on a project that requires some frontend work. I'm fumbling my way through using bootstrap, and I find myself stuck on the following:
<div id="form" class="col-md-6">
<!-- form goes here -->
</div>
<br /> <!-- multiple br tags do nothing, as long as col-md-6 is used above -->
<div id="image_container">
<image src="myimage.jpg" />
</div>
I want a gap between the end of the form and the top of the image, but col-md-6 seems to be resulting in there being overlap, and the image-div is vertically larger than it is on the same page with col-md-6 removed.
Admittedly, CSS has never been my forté, but I'm hoping to address that soon. In the meantime, can someone help me out with this issue?
Seems you're not using the grid system correctly, you have to use rows and cols to separate your elements in your frontend.
Check this link about Bootstrap Grid System
Fiddle
I need to have my image inside 2 divs, why does it appear and then disappear?
I need it so that it's always on screen.
<div class="ad-container">
<div class="ad-item">
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"/>
</div>
</div>
Panthro,
Check and make sure there is no Javascript and any other code manipulating the classes: ad-container and ad-item.
The snippet of code you provided in the fiddle looks fine to me. There must be other code manipulating those classes.
Remove ad from the class names. JSfiddle blocks the content related to ads similar to AdBlock functionality.
<div class="container">
<div class="item">
<img src="http://joomlaworks.net/images/demos/galleries/abstract/7.jpg"/>
</div>
</div>
JSfiddle
I had the same issue. I was able to solve it by turning off my adblock for the page.
Your CSS must be causing the issue, check it or post what it is here.
Suppose I have a hierarchy like this:
<div class="first_level">
<div class="second_level_1">
<div class="third_level_1">
<div class="fourth_level_1">
<ul><li></li><li></li></ul>
</div>
<div class="fourth_level_2">
<div class="fifth_level_1">
</div>
<div class="fifth_level_2">
<ul><li></li><li></li></ul>
</div>
</div>
</div>
</div>
<div class="second_level_2">
<ul><li></li><li></li></ul>
</div>
</div>
I want to select all those divs, which contain at least one ul in them. So in the above example code, that would be divs second_level_2, fourth_level_1 and fifth_level_2 ..
What CSS selector can I use to get this result ?
EDIT:
If it's not possible with CSS alone, you can suggest answers using JavaScript, although due to the nature of my actual code, I would really like to avoid that if possible ..
jsfiddle
Here are two options - both have downsides, but you can consider them:
You can either manually add a second class to the divs with a ul:
<div class="fourth_level_1 div_with_ul_class">
Note: If you are using some dynamic language on the server, such as PHP, this could actually be implemented fairly easily, without manual coding.
Or if you want to be dynamic I recommend jQuery:
$("div > ul").parent().addClass("div_with_ul_class");
Parent selector isn't available in CSS, despite a lot of requests to add it.
jQuery has a nice selector, know as :has; http://api.jquery.com/has-selector/
$('div:has(ul)');
Would be the jQuery selector.