This question already has answers here:
:empty selector not working in css
(3 answers)
Closed 3 years ago.
I work in Twig on symphony and have an empty div that should be hidden in print mode.
<div class="form-fields__list">
</div>
The thing is that on screen the :empty selector works just fine, but is being ignored in print mode. Even tried to wrap the block mentioned above in {% spaceless %} block in order to remove any possible whitespaces. Anyone have an idea why this might be happening?
The :empty pseudo selector will select elements that contain either nothing or only an HTML comment.
Will Match
<div></div>
<div><!-- test --></div>
Will Not Match
<div> </div>
<div>
<!-- test -->
</div>
<div>
</div>
.container {
margin: 40px auto;
max-width: 700px;
}
#media print {
p:empty {
background-color: linen;
padding: 15px;
}
}
.pseudo::before {
content: "I am a piece of generated content inside a paragraph. The paragraph is still considered empty and gets a background color.";
}
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, in, odit autem tempora fuga neque quos expedita repudiandae labore iure. Rem, blanditiis natus unde nisi explicabo odio pariatur maxime earum.
</p>
<p></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, tempora, ratione ad distinctio iusto illum accusamus qui porro inventore commodi voluptates tenetur dolor sed harum excepturi nemo aperiam beatae sint!
</p>
<p class="pseudo"></p>
<p>
<!-- COMMENT HERE -->
</p>
<p></p>
</div>
Related
I have a job site designed with with css grid. The job listings and email subscribe are divided bygrid-template-columns: (3fr, 1fr), the problem is is that the email subscribe box is the same height as the job listings (if there are 10 listings for example this is quite a large email subscribe box), how can I change this? (Note: jsfiddle included at bottom will make it much more clear and I have tried to set a height value on #item2 and this did not work) Thanks in advance!
.grid {
display: grid;
grid-template-columns: 3fr 1fr;
}
#item1 {
margin-left: 15px;
}
#item1>h1 {
text-align: center;
}
#list_of_jobs {
list-style: none;
}
#item2 {
text-align: center;
margin-right: 15px;
border: 3px solid #eeeeee;
}
<div class="grid">
<div id="item1">
<h1>Jobs in 10529</h1>
<table>
<tbody>
<div>
<ul id="list_of_jobs">
<li>
<h2>Job 1</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
</li>
<li>
<h2>Job 2</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
</li>
<li>
<h2>Job 3</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
</li>
<li>
<h2>Job 4</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
</li>
</ul>
</div>
</tbody>
</table>
</div>
<div id="item2">
<form>
<p>Subscribe to recieve job alerts near 105</p>
<!-- query stores zip code-->
<input type="text" placeholder="Email">
<button class="btn" type="submit">Subscribe</button>
</form>
</div>
</div>
<!-- close grid div-->
http://jsfiddle.net/bmy0s93k/2/
Add this to your code:
#item2 {
align-self: start;
}
revised fiddle
A default setting in a grid container (like in a flex container) is align-items: stretch. This means that grid items (like flex items) will stretch the full length of the relevant axis in the container.
You need to override the default.
References:
§ 6.2. Block/Cross-Axis Alignment: the align-self property
How to disable equal height columns in Flexbox?
There are a lot of examples for how to have a fixed width sidebar on Bootstrap 4, but I haven't found one that will cause the main content to disappear on mobile.
I've tried the following:
<div class="row no-gutters flex-nowrap">
<div class="col-md col-12 d-none d-xs-block d-sm-block ">
Main area
</div>
<div class="col-md-4 col-12 sidebar">
Sidebar
</div>
</div>
.sidebar {
max-width: 600px; min-width: 600px
}
And this mostly works, but what happens is that between 768 to 576 pixels the sidebar disappears entirely.
What I'm after is for the sidebar to be a fixed width with the main area shrinking and eventually disappearing.
With few lines of CSS you can achieve this with Flexbox. Please have a look in snippet I added with this answer.
To know more about Flexbox you can checkout those links.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://yoksel.github.io/flex-cheatsheet/
.wrapper {
display: flex;
height: 100vh;
}
.sidebar {
min-width: 150px;
max-width: 150px;
height: 100%;
background: grey;
padding: 20px;
}
.content {
padding: 20px;
height: 100%;
background: lightgrey;
}
<div class="wrapper">
<div class="sidebar">
sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores
</div>
</div>
I believe you're looking for this:
#media (min-width:768px) {
.sidebar {
max-width: 600px; min-width: 600px;
}
}
.sidebar {
background-color: #f5f5f5;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters flex-nowrap">
<div class="col d-none d-md-block">
Main area
</div>
<div class="col sidebar">
Sidebar
</div>
</div>
I wrapped the fixed size rule in a #media query condition only applying on md and up and I revised classes applied to columns accordingly.
Since you're setting the custom width of your sidebar anyway, you don't need col-* classes on your columns.
I've this example code:
<div class="container">
<div class="row">
<div class="left-block" style="background-color:#000000">menu</div>
<div class="text various">text article</div>
</div>
</div>
the left-block class have a background-color, but the background stop by height menu, but i like backgroud continued and stop end page, but example if insert in left-block padding-bottom=100% tha height left-block increase height by class="row" and class text-various, I like the padding stop height row or height text-various
help me please
As I understand you need something like this:
.row {
display: flex;
}
.left-block {
color: #fff;
padding: 8px;
}
.text {
padding-left: 8px;
}
<div class="container">
<div class="row">
<div class="left-block" style="background-color:#000000">menu</div>
<div class="text various">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia aperiam, ex fugiat! Ad odio voluptatem magnam, alias, voluptatibus vero corporis adipisci quos dicta, asperiores consequatur maiores iste unde dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia aperiam, ex fugiat! Ad odio voluptatem magnam, alias, voluptatibus vero corporis adipisci quos dicta, asperiores consequatur maiores iste unde dolore.
</div>
</div>
</div>
Using OSX 10.11.2, jquery.mobile-1.4.5.css "JQM"
The code below produces the image on the left. But if I comment out the JQM I get the image on the right. both have some different functionalities which I need to combined:
float the right and left icons on the topBar and resize them.
fixed top and bottom bar not to scroll up or down.
style some boarders like in image 2.
if I use JQM, it cancels the css for 1 and 3, if I comment it out or even put it under the body tag, it cancels 2 and 3. I would like to include JQM for future use in my webApp which later will be converted to work inside a webView.
Could you please suggest a fix. Thanks
.barTop, .barBottom {
text-align: center;
list-style-type: none;
min-width: 320px;
padding: 0;
margin: 0;
}
.barTop li, .barBottom li {
height: 2em;
line-height: 2em;
display: inline-block;
margin: 0;
background-color: #c8c7c9;
}
.menuIconLeft {
float: left;
width: 2em;
}
.menuIconRight {
float: right;
width: 2em;
}
.menuIconCenter {
width: calc(100% - 5em);
}
.barBottom li {
width: 32%
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RRR</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<link rel="stylesheet" href="css/myStyle.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<section id="firstpage" data-role="page">
<div class="header" data-role="header" data-position="fixed">
<nav data-role="navbar">
<ul class="barTop">
<li class="menuIconLeft">
<b>☰</b>
</li>
<li class="menuIconCenter">
Activity label
</li>
<li class="menuIconRight">
<b>⋮</b>
</li>
</ul>
</nav>
</div>
<div class="ui-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, temporibus, dolore! Doloribus, at repellendus sunt consectetur modi natus suscipit magni explicabo optio sequi, assumenda delectus perferendis excepturi nisi nobis ratione.Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eos repellendus aliquam sint atque aliquid, tempore voluptatum recusandae et rerum, qui quasi ex at aspernatur. Temporibus voluptatum exercitationem sit modi assumenda!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Laboriosam voluptatum illum maxime hic ipsa odio eaque cum. Optio cumque sequi recusandae. Nihil voluptatibus soluta ad saepe, quia optio laudantium molestiae.contents of this activity Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Asperiores nulla facere soluta tempore nihil, voluptatibus nostrum sequi, voluptate, incidunt distinctio reiciendis qui at totam alias. Culpa fuga rem vitae nesciunt?
</p>
</div>
<div class="footer" data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul class="barBottom">
<li>
<b>NO</b>
</li>
<li>
<b>EXTRA</b>
</li>
<li>
<b>YES</b>
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>
There are two parts to understand to solve this type of problem. Firstly, CSS prioritises whatever runs later - if you change a div background-color, and then change it again later, the latter change will apply.
Secondly, is the !important tag. By inserting it, you can force a certain aspect to override anything else that may apply to the code, for example;
height: 2em !important;
With any luck, you should be able to use this to solve your problem.
I'm used to working with tables for aligning images and text, but this is not quite working with mobile devices. So I want to use CSS and DIVs instead, but I have no experience.
Basically I want to have three pictures centered, while writing text above each. They should be centered, but fill the screen that the viewer is using.
See both my CSS (a start that was not working) and the table I want it to look like below: http://beautebeaute.dk/#Hvordan
Thanks!
you can center by containing the elements in one div. make it center using margin auto and a width. then inside use sections or divs to float left and add width so that its centered. And the text is aligned using text-align.
If you are using image, dont float instead use margin:0 auto.
example http://jsfiddle.net/56Rns/3/
html
<div class="container">
<section>
<h3>Title1</h3>
<img class="pic" src="http://i50.tinypic.com/2je1u2s.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus distinctio consequatur omnis quia perspiciatis accusantium recusandae. Consectetur cumque hic laboriosam autem libero officiis placeat quos perspiciatis laudantium
</p>
</section>
<section>
<h3>Title2</h3>
<img class="pic" src="http://i50.tinypic.com/2je1u2s.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus distinctio consequatur omnis quia perspiciatis accusantium recusandae. Consectetur cumque hic laboriosam autem libero officiis placeat quos perspiciatis laudantium
</p>
</section>
<section>
<h3>Title3</h3>
<img class="pic" src="http://i50.tinypic.com/2je1u2s.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus distinctio consequatur omnis quia perspiciatis accusantium recusandae. Consectetur cumque hic laboriosam autem libero officiis placeat quos perspiciatis laudantium
</p>
</section>
</div>
css
.container{
width:900px;
margin:0px auto;
}
section{
width:250px;
float:left;
text-align:center;
padding:10px;
}
img.pic{
width:170px;
margin:0 auto;
}