Is there any way, how to set custom text on Progress component? I want to set seconds like this:
http://prntscr.com/kk7ms0
I didn't found any solution how to do this. I have percentage value, but I want set time in second with "caption" seconds.
So, I dont want to use "Label" under progressbar.
Thank you for any helpp.
I've got a solution! It's a bit hacky, and sort of goes outside the realm of React Semantic UI but it does the job.
HTML:
<div className='ui progress'>
<div className='bar' style={{width: `${percent}%`}}>
<div className='progress progress-text'>{percent}% Completed</div>
</div>
</div>
CSS:
.progress-text {
text-align: center !important;
right: 0 !important;
left: 0 !important;
}
Let me know if this needs expanding on, but I think this covers your question! :)
Related
So, I'd like to set the height of the collapsed navigation of bootstrap to 100% height.
e.g. https://getbootstrap.com/examples/navbar/ this should span over the whole screen.
I did some research and mostly found people using height: 100vh; but this is not dynamics, shouldn't matter too much in the end though, but I still don't like it.
Usually, one could e.g. do:
<div id="bar">
<div id="foo">
test
</div>
</div>
html,
body {
height: 100%;
}
#foo, #bar{
background-color: red;
min-height: 100%;
}
But I'm asking myself now, what's the best approach to implement this when using bootstrap v3.
you can hide the Content while the Navigation is collapsed using JavaScript..
for example: document.getElementById("ID").style.display = none;
if there is no content under the Navigation, there is nothing to scroll... :P
So I'm asking myself then, how I can deactive scrolling when the navigation collapsed?
I somehow fail listening to the proper event
As per your comment, I see the issue is that you dont get the proper point of the collapse. The plugin provides the events on collapse.
By bootstrap documentation this is how you do
$('#foo').on('hidden.bs.collapse', function () {
// do something…
})
I'm trying to format a slide in a bootstrap that has the format of the following fiddle: fiddle
The two divs with "hidden" in them are meant to disappear when on desktop so that when someone is using a tablet or phone they stack on top of each other. This works fine in the fiddle where the height is set to a fixed number
height: 100px;
But I don't want to set the height this way. If I remove this line you can see in the fiddle that "hidden2" drops down in a weird way instead of acting as a spacer for the text content on the bottom. I've also noticed if I remove the img tag the grid works fine.
I'm not sure why it does this and with real content it just looks like there's no spacer and all the text hugs the left side. Any ideas?
Edited: You can have a width of the content so there is space on both sides, and using the bootstrap grid system drop the text content down.
HTML
<div class="whole">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<img src="http://placehold.it/100x100"/>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">text content</div>
</div>>
CSS
div {
height: 100px;
background: red;
border: 1px solid black;
text-align: center;
}
img {
border-radius: 50%;
}
.whole {
margin: 0 10%;
width: 80%;
}
As much as i understood from your question, you're trying to preserve the functionality found on the fiddle link you provided, but also preserving equal heights. I also understand that you do not want to assign the height manually (i.e in your case, hard-coded).
There are two ways of approaching the solution: Javascript or CSS3.
Javascript:
I usually wouldn't solve layout issues with Javascript, but since your scenario has more than one row invloved, the easy way is JavaScript. With the help of jQuery, you can iterate through the div elements, having an initialized variable (example: var bHeight = 0). Check for each element's height; if it's greater, assign it to bHeight.
Your code should something like this:
$(document).ready(function(){
var bHeight = 0;
$("div").each(function(){
if($(this).height() > bHeight)
bHeight = $(this).height();
}); //end of loop
//now, assign height to all
$("div").height(bHeight);
});
This method will allow you to assign the height of your columns dynamically.
CSS3:
A little research online cold introduce you to the CSS3 display: flex, yet it's totally up to you to decide regarding browser support (CSS flex Property), and more details on solving your issue here: (A Complete Guide to Flexbox)
I'm having some trouble here. I want to show an image when mouse is hovered above following div.
HTML:
<div id="testmouseover">
<img src="testmouseover.png">
</div>
CSS:
#testmouseover
{
left: -9px;
top: -9px;
position: absolute;
width: 865px;
height: 653px;
z-index:1;
}
I have 4 of these divs wich should display a different image, so how can I add an ID to the hover?
Can someone help me with writing the CSS code for the hover? It will be greatly appreciated!
Have an onmouseover() event attached to the div. You can take some pointers from w3schools.
In the function that is being called at onmouseover, change the innerHTML property to have the desired image.
This can be achieved even quicker using jQuery:
$("#divId").click(function(){
$(this).html("Ur image html here")
});
I think it's easier than you think: try #testmouseover:hover
If that's not the right answer, please share a code sample on codepen
Here is an html version if it helps. The z-index is for layering images (stacking) not for mouse overs if I am correct.
<img src="NORMAL IMAGE" onmouseover="this.src='MOUSE OVER IMAGE'" onmouseout="this.src='Normal Image'" alt="ALTERNET TEXT">
Try this, pure CSS:
#testmouseover img {
display: none;
}
#testmouseover:hover img {
display: inline;
}
Be sure to give the div some width and height so that you don't get weird flickering stuff. For multiple divs just give them different IDs and copy this CSS a few times. If all the divs are the same you could also give them all the same class, or give them a class with the above mentioned CSS and an ID with the div specific styles.
Example: http://jsfiddle.net/S44MS/
Here is my code:
<style>
#defCalTree
{
overflow: scroll;
overflow-x: hidden;
}
</style>
and
<div class="defCalTree">
<div id="treeboxbox_tree" style="width:80%; height:100%;background-color:#f5f5f5;border :1px solid Silver; "></div>
</div>
and
to the treeboxbox_tree I attach a dhtmlx tree. But, the scroll bar which is shown I think doesn't refer to the tree. If the tree consists of many items, the div is getting bigger. It should remain the same size, and by using the scroll we will get to every item. What am I doing wrong?
In css you are using # which is selector for id and in html you are using class. so how your css will work. is this your problem or some thing else check it.
Try to either:
Amend <div class="defCalTree"> to <div id="defCalTree">
OR
amend #defCalTree to .defCalTree
You need to specify the height of the #defCalTree div. As it is now, it is growing in size to wrap its contents, which is the intended behaviour.
How is it possible to make an exception on the overflow:hidden; container property to a matched set of child elements?
Here's a sample scene:
<div style = "overflow:hidden;">
<p>item</p>
<p>item</p>
<p class="special">item that needs to show itself outside the parent borders</p>
</div>
I do have a reason why I'm doing this :] I'm building a pretty complex scrolling menu whose elements are expanding out of the menu's borders. The menu obviously clips everything outside its borders since it's scrolling around.
Here's a chunk of code relevant to the issue:
http://jsfiddle.net/Birowsky/fNLbP/15/
Uncomment the marked line in the JavaScript to see the issue below the 'special item'.
You might notice that the scrolling isn't working, it's ok, I think it's fiddle issue.
You can make the special element to be absolutely positioned
.special{
position:absolute;
}
But this will only work when the .special does not define a position (top/left/bottom/right), and also it will not be used if you later want to calculate the height of the parent div..
example : http://jsfiddle.net/gaby/aT3We/
The requirement though is a bit weird, and it might be better to rethink the whole issue..
(what exactly are you trying to achieve with this ?)
I don't think you'll be able to find a way to do this. Even if you do, I'd recommend against using it because it probably won't be future-proof or very cross-browser compatible.
In the case of a menu, you're probably better off putting these items in separate divs. I'd need to see your code in context to recommend a specific way of doing things, but layering your elements kinda like this might work for you:
<div style = "overflow: hidden; width: 200px; height: 100px; margin: 0; padding: 0; background-color: #CCCCCC; z-index: 1;">
<p>item</p>
<p>item</p>
</div>
<div style = "overflow: visible; width: 200px; height: 100px; margin: -30px 0 0 0; padding: 0; z-index: 2;">
<p class="special">item that needs to show itself outside the parent borders</p>
</div>
If that doesn't fit your needs, maybe you could describe the structure of your menus better so that we can understand what you need? Do you have a link to an example, perhaps?
Edit based on new information
After looking at your example link, it looks like what you want to do is clip content horizontally, while still allowing it to overflow vertically. You can do this by using a very high height value, and then setting a negative bottom margin:
<div style="width: 200px; height: 2000px; margin: 0 0 -1960px 0; overflow: hidden;">
<p>Thisisaverylongsentencedesignedtooverflowthewindowverticallysopleasepermitmetotypeitwithoutandspaces</p>
Item 1<br />
Item 2<br />
Item 3<br />
Item 4<br />
</div>
Is this what you want?
I had a problem like this where the aforementioned solutions weren't working. There was a list of items in a container, each of which could be varying size depending on how many where in the list (with a minimum). The container was overflow: hidden; and there was a part of the items in the list that was a drop down and would be cut off.
My solution:
// get dropdown container position, make a modification, and apply to dropdown
function openDropdown(){
var offSet = $('.dropdown.open').parent().offset();
offSet.top = offSet.top + ($('.dropdown.open').parent().height() / 2);
$('.dropdown.open').offset(offSet);
}
// on scroll reassess dropdown position
$(window).on('scroll', window, function(){
if($('.dropdown.open')[0] != undefined){
openDropdown();
}
});
// on click close open dropdowns and open this one
$('body').on('click', '.dropdown', function(){
$('.dropdown.open').removeClass('open');
$(this).addClass('open');
openDropdown();
});
Why would you need to do this? Maybe a better solution can be made.
I don't think that defining overflow: auto; selectively is possible, as overflow is applied to the parent, not it's children, so it's like having color: red and color: blue on the same element, at the same time; they just don't make sense when put together (bad example, but you get the idea).