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.
Related
I need to select the body element when it has a class beginning with post-type- but not select it when there's also a class beginning with taxonomy-. Does anyone know how to get this to work?
body[class^="post-type-"],
body[class*=" post-type-"] {
&:not([class^="taxonomy-"]),
&:not([class*=" taxonomy-"]) {
.widefat {
.check-column {
display: none;
}
}
}
}
EDIT: 0stone0's answer below helped me realize the CSS it was outputting was completely wrong, so this new approach is working well:
body[class^="post-type-"]:not([class^="taxonomy-"]):not([class*=" taxonomy-"]),
body[class*=" post-type-"]:not([class^="taxonomy-"]):not([class*=" taxonomy-"]) {
.widefat {
.check-column {
display: none;
}
}
}
div[class*='post-type-']:not([class*="taxonomy-"])
This pure CSS should target the desired element
Select classes that contain post-type-, but not() containing taxonomy-
div[class*='post-type-']:not([class*="taxonomy-"]) {
border: 1px solid red;
}
<div class='post-type-something'>post-type-something</div>
<div class='post-type-something taxonomy-foobar'>post-type-something taxonomy-foobar</div>
<div class='taxonomy-foobar post-type-something'>taxonomy-foobar post-type-something</div>
Note: Demo uses <div> instead of <body> and applies a border when targeted
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>
I want my css class to change based on condition. I'm trying to use this:
<div *ngIf="dropDownBg==='Active'">
<style type="text/css">
.ui-select-toggle{
background: green !important;
}
</style>
</div>
<div *ngIf="dropDownBg==='Suspended'">
<style type="text/css">
.ui-select-toggle{
background: red !important;
}
</style>
</div>
<div *ngIf="dropDownBg==='Disabled'">
<style type="text/css">
.ui-select-toggle{
background: grey !important;
}
</style>
</div>
But this doesn't work. By default browser seems to be ignoring and divs with *ngIf and only the last style overrides the others. Below is the browser interpretation:
UPDATE: This scenario arose because I'm using ng-select dropdown which internally uses class 'ui-select-toggle'over which I don't have any control. So WEIRD people downvoting this question, please take a note of that.
This is the code:
<div style="min-width: 200px;position: absolute;right: 0">
<ng-select
[items]="items"
(selected)="selected($event)"
[active]="selectedItem"
(removed)="removed($event)"
placeholder="Select a number">
</ng-select>
</div>
You can't dynamically change stylesheet of the document like this. Instead, define classes for possible situations and change the toggle's class.
Try something like this:
.ui-select-toggle { /* whatever */ }
.ui-select-toggle.suspended { background: red; }
.ui-select-toggle.active { background: green; }
And then change class of the toggle:
<div
class="ui-select-toggle"
[class.suspended]="dropDownBg==='Suspended'"
[class.active]="dropDownBg==='Active'"
>
</div>
An element can have several CSS classes, so that you can define common properties in main class (ui-select-toggle) and extra properties specific for each state in the secondary class.
In your case you must create 3 styles
and you use the directive
[NgClass] = "{style1: condition, style2: condition, style3: condition}
If it's only one property (here being background), you can do this :
<div [style.background]="...">...</div>
In your case, it could be :
<div [style.background]="dropDownBg === 'Active' ? 'green' : dropDownBg === 'Suspended' ? : red : dropDownBg === 'Disabled' ? 'grey' : 'black'">...</div>
With black being your fallback color.
I'm trying to style the root element of a polymer element with css. Take the counter-click for example. If I have a polymer element in my main html and I want to give it a size (say width and height.) I try to use a global css in my main html like
click-counter{
width:100px;
height:100px;
}
This doesn't work.
I also tried to style inside the polymer element like
<polymer-element name="click-counter" attributes="count">
<template>
<style>
#host{
click-counter {
width:100px;
height:100px;
}
}
...
This doesn't work either. Does anyone know how am I gonna style the element with css?
(I'm using dart 0.8.1.2)
Thanks,
Yi
The click-counter is composed of a button and a text input. There is no div that holds the 2 together. So if you are setting the width and height on the component, what are you really setting it on?
<polymer-element name="click-counter">
<template>
<button on-click="increment">Click Me</button>
<p>You clicked the button {{count}} times.</p>
</template>
<script type="application/dart" src="click_counter.dart"></script>
</polymer-element>
In case there would be a div wrapping the button and the text input, you could set the width of the div in the component like this:
<polymer-element name="click-counter">
<template>
<style type="text/css">
div{
width:100px;
border-style:solid;
background-color: #FF9900;
font-weight: bold;
}
</style>
<div>
<button on-click="increment">Click Me</button>
<p>You clicked the button {{count}} times.</p>
</div>
</template>
<script type="application/dart" src="click_counter.dart"></script>
</polymer-element>
You can also declare a div style on the index file, but then you have to set applyAuthorStyles to true on the component.
#CustomTag('click-counter')
class ClickCounterElement extends PolymerElement with ObservableMixin {
#observable int count = 0;
get applyAuthorStyles => true;
void increment(Event e, var detail, Node target) {
count += 1;
}
}
This would affect all divs on the page though. I'm not sure how you would select only the root div in the click-counter component.
Is this what you want to do?
#host {
:scope {
...
}
}
See this section of the tutorial: Styling a custom element
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