My code works ok if the amount of items li I have is longer than the height of the div container. However, if I only have one item, the border does not fill the empty space.
The following image illustrates the problem
As you can see I'm using a plugin to work with the scrollbar, called perfectScroll.
My code is pretty simple and you can see the issue in JSFiddle.
<!-- This div has a 200px height fixed -->
<div class="col-md-5">
<ul>
<li>Text 1</li>
</ul>
</div>
Try this one then:
ul
{
margin-left: 0px;
border-left: 1px solid #44A4E3;
padding-left: 15px;
min-height: 100%;
}
working fiddle
make the ul height as its parent div
ul
{
margin-left: 0px;
border-left: 1px solid #44A4E3;
padding-left: 15px;
min-height:100%; //ADD THIS
}
Related
I have an absolutely-positioned container with two children. I would like the width of the container to be based on the width of the first child, while the second child dynamically adapts to the width of its parent.
const passenger = document.getElementById("passenger");
function toggle(){
passenger.classList.toggle("squashed");
}
#top {
padding: 4px;
border: thin solid red;
position: absolute;
}
ul {
padding: 4px;
border: thin solid green;
}
li {
padding: 4px;
border: thin solid purple;
}
ul#passenger li {
width: auto; /* ??? No good -- what goes here ??? */
}
.squashed {
max-width: 10em;
}
<button onclick="toggle()">Toggle</button>
<hr/>
<div id="top">
<ul id="driver">
<li>This is the desired width</li>
</ul>
<ul id="passenger">
<li>This should be forced to wrap because its width doesn't contribute to the container width calculation.</li>
</ul>
</div>
Click the "Toggle" button in the example to see an approximation of the effect I'm going for. When I don't artificially constrain the width of passenger, it grows horizontally to fill the page, which pushes the width of top to match it.
I have tried setting #passenger li {width:auto;} as well as width:100%;, and also various combinations of word-wrap, etc, but I can't figure out how to force the li to take on the width of its parent. It seems that #passenger li {width:100%;} only works when the width of top is explicitly set, rather than based on the width of driver. It also "works" the way I want if I take passenger completely out of the flow by making it position: absolute but I want top to completely contain both elements, so this is not an option.
Is the desired effect possible using CSS only (no JS)?
You could do this with display: table on parent element and some small width, for example 1%, and then you also set white-space: nowrap on first ul element.
In this case all of the other child elements will adjust its width to the largest one.
#top {
padding: 4px;
border: thin solid red;
position: absolute;
display: table;
width: 1%;
}
#driver {
white-space: nowrap;
}
ul {
padding: 4px;
border: thin solid green;
}
li {
padding: 4px;
border: thin solid purple;
}
<div id="top">
<ul id="driver">
<li>This is the desired width</li>
</ul>
<ul id="passenger">
<li>This should be forced to wrap because its width doesn't contribute to the container width calculation.</li>
</ul>
</div>
The title is probably kind of confusing.
I have a list of some elements, that each have a CSS hover effect applied (the background lightens). However, I would like each element to fill all of the space in its container, which they currently don't do.
Ex:
How it should be:
In addition, I need the elements to be close together, inline-element style, as seen in the first example. I have looked into display:inline and display:inline-block on a div tag; however, that caused the div to behave like in the first example (the element doesn't fill all of its horizontal space, visible from the hover effect). Ex:
<div style="display:inline-block">Example 1</div>
On the other hand, using a span has the inverse effect, causing a second-example-esque problem. Ex:
<span style="display:block">Example 1</span>
Is there any way to do both? i.e. Is there any type of element or CSS trick with inline-element-like vertical padding and block-element-like horizontal padding?
Add width: 100%
(Demo)
<span style="display: inline-block; width: 100%;">
You may follow something like the following:
CSS:
#nav{
width: 33%;
border: 2px dotted #000;
}
#nav ul{
padding: 0px 0px 0px 0px;
}
#nav ul li {
width: 100%;
list-style: none;
display: inline-block;
}
#nav ul li:hover{
background-color: #ffccaa;
}
#nav ul li a{
padding: 5px 0px 5px 10px;
text-decoration: none;
}
HTML
<div id="nav">
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div>
Checkout this DEMO
I have the following mark up:
<ul data-role="listview" data-inset="true" class="stuff site-content lists">
<li>
<div class="nearby"> 20 </div>
<h1> name</h1>
</li>
</ul>
css is:
.nearby{width: 85px;
height: auto;
float: left;
margin-right: 10px;
font-size: 26px;
text-align: center;
padding: 15px 0;
border: 2px #c1c1c1 solid;
background: #fafafa;
}
li{padding: .7em 15px;
display: block;
}
Unfortunately, the div doesn't sit nicely in the middle as it is too tall. Anyway, the li item could also increase in height so that its padding is dependent on the div rather than the h1?
You will have to add the following for it to work:
li{overflow:hidden;}
When setting the parent of a floated element to overflow:hidden; you force it to wrap the entire floated content. This is a very useful technique and it is used alot.
set float:left for ul and li both i always have this problem try it
I am new to coding and have a small problem I can't figure out. I have a #wrapper div defined to allow me to center my content on the page and color the background white (background color defined in css). Whenever I have the height property set to auto, I have a white box at the top of my page when rendered which seems to represent the padding definitions I have set in the #wrapper properties. My actual page height is fine when rendered meaning that all the content appears as expected, but the only way to make the white box extend to the bottom of the page so the whole background is white is to enter a fixed height value. Here's what I have:
#wrapper {
width: 940px;
height: auto;
/* border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000; */
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
position: relative
}
Any help is surely appreciated!
#wrapper {overflow: hidden}
OR
#wrapper {overflow: auto}
If you want the #wrapper div to extend to the bottom of the page you need to provide an explicit height. height: auto will adjust to fit the content only. If #wrapper is a direct child of your main page div or just below your body you can set that parent element (body or some div) to something like 100% or a static value and then set your #wrapper to a percentage of that value like...
I am NOT advocating inline styles!! just an example
<body style="height: 480px">
<div id="wrapper" style="height: 95%">
content!
</div>
</body>
Body could also be a percentage and would then adjust to the window height, might work but is probably not what you want, just another option.
I have two div, one on the left and the other is on the right. Now I want to divide this two div with a border between them. But the border with full height looks bad.
I want to control the height of the border. How could I do this?
A border will always be at the full length of the containing box (the height of the element plus its padding), it can't be controlled except for adjusting the height of the element to which it applies. If all you need is a vertical divider, you could use:
<div id="left">
content
</div>
<span class="divider"></span>
<div id="right">
content
</div>
With css:
span {
display: inline-block;
width: 0;
height: 1em;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
Demo at JS Fiddle, adjust the height of the span.container to adjust the border 'height'.
Or, to use pseudo-elements (::before or ::after), given the following HTML:
<div id="left">content</div>
<div id="right">content</div>
The following CSS adds a pseudo-element before any div element that's the adjacent sibling of another div element:
div {
display: inline-block;
position: relative;
}
div + div {
padding-left: 0.3em;
}
div + div::before {
content: '';
border-left: 2px solid #000;
position: absolute;
height: 50%;
left: 0;
top: 25%;
}
JS Fiddle demo.
Only using line-height
line-height: 10px;
I want to control the height of the border. How could I do this?
You can't. CSS borders will always span across the full height / width of the element.
One workaround idea would be to use absolute positioning (which can accept percent values) to place the border-carrying element inside one of the two divs. For that, you would have to make the element position: relative.
not bad .. but try this one ... (should works for all but ist just -webkit included)
<br>
<input type="text" style="
background: transparent;
border-bottom: 1px solid #B5D5FF;
border-left: 1px solid;
border-right: 1px solid;
border-left-color: #B5D5FF;
border-image: -webkit-linear-gradient(top, #fff 50%, #B5D5FF 0%) 1 repeat;
">
//Feel free to edit and add all other browser..
I was just looking for this... By using David's answer, I used a span and gave it some padding (height won't work + top margin issue)... Works like a charm;
See fiddle
<ul>
<li>Home</li><span class="divider"></span>
<li>About Us</li><span class="divider"></span>
<li>Events</li><span class="divider"></span>
<li>Forum</li><span class="divider"></span>
<li>Contact</li>
</ul>
.divider {
border-left: 1px solid #8e1537;
padding: 29px 0 24px 0;
}
You could create an image of whatever height you wish, and then position that with the CSS background(-position) property like:
#somid { background: url(path/to/img.png) no-repeat center top;
Instead of center topyou can also use pixel or % like 50% 100px.
http://www.w3.org/TR/CSS2/colors.html#propdef-background-position