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.
Related
I am writing a web-app using React.js. I have come to the point where I need to control the position of a note on a bar. I intend having two buttons (one for up, one for down) and have the bar and note be two separate .svg image files that I will somehow draw ontop of each other. Like this:
SVG note ontop of SVG bar
So my question is:
How can I draw an SVG ontop of another SVG and control its position (dynamic position)? I have tried using
style={{position:'fixed'}}
for the note but the formatting gets all messed up.
Edit:
.svg image files.
A page element with relative positioning gives you the control to absolutely position children elements inside of it.
If you give the note position: absolute, you'll be able to position it wherever you want, relative to the parent.
.parent {
position: relative;
}
.note {
positition: absolute;
/* place note in the top left */
left: 0px;
top: 0px;
}
See here for more on this technique.
Here's a snippet using <div>s instead of SVGs, run it for an example:
function moveUp() {
document.getElementById("note").style.top = "0.5rem";
}
function moveDown() {
document.getElementById("note").style.top = "2.5rem";
}
.container {
position: relative;
}
.bar {
width: 15rem;
height: 4rem;
background-color: lightblue;
}
.note {
position: absolute;
top: 1.5rem;
left: 1rem;
width: 1rem;
height: 1rem;
border-radius: 1rem;
background-color: red;
}
<div class="container">
<div class="bar"></div>
<div class="note" id="note"></div>
</div>
<div class="buttons">
<button onclick="moveUp()">up</button>
<button onclick="moveDown()">down</button>
</div>
position:absolute will give you the freedom to position the <img> tag freely - in relation to the next parent element with a position:relative property. For example like this:
<div style={{position: 'relative'}}>
<img src="bar.svg"></img>
<img src="note.svg" style={{
position: 'absolute',
left: x,
top: y
}}></img>
I'm not very good at CSS, I guess that will we easy to one of you.
Look at image below, i'm trying to center my text but center it with the div parent's width, as if there was no button, but I don't know how to proceed.
<div class="parent" style="width:500px;">
<div class="container" style="width:400px;"> My text here </div>
<button style="width:100px;">My Button</button>
</div>
I tried :
.parent { text-align: center; }
but that center the text with the .container width (so at 200px) but i'm looking for a way to center it a 250px here (.parent width)
I think about doing that with a padding-left but that's not a "clean" method in my case because button is not always displayed.
If someone knows how can I do that please :)
image:
One option would be to use absolute positioning on the button!
.parent {
position: relative; // position the button within the parent div
}
button {
position: absolute;
right: 0;
top: 0; // or whatever, position it where you want it
}
.container {
padding-right: 100px; // so the text doesn't overlap with the button
padding-left: 100px; // so the text is balanced
text-align: center;
}
EDIT:
And when the button isn't needed, you could use a conditional on the parent --
.container--with-button {
padding-right: 100px;
padding-left: 100px;
}
.container--without-button {
padding: 0;
}
If I understand you right then all you'll need to do is add a text-align property to your div.
.div { text-align: center }
I made a quick example that matches your diagram here, hope it helps.
https://jsbin.com/qubeqezama/7/edit?html,css
From what I see you only need to add display: block; to the .parent element. That way they'll be both displayed as a block and then all the text will be centered. ;)
I'm trying to make a header bar that contains an image followed by a title and the a menu car.
The bar is displayed after 50px and I want the image to be moved up slightly so that its over the top of the wrapping div and showing a bit in the 50px above.
Using position absolute on the wrapping div and position relative with the image then moving it up by 20px works fine but when I do this the rest of the elements in the div stay below it. Is there a way to move those other elements up to they are inline with the image?
I've made a simple jsfiddle of what I'm trying to do here: http://jsfiddle.net/67sTt/
HTML:
<div class='headerContainer'>
<div class='logoContainer'>
</div>
<div class='title'>
<h2>Header</h2>
</div>
<nav class='menu'>
<ul>
<li>first</li>
<li>second</li>
</ul>
</nav>
</div>
CSS:
.headerContainer {
top: 50px;
background-color: green;
position: absolute;
width: 100%;
}
.logoContainer {
height: 120px;
width: 120px;
background-color: red;
display: inline-block;
position: relative;
top: -20px;
}
.title {
font-style: italic;
display: inline-block;
position: relative;
padding: 0;
}
.menu {
display: inline-block;
position: relative;
}
I need the title and the menu to line up in the middle of the image(the red box).
Using position: absolute moves them to the top which is fine but the title and the menu layer on the top of each other.
I know I could use this and give the menu some padding to the left so that it sits next to the title but when the page size is reduces the menu moves below the image and title so I don't want the padding shown then, and I'd rather not come up with some hacky jquery way of managing that if it can be done in css only.
like this? http://jsfiddle.net/67sTt/1/
add:
vertical-align: top
to menu and title
I am trying to show a tool tip box on hover an image. I won't be able to use jquery or any other plugin. I have to use pure css. I have seen a demo working here.
http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-simple-css3-tooltip/tooltip_demo.html
My code:
<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one"> </a>
Jsfiddle :
http://jsfiddle.net/txeF2/
For some reason I can't get the tooltip box.
UPDATED : http://jsfiddle.net/Md5E6/4/
Here is one solution: EXAMPLE HERE
Change .tooltip from inline to inline-block:
.tooltip {
display: inline-block;
position: relative;
}
Then remove the absolute positioning from the child img element. This was causing the main problem; as the element was removed from the flow of the document, thus causing the parent element to have no dimensions and collapse upon itself.
use like this to show tooltip
<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a>
.tooltip
{
display: inline;
position: relative;
}
.tooltip:hover:after
{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
If you want to view complete code with demo here is a full tutorial Create CSS3 Tooltip
For me the reason was my parent div had an attribute "pointer-events: none". Removing this fixed my tooltip not showing issue for the child div.
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.