I would like to make a bar (see image). I have 3 values when I would like to display with text.
I'm using HTML and CSS Is it possible to do it?
I can't speak to PrimeFaces, so here's a solution using plain HTML, CSS, and Javascript.
let value1 = document.getElementById("value1");
if (value1) { value1.style.width = 150 + "px" }
let value2 = document.getElementById("value2");
if (value2) { value2.style.width = 150 + "px" }
let maxi = document.getElementById("maxi");
if (maxi) { maxi.style.width = 150 + "px" }
.bar div { float:left; color:white; padding:1ex; margin:0;
text-align:center; font-family:sans-serif; }
#value1 { background-color:#5b9bd5; }
#value2 { background-color:#70ad47; }
#maxi { background-color:#a6a6a6; }
<div class="bar">
<div id="value1">value1</div>
<div id="value2">value2</div>
<div id="maxi">maxi</div>
</div>
The JS may need to go inside a function that you call after items have loaded, e.g. <body onload='populate_widths()'>.
This finds each placeholder and assigns its width programmatically. It assumes each width is 150, which you can change with server-side data or else within the Javascript code.
The above snippet demonstrates how you can alter values using Javascript, but if you have static server-side values, you could just pass CGI variables to add the width right into the elements' style attributes. I don't know PrimeFaces or other Java-based server side code, but the resulting HTML would look like this:
.bar div { float:left; color:white; padding:1ex; margin:0;
text-align:center; font-family:sans-serif; }
<div class="bar">
<div style="width:150px; background-color:#5b9bd5">value1</div>
<div style="width:150px; background-color:#70ad47">value2</div>
<div style="width:150px; background-color:#a6a6a6">maxi</div>
</div>
Related
I have a Blazor app, right now, a default "/" page and one called "/rtdpage"
No problem getting the background on the "/" to black
html, body {
background-color: black;
}
Problem is that I'm looking to get the /rtdpage styled with a
background-color:rgb(189, 191, 193);
I can't figure out how to apply a class to the page/app/body, or get the background to change
Tried:
#page "/rtdpage"
<style>
background-color:rgb(189, 191, 193);
</style>
<h1>This is the RTD page</h1>
#code {}
Also dried putting a <div> around and setting it to 100% width and 100% height, but still leaves most of the page black
Obviously, I'm a newbie at this
Second try,
You can create 2 components ;
YellowComp
#page "/Yellow"
<style>
body {
background-color: yellow;
}
</style>
<h3>YellowBackground</h3>
#code {
}
BlueComp
#page "/Blue"
<style>
body {
background-color: blue;
}
</style>
<h3>BlueBackground</h3>
#code {
}
When you then go these pages; you see this;
In case you would like to have a complete blue or yellow page , without anything else, you need to change the MainLayout.razor component to this :
<div class="main">
<div class="content px-4">
#Body
</div>
</div>
You can add background color with inline CSS in main class the color as per your choice like this in MainLayout.razor.
div class="main" style="background-color: #F8F9FB"
Quite straight forward, is there a way to know whether an element has been wrapped because of flex-wrap and therefore style it differently?
I would use javascript or jquery to achieve this.
My approach would be:
get the offsetTop of the element using :first-of-type selector.
use the each method of jquery to run through all elements and compare if offsetTop of $(this) is different of the offsetTop value you got on step1.
gotcha
Provide some code if you need help developing it.
You can make the different class with styling that should be applied to that flex-wrap property. You can manage these classes by javascript. Please check the implementation of this approach as:
Here is the code where 2 classes are made, flex-wrap-blue which set flex-wrap to wrap and change color to blue and other class is flex-wrap-green which set flex-wrap to wrap-reverse and change color to green. I am managing these 2 classes by javascript as show the code below:
HTML Code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<button id="btn-wrap">Apply Wrap</button>
<button id="btn-wrap-reverse">Apply Wrap Reverse</button>
<br />
<div class="large-box">
<div class="small-box">One</div>
<div class="small-box">Two</div>
<div class="small-box">Three</div>
<div class="small-box">Four</div>
</div>
</body>
</html>
CSS Code:
.large-box {
display:flex;
width:100px;
border:1px solid #f00;
height:100px;
padding:1% 0 1% 0;
box-sizing:border-box;
}
.small-box {
width:30px;
border:1px solid #f0f;
height:20px;
padding:1%;
}
.flex-wrap-blue {
flex-wrap:wrap;
color:#00f;
}
.flex-wrap-green {
flex-wrap:wrap-reverse;
color:#0f0;
}
Javascript Code:
function addClass(elem, className) {
if (!elem.classList.contains(className)) {
elem.classList.add(className);
}
}
function removeClass(elem, className) {
if (elem.classList.contains(className)) {
elem.classList.remove(className);
}
}
const btnWrap = document.getElementById('btn-wrap');
const btnWrapReverse = document.getElementById('btn-wrap-reverse');
const box = document.getElementsByClassName('large-box')[0];
btnWrap.addEventListener('click', function(){
addClass(box, 'flex-wrap-blue');
removeClass(box, 'flex-wrap-green');
});
btnWrapReverse.addEventListener('click', function(){
addClass(box, 'flex-wrap-green');
removeClass(box, 'flex-wrap-blue');
});
You can find the code working at my Codepen.
OK, what I need is fairly simple, though it's one of those things that I've never managed to get my head around when using CSS. So, here I am...
I'm using a custom template, built around Twitter Bootstrap.
This template features a section (declared as span6 row), containing small blocks (declared as span3). In the end, the sub-blocks form rows (2 blocks per row).
Here's a visual example :
The result is ok, though I'd still need one thing :
HOW do I make sure that 2 adjacent blocks have the exact same height? (e.g. The 1st block - "Some title here" - and the 2nd block - "Awesome work" - white rectangles being of the exact same height, no matter what the contents are... (much like the 2 last blocks)).
Any ideas?
P.S.
Please let me know, in case you need to know anything else about the "inner" structure.
I'm pretty sure it may have to do with "clear" fixes, etc - but to be honest I've never actually understood the... magic behind the trick... :(
Try the following:
1) Assigning parent div with "display:table" and child div's with "display:table-cell" like:
CSS:
.parent-div{
border: 1px solid grey;
display: table;
float: none;
}
.child div{
border: 1px solid grey;
min-height: 100%;
height: 100%;
display: table-cell;
float: none;
}
HTML:
<div class="span6 parent-div">
<div class="row">
<div class="span3 child-div">
......
</div>
<div class="span3 child-div">
......
</div>
</div>
2) You can also use "EqualHeights jQuery Plugin":
Include it your head by adding
<script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>
And call the function on your .parent-div as:
$('.parent-div').equalHeights();
For detailed usage and limitations, whether it is suitable for your website first read this and proceed.
<!-- ------------------------------------------
Bootstrap 2 : Markup
Credit : http://www.2scopedesign.co.uk/responsive-equal-height-columns-in-bootstrap/
------------------------------------------- -->
<div class="row">
<div class="span6">
<div class="content-box">
Content here
</div>
</div>
<div class="span6">
<div class="content-box">
Content here
</div>
</div>
</div>
<!-- ------------------------------------------
jQuery part
------------------------------------------- -->
<script>
//equal height plugin
$.fn.max = function(selector) {
return Math.max.apply(null, this.map(function(index, el) {return selector.apply(el);}).get() );
}
$(window).load(function(){
equalHeight();
});
$(window).resize(function(){
$('.content-box').css('height', '');
equalHeight();
});
function equalHeight(){
if ( $( window ).width() > 768 ) {
$('.content-box').height(function () {
var maxHeight = $(this).closest('.row').find('.content-box').max( function () {
return $(this).height();
});
return maxHeight;
});
}
else {
$('.content-box').css('height', '');
}
}
</script>
Set a min-width. So in your css have:
#whatevertheboxitscalled { min-width:100px; }
Obviously it doesn't have to be 100px, but whatever size fits best.
I want to show a div by hovering over its parent.
The code is quite big so I'll try to explain.
On the site there is a scrollable div (overflow:auto) which shows a table.
-> it shows 10 lines of the table and the rest (nearly 30) must be scrolled.
In every tr of my table there is a div(hover_over) that has a child-div (show_by_hower)
By hovering over the div (hover_over) the child-div (show_by_hower) should be displayed.
That works so far but the child-div (show_by_hower) is always under the scrolling div.
If I remove the overflow:auto; from the scrollable div it all works fine but I need the overflow auto.
#hover_over
{
position:relative;
width:20px;height:20px;
}
#hover_over:hover div
{
position:absolute;
display:block;
z-index:999;
width:310px;
height:125px;
}
#hover_over div { display:none; }
There is no other positioning in the code.
Here is a jsFiddle with one possible solution. I'm using jQuery's .hover() method to animate an element outside of the table and fill it with the content contained inside the table. This way, your pop-up element is not restricted to the bounds of the table.
Here is the jQuery code:
$(function() {
$(".hover_over").hover( function() {
hovDiv = $(this);
showDiv = $(".show_hover");
showDiv.html(hovDiv.children("div").html());
showDiv.css("top", hovDiv.offset().top)
showDiv.css("left", hovDiv.offset().left + hovDiv.width()).show();
}, function() {
$(".show_hover").hide();
});
});
And the HTML:
<div class="theTable">
<div class="hover_over">1
<div>I'm hidden! 1</div>
</div>
<div class="hover_over">2
<div>I'm hidden! 2</div>
</div>
<div class="hover_over">3
<div>I'm hidden! 3</div>
</div>
<div class="hover_over">4
<div>I'm hidden! 4</div>
</div>
<div class="hover_over">5
<div>I'm hidden! 5</div>
</div>
</div>
<div class="show_hover"></div>
And the CSS:
.show_hover {
display:none;
position:absolute;
background-color:black;
width:100px;
height:20px;
font-size:14px;
color:white;
}
.hover_over div { display:none; }
Update
Because you asked, I decided to make this work with plain javascript. It is not as easy to read, but the same idea applies: move the popup div outside the table and dynamically add the desired content and positioning with onmouseover and onmouseout event handlers.
Here is the new jsFiddle.
And here is the relevant code:
Javascript
(function() {
function hoverIn() {
var hovDiv = this;
var showDiv = document.getElementById("show_hover");
showDiv.innerHTML = hovDiv.children[0].innerHTML;
showDiv.className = "see";
var newTop = hovDiv.offsetTop + hovDiv.offsetParent.offsetTop + hovDiv.offsetParent.offsetParent.offsetTop;
showDiv.style.top = "" + newTop + "px";
var newLeft = hovDiv.offsetLeft + hovDiv.offsetParent.offsetLeft + hovDiv.offsetParent.offsetParent.offsetLeft + hovDiv.clientWidth;
showDiv.style.left = "" + newLeft + "px";
};
function hoverOut() {
document.getElementById("show_hover").className = "";
};
var hoverDivs = document.getElementsByClassName("hoverdiv");
for(var i = 0; i < hoverDivs.length; i++)
{
hoverDivs[i].onmouseover = hoverIn;
hoverDivs[i].onmouseout = hoverOut;
}
})();
CSS
#show_hover
{
display:none;
position:absolute;
top:0;
left:0;
}
#show_hover.see {
display:block;
background-color:green;
width:400px;
height:80px;
position:absolute;
top:20px;
left:20px;
}
Update 2
This answer is getting insanely long. Here's the new jsFiddle. This update allows you to hover over the shown div to interact with the objects inside. I made use of the basic idea behind the hoverIntent jQuery plugin, which is to place the onmouseout handler behind a setTimeout call that allows you half a second to move your mouse into the popup before it disappears. It's a bit fidgety, so you might play with the wait time until it does what you want.
Also, see this StackOverflow question if you want to just check to see where the mouse is at any given moment and trigger the show/hide behavior off that.
That said, here's the important part of the update:
var mouseInShowHover = false;
var showDiv = document.getElementById("show_hover");
showDiv.onmouseover = function() { mouseInShowHover = true; }
showDiv.onmouseout = function() {
mouseInShowHover = false;
showDiv.className = "";
}
function hoverOut() {
setTimeout( function() {
if( !mouseInShowHover )
showDiv.className = "";
}, 500);
};
Well, your JSFiddle example worked fine for me, so I'm assuming you're using IE8 or something that has very strict z-index rules.
Try adding this:
#divscroll tr:hover {
position:relative;
z-index:1;
}
JSFiddle example.
I'm just bit confused on css Id/class nesting.
sample code below:
1) #sprit-img {
display:inline;
border:1px solid #FFF;
text-decoration:none;
display:block;
float:left;
width:50px;
height:50px;
background-image:url(ig-sprite.png);
background-repeat:no-repeat;
margin:5px;
}
2) #sprit-img a.brew{
background-position:2px 0px;}
3) #sprit-img a.scc{
background-position:-295px 2px;}
in page i used like
4) <div id="sprit-img><a class="brew"></a>...</div> `
now i want to use it like
5) <div class="sprit-img"><a class="brew"></a> <span class="scc"></span></div>`
Questions
is it necessary to give anchor or any element tag in code line 2 and 3?
what would be optimal way to get line 5(if Q1 is true, to have in css class i removed # and place . but not working in my page)? is this correct
--
6) .sprit-img{.....same code..}
.brew{...same position..}
.scc{..same postion...}
and use it like in line 5 or
this is correct
7) .sprit-img{.....same code..}
.sprit-img .brew{...same position..} `
Thanks.
edit: I tried some mix put background-image from sprit-img to brew and scc and found that if i put style as in 6 the html part should be like
<div class="anything"><span class="sprit-img brew"></span></div>
and if i put style like in 7 html part should be like
<div class="sprit-img"><span class="sprit-img brew"></span></div>
but could not make it like 5 any idea ...
Q.1: No.
Q.2:
You need a way to target both types of things inside your div at once in order to apply the same bg image, as well as a way to differentiate them. There are numerous solutions.
As long as you're sure that anything nested inside sprit-img should take the background, you could do this:
<div class="sprit-img">
<a class="brew"></a> <span class="scc"></span>
</div>
#sprit-img * { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }
(note: * is the universal selector)
...though that could get you in trouble if you need any markup inside of those elements (everything would take the background image, and it would be a funky jumble)
So, if you are sure all child elements (nested only 1 level down) should take the background, but nothing inside of those elements should, then you can use the child selector ( > ) like this:
<div class="sprit-img">
<a class="brew"><span> some text></span>some other text</a>
<span class="scc">more text <strong>something important</strong></span><
</div>
#sprit-img > * { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }
if you want to avoid the universal selector (rendering could be slow on older machines or with earlier browser versions), you could alternatively use (with line 5 markup):
#sprit-img > a, #sprit-img > span { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }
...which would then only apply to anchors and spans inside of an element with id="sprit-img"
Or you coulld avoid tag-names altogether (if you are super render-speed conscious) (with line 5 markup)
#sprit-img .bew, #sprit-img .scc { background-image:url(ig-sprite.png) };
#sprit-img .bew { background-position:2px 0px }
#sprit-img .scc { background-position:-295px 2px; }
...which illustrates why the answer to your first question is "no"
# is an ID selector, . is a class selector. So you could change to:
.sprit-img {...}
.sprit-img .brew {...}
.sprit-img .scc {...}
and
<div class="sprit-img"><a class="brew"></a> <span class="scc"></span></div>
However, the real problem is your trying to use non-cascading properties in .sprit-img on the child elements. The first selector should be changed to .sprit-img .brew, .sprit-img .scc