I have a prototype of a image slider. Fiddle here!
<div style="display:block;border:1px solid red;">
<ul style="margin:0px; padding: 0px ;white-space:nowrap; ">
<li style="display: inline-block;">
<div style="width:100px;height:100px;text-align: center;border:1px solid black;">A</div>
</li>
<li style="display: inline-block;">
<div style="width:300px;height:100px;text-align: center;border:1px solid black;">B</div>
</li>
<li style="display: inline-block;">
<div style="width:450px;height:100px;text-align: center;border:1px solid black;">C</div>
</li>
</ul>
Unfortunately I have a problem the image are getting truncated because it exceeds its parent width. Is it possible to display without getting it truncated. Any tips or sample works, that I can refer to. Thanks!
Solution 1 : You can make the parent container overflow: auto or overflow-x: scroll
Solution 2: You can, instead of calling the image inline, you can have them as a background image and show some portion of it. You can try playing around image > width:100% or background-size:cover in css
Related
I have creted this page in html & css. I have a section with a scroll bar inside the page and for small size it appears like this:
enter image description here
I don't want 2 scrollbars to be there so I want to remove the scrollbar of this section for small sizes. Here is my code:
<div class="account-left">
<div class="scroll-area" data-spy="scroll" data-offset="0">
<div class="section">
<!--<h1 style="color:black;">{{hais}}</h1>-->
<div style="text-align: center; background: #eee;">
<span ng-show="tasklist.options.no_tasks" ng-bind-html="tasklist.options.no_tasks.message"></span>
</div>
<ul>
<li >Print smth</li>
<li >Print smth</li>
<li >Print smth</li>
</ul>
<a class="loadmore" ng-hide="1" href="javascript:void(0)" ng-click="loadMore(loadvalue, activeTab)">Load more</a>
</div>
</div>
</div>
Since I have a scroll-area, I cant make it hide-sm because this removes all the area of scrolling and I want to remove only the scroll bar.Is there any way? Thanks.I'm using bootstrap.
After inserted this to my code like in the answer below:
<div class="account-left">
<div style=" width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;">
<div class="section">
//etc the same part of code which is above
My result is this:
enter image description here
But no scrolling
try this in css
your_div { overflow-y: hidden; }
.yourdiv {
overflow-x: hidden;
overflow-y: scroll;
}
.yourdiv::-webkit-scrollbar {
display: none;
}
Assuming that your other styles about div's and containers are correct, this should work.
To know more about this topic visit this link. There is a clear explanation of how browsers work with scrollbars and how can we hide them in a cross-browser compatibility approach. In case of my solution doesn't work, I'm almost sure you will find your solution over the link explanation.
I am trying to display navigation items (horizontally) in a blue colored ribbon. Somehow, the background-color property is not getting applied to the ul element. I tried to put it inside a div element with background as blue. Still, it doesn't work
Html snippet as,
<div style="background-color:blue;">
<ul style="list-style-type:none;background-color:blue;">
<li style="float:left;margin-right:10px;">cassandra</li>
<li style="float:left;margin-right:10px;">mongodb</li>
<li style="float:left;">couchdb</li>
</ul>
</div>
Why is my background color not showing if I have display: inline?
This is the same issue as this. The div is coming out at height 0, same as the list as the float doesn't take up any space.
If you specify the height or tell them to display:inline-block it'll work.
Fiddle: http://jsfiddle.net/7vp4vz6f/
You are using float property for the li elements, so you need to apply some sort of clearfix for container to adjust it's size according to the content size. You can try with the overflow CSS property:
body > div { overflow: auto}
JSFiddle
<div style="background-color: blue; overflow: hidden;">
<ul style="list-style-type:none;background-color:blue;">
<li style="float:left;margin-right:10px;">cassandra</li>
<li style="float:left;margin-right:10px;">mongodb</li>
<li style="float:left;">couchdb</li>
</ul>
</div>
Your elements have no width and height, that's why.
Also, consider using a stylesheet, one of the many advantages is that you don't run into such issues very often.
you want the container to shrink or expand when you click next?I have created one fiddle here: http://jsfiddle.net/agriz/nS8M3/1/
I am forced to give height for these two elements <div class="slider"> <ul>
I would like to have automatic height for these two containers.
If we mix relative and absolute positions, is it possible to have dynamic height for the containers?
I searched in SO and found this one: http://jsfiddle.net/ambiguous/zVBDc/
Here too the container has the height property in css.
HTML PART
<div class="slider">
<ul>
<li class="active"><img src="http://i41.tinypic.com/10rok86.jpg" class="slider_img" /> </li>
<li><img src="http://i40.tinypic.com/f0rfag.jpg" class="slider_img" /></li>
</ul>
</div>
<div class="toolbars">
<button onClick="window.slider.previous()">Previous</button>
<button onClick="window.slider.next()">Next</button>
</div>
I want the container to shrink or expand when I click next (copied from a comment!)
See fiddle for possible answer. http://jsfiddle.net/zGpKa
I made the following change to your CSS.
.slider li {
position: relative;
margin: 0;
padding: 0;
left: 0;
display: none;
}
I'm trying to get the tops of elements '.wrap1' and '.wrap2' to line up. As is you can see in this jsfiddle that the top of 'wrap1' is a little below '.wrap2' yet when I delete the displayed text from '.wrap2' the tops do line up. Can any one explain why the text is lowering the top of '.wrap1'?
<html>
<body>
<ul
style="margin:0px 0px!important;position:relative;width:100%"
class="mainList"
id="dateMainList">
<li
class="list-element"
id=""
style="width:100%">
<div
class="list-inner-wrap"
style="border:1px solid black">
<div
class="wrap1"
style="display:inline-block;background:white;border:2px solid black;height:50px;width:50px">
<div
class="line-1"
style="display:block;text-align:center;font-size:10pt">1</div>
<div
class="line-2"
style="display:block;text-align:center;font-size:10pt">2</div>
<div
class="line-3"
style="display:block;text-align:center;font-size:10pt">3</div>
</div>
<div
class="wrap2"
style="display:inline-block;height:50px;background:green;width:200px"></div>
</div>
</li>
</ul>
</body>
Since they are both display:inline-block they are treated inline so you can put vertical-align:top; on both of them to line them up. Or you could make them display:block and float:left.
Add float:left; to .wrap1 & wrap2 or just to.wrap1
Do position:absolute; Any element that have that attribute will not affect any other element.
Is it possible to create a fluid width LI with background imaage that adjusts its size based on content and doesn't follow the width of a parent DIV.
If possible, using only CSS.
<div id="navbody">
<!--Button Start-->
<ul id="button">
<li>
Home
<div class="btnright"></div>
</li>
<li>
About Us
<div class="btnright"></div>
</li>
</ul>
<!--Button End-->
</div>
LI contains a background:
NOTE: this has an irregular left shape
Then a DIV is used to end the irregular right shape
The menu is contained in a parent div with a fixed width
[ ]
[[ Home ] [ About Us ] ]
As you can see, I want the LI's to auto adjust based on content.
Oh. I didn't understand your question properly until you posted the code sample.
Here's a mock-up:
<div style="width: 500px;border: 1px solid Blue;">
<ul style="padding-left:0;margin-left:0;">
<li style="list-style-type: none;">
<div style="float:left; height:24px;width:20px;background-color:Green;"></div>
<div style="float:left;height:24px;background-color:Yellow;">Some content here</div>
<div style="float:left; height:24px;width:20px;background-color:Red;"></div>
<div style="clear:both;">
</li>
<li style="list-style-type: none;">
<div style="float:left; height:24px;width:20px;background-color:Green;"></div>
<div style="float:left;height:24px;background-color:Yellow;">Some other content here</div>
<div style="float:left; height:24px;width:20px;background-color:Red;"></div>
<div style="clear:both;">
</li>
</ul>
</div>
The green div is your left part of the image, the red one is your right part of the image and the yellow one is your repeating center of the image. To do this you should slice your image into these 3 parts and add them as backgrounds for the 3 divs. Just fiddle with the dimension to make it suite your desired output.
Hope this helps,
Alin