I have two div one is sidebar & another one is Categories bar, i want to hide scroll bar from categories bar but.
I tried
#sidebar ::-webkit-scrollbar-thumb { visibility: hidden; }
but it hide scrollbar from both div. Please help.
why don't you use overflow?? like: #sidebar { overflow: hidden; }
You could add a class to categories bar div. The class would target specific scrollbar you are trying to hide.
Something like this, use as reference and adapt to your own code.
<div id="sidebar">
...
</div>
<div class="categories-bar">
...
</div>
<style>
#sidebar ::-webkit-scrollbar-thumb {
visibility: visible;
}
.categories-bar ::-webkit-scrollbar-thumb {
visibility: hidden;
}
</style>
Related
Is there a way we can centre aligned text of uib-progressbar. I have tried doing position:absolute. But I wanted to show list of progress bar in a UI grid viz. is a scrollable content. While scrolling text remain at its place but progress bar get scroll properly.
Template
<uib-progressbar animate="false" value="30">
<span class="content">30% (3/10)</span>
</uib-progressbar>
Style
.progress-bar .content {
white-space: nowrap;
position: absolute;
left: 23vh; /* will vary according to alignment */
}
Can you provide your css class 'content' here?
However, assuming that you wanted the text "30% (3/10)" to be centered on progress-bar irrespective of the value.
Add css class to your progress-bar like below:
.progress {
position: relative;
}
.progress span {
position: absolute;
display: block;
width: 100%;
color: black;
}
and your code should be like this:
<uib-progressbar animate="false" value="30" class="progress">
<span class="content">30% (3/10)</span>
</uib-progressbar>
I have created a JSBin for same.
This should work.
I am not really proficient in such thing, thus hopefully someone may help me with this. I have this particular problem that the footer have block the datepicker shown in the image. I am using sticky footer which is not the result I desire, thus I never label the footer class in my <div>.
This is my current code:
<div class =" navbar navbar-default navbar-fixed-bottom navbar-inverse" role="navigation">
<div class ="container">
<font size="3" color="white"><p class="paddingAll">Copyright © 2015</p></font>
</div>
This is my CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: relative;
bottom: 0;
width: 100%;
height: 55px;
}
What I would like to have is to make the footer bar push down and reveal the whole datepicker and will close the remaining gap when the datepicker is being kept away.
Add padding-bottom instead of margin-bottom
CSS:
body {
padding-bottom: 60px;
}
Remove relative position from bottom class cos any relative position without z-index is more power than absolute without z-index so your .bottom is over your calendar suppose.
Add position:relative; z-index:1; to datepicker class.
I'm having issues with the z-index of a bootstrap dropdown.
http://jonwhittlestone.com/public/z.html
In this page, the pass button's associated dropdown is appearing on a lower layer that the container and appears to constrain it.
Editing the following doesn't seem to fix.
Any ideas CSS people?
Thanks
Jon.
The reason your dropdown isn't being shown is that this element has the CSS option of overflow:hidden:
<div class="panel panel-default">
Edit bootstrap-alizarin.css line 4100 and remove overflow:hidden.
After you have done this, insert the following code after the closing tag of the .sanctions-result-actions div:
<div style="clear:both;"></div>
it is overflow:hidden issue make this changes of the .panel
overflow:hidden will not allow its children to show if are coming out
.panel-group .panel {
background: #fbfbfb;
margin-bottom: 0;
border-radius: 5px;
/* overflow: hidden; */ /* remove this */
float: left; /* and add this */
width: 100%; /* and add this */
}
There is other css style (bootstrap-alizarin.css:4100), you have to change it:
.panel-group .panel {
/*...*/
overflow: hidden; /* to remove */
}
The rule overflow: hidden on the container is the problem
override it to overflow: visible
I can see that a parent div with class="panel panel-default" has an overflow: hidden.
If you want to display the inner div out of it's parent overflow-hidden div, you must place this div out of the current one.
Check this post: post
So I have a fluid layout with a fixed nav. I have: the fixed nav itself, and a div containing four other divs that Im looking to fill the space beneath the fixed nav completely. I cant seem to make this happen without having some kind of scrolling of either the nav or the divs.
The nav is set to position:fixed
The div containing the content div is set to position:absolute height:100% width:100%
The four content divs themselves are set to float:left height:50% width:50%
Im not even certain this can be handled with css alone, if it can that would be awesome, if not, ill entertain other possibilities. Any help, as always, is greatly appreciated.
Development area:
http://riverhousegolf.icwebdev.com
Maybe there is solution with CSS only, but here is jQuery solution. Content below menu will fill rest of space, without scroll bars.
HTML markup will be:
<div id="menu">SOMETHING IN MENU</div>
<div class="content">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
<div class="part4"></div>
</div>
CSS:
body,html{padding:0; margin:0;height:100%;width:100%;}
#menu {
position: fixed;
top: 0;
background: blue;
height: 50px;
width: 100%;
}
.part1 {
width:50%;
height: 50%;
float: left;
background: purple;
}
.part2 {
width:50%;
height: 50%;
float: left;
background: red;
}
.part3 {
width:50%;
height: 50%;
float: left;
background: green;
}
.part4 {
width:50%;
height: 50%;
float: left;
background: silver;
}
.content{
width: 100%;
position: relative;
}
jQuery:
var height = $(document).height();
var menu_height = $("#menu").height();
var content_height = height - menu_height;
$(".content").css("height", content_height);
$(".content").css("top", menu_height);
DEMO
Most important part is jQuery. First, we need to get height of document (html), then height of menu. Then, we substract menu height from document height, and result is content height. Same result we will apply to top position of content, to avoid overlaping.
Remove the "overflow-y: scroll;" attribute from your "html" selector in your style sheet.
edit:
I think if you are to use pure CSS you are going to have a scroll bar. I made a fiddle to show how to at least stop the nav from cutting off th top of the other divs. I used a
<div class="spaceTaker" >
that bumps the rest of the page down.
http://jsfiddle.net/Dtwigs/XRJ8n/
Edit2:
Try keeping all of the widths the same. But remove all of the heights where they are set to a percentage. The html element should have height: 100% but your tiles, etc. should not. Now put this jquery on your page.
$( function () {
var pHeight = $("html").height() - $("nav").height();
$(".tile").height(pHeight / 2);
});
Also make your nav position relative.
http://jsfiddle.net/Dtwigs/XRJ8n/
I am trying to apply a background image hover effect on each row in my css table but need it to appear to the left of the containing element.
View image http://www.weiserwebworld.com/images/view.gif
Any ideas?
JS:
$(function() {
$(".table-row").hover(function() {
$(this).addClass("highlight");
}, function() {
$(this).removeClass("highlight");
})
})
CSS:
#container {
width: 660px;
margin: 20px auto;
}
div .table {
display: table;
border: 1px red solid;
}
div .table-row {
display: table-row;
}
div .table-cell {
display: table-cell;
width: 145px;
padding: 10px;
vertical-align: top;
}
.highlight {
cursor: pointer;
background-image: url('click-to-view.png');
background-position: 0 center;
background-repeat: no-repeat;
}
HTML:
<div id="container">
<div class="table">
<div class="table-row">
<div class="table-cell">Ralph Kramden</div>
<div class="table-cell">Truck Driver</div>
<div class="table-cell">8/17/2010</div>
<div class="table-cell">N/A</div>
</div>
<div class="table-row">
<div class="table-cell">Ralph Kramden</div>
<div class="table-cell">Truck Driver</div>
<div class="table-cell">8/17/2010</div>
<div class="table-cell">N/A</div>
</div>
</div>
</div>
First, throw away this:
$(function() {
$(".table-row").hover(function() {
$(this).addClass("highlight");
}, function() {
$(this).removeClass("highlight");
})
})
It is an abomination.
Then change the CSS selector .highlight to .table-row:hover. As you clearly don't care about IE6 (where :hover only worked on a elements), there's nothing wrong with using :hover.
Now to the rest of the problem.
The technique that I would use for this is the before or after pseudo-element. Something like this:
.table-row {
position: relative; /* So that the position: absolute on the "click to view" makes it relative to the table row */
}
.table-row:hover:after {
position: absolute;
left: -80px; /* Adjust as desired */
content: url(click-to-view.png); /* This makes it an image */
}
There's plenty of tweaking that can be done with this, but that's the general idea. No demo on jsfiddle as I can't be bothered doing the table structure or getting an image for it.
You can do this in pure CSS.
This is quick and dirty, you'll have to tweak it to how you want, but the general idea is:
If you give your row an id () you can add a CSS styles like this:
.overlay {
display: none;
position: absolute;
left: -30px; //makes it appear left of box, even though it's technically "in" box.
}
#table-row1:hover .overlay {
display; block; //Causes div to appear.
}
Now, simply add with the image you want, that will appear as you roll over the row.
Note that the class=overlay div MUST be placed INSIDE of the id=table-row1 div or the hover-appear will not work!
I would also recommend redoing this using tags with the same :hover approach, as your current method of divs with table properties could get unwieldy very fast.
You need to put your image in a DIV, then position the DIV relative to the row. Backgrounds cannot go outside the boundary of their container.