I have a boolean array that I am displaying in a razor foreach loop. Within the loop I am displaying the different values within the array. Is it possible,if so how, to change the css based on the value it is displaying?
For example
if (#status == true) THEN color = green; if (#status == false) THEN color = red.
If I understand your question correctly, you could add a data-attribute to the HTML element and alter the value (for example with Javascript) to/from "true/false" and use that in your CSS like so:
<element data-status="true">Content</element>
<element data-status="false">Content</element>
[data-status="true"] {
color: green;
}
[data-status="false"] {
color: red;
}
$('.test').each(function() {
if(parseInt($(this).css('font-size')) > 16) {
$(this).css('color', 'green');
}
});
.test {
font-size: 18px;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="test">Javascript manipulation: Green when largen than 16px</p>
I came across this question having the same problem, however I have implemented another solution, using c#/razor/css and no javascript. Someone might like this better.
First: define the possible values as an enumeration:
public class enum MyRateTyp{
Level1,
Level2,
Level3
}
Second:
Find a place where, given the number on which the style will be based, the conversion will take place. In my case I added an extension method to the int type.
public MyRate Evaluate(this int i)
{
MyRate answer = MyRate.Level1;
if(i<50)
{
answer = MyRate.Level1;
}
.
//All if statements here
.
if (i>100)
{
answer = MyRate.Level3;
}
return answer;
}
Third: On your .css file, define the style for each possible value, like so:
.Level1{
/*Style here for level 1*/
}
.Level2{
/* Style here for level 2*/
}
/*
Other Styles here
*/
Finally On the Razor page, assign the extension method to the css class of the element you want to change the style based on the value.
For example.
The level is <p class="#(myInt_variable.Evaluate())"> #(myInt_Variable) </p>
It is possible to change the color by putting an event on the box. This is done in javascript "AddEventListener"
Related
I'm trying to select input elements of all types except radio and checkbox.
Many people have shown that you can put multiple arguments in :not, but using type doesn't seem to work anyway I try it.
form input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Any ideas?
Why :not just use two :not:
input:not([type="radio"]):not([type="checkbox"])
Yes, it is intentional
If you're using SASS in your project, I've built this mixin to make it work the way we all want it to:
#mixin not($ignorList...) {
//if only a single value given
#if (length($ignorList) == 1){
//it is probably a list variable so set ignore list to the variable
$ignorList: nth($ignorList,1);
}
//set up an empty $notOutput variable
$notOutput: '';
//for each item in the list
#each $not in $ignorList {
//generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
$notOutput: $notOutput + ':not(#{$not})';
}
//output the full :not() rule including all ignored items
&#{$notOutput} {
#content;
}
}
it can be used in 2 ways:
Option 1: list the ignored items inline
input {
/*non-ignored styling goes here*/
#include not('[type="radio"]','[type="checkbox"]'){
/*ignored styling goes here*/
}
}
Option 2: list the ignored items in a variable first
$ignoredItems:
'[type="radio"]',
'[type="checkbox"]'
;
input {
/*non-ignored styling goes here*/
#include not($ignoredItems){
/*ignored styling goes here*/
}
}
Outputted CSS for either option
input {
/*non-ignored styling goes here*/
}
input:not([type="radio"]):not([type="checkbox"]) {
/*ignored styling goes here*/
}
Starting from CSS Selectors 4 using multiple arguments in the :not selector becomes possible (see here).
In CSS3, the :not selector only allows 1 selector as an argument. In level 4 selectors, it can take a selector list as an argument.
Example:
/* In this example, all p elements will be red, except for
the first child and the ones with the class special. */
p:not(:first-child, .special) {
color: red;
}
Unfortunately, browser support is somewhat new.
I was having some trouble with this, and the "X:not():not()" method wasn't working for me.
I ended up resorting to this strategy:
INPUT {
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
/* styles that reset previous styles */
}
It's not nearly as fun, but it worked for me when :not() was being pugnacious. It's not ideal, but it's solid.
If you install the "cssnext" Post CSS plugin, then you can safely start using the syntax that you want to use right now.
Using cssnext will turn this:
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Into this:
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}
https://cssnext.github.io/features/#not-pseudo-class
I have created a table in Eclipse with the help of Vaadin.
I managed to remove the borders of the table with following line:
tblResetButton.addStyleName(Reindeer.TABLE_BORDERLESS) ;
but this still leaves me with a vertical line like this:
Is there a way to hide all the cell borders? And an extra bonus, would it be possible to give the first cell (the one with "Gebruiker") the color #F4F4F4 and the second cell (the textbox) the color #E2E2E2
EDIT:
the formlayout would be good, but I can't seem to get the background colors working so I reverted to the tables. This is the code:
JAVA
tblReset.addContainerProperty("Gebruiker", String.class, null);
tblReset.setCellStyleGenerator(new Table.CellStyleGenerator() {
#Override
public String getStyle(Table source, Object itemId, Object propertyId) {
if("Gebruiker".equals(propertyId)){
return "style-name-with-black-background";
} else {
return "style-name-with-yellow-background" ;
}
}
});
CSS
.style-name-with-black-background {
background-color: black ;
}
.style-name-with-yellow-background {
background-color: yellow ;
}
Supposing the answer to cfrick's comment is no, looks like it depends on what theme you're using:
If it's valo (recommended for a few reasons and from the screenshot seems like you're already using it but not 100% sure) then there are 2 other styles, ValoTheme.TABLE_NO_VERTICAL_LINES & ValoTheme.TABLE_NO_HORIZONTAL_LINES.
In reindeer they seem to be missing so you'll probably have to manually define custom style(s) in your theme. See below a simple/naive attempt:
add the style to the table
table.setStyleName("no-vertical-lines-or-border");
while defining it in your theme
.v-table-no-vertical-lines-or-border .v-table-header-wrap /* remove header-table borders */,
.v-table-no-vertical-lines-or-border .v-table-body /* remove body-table borders */,
.v-table-no-vertical-lines-or-border .v-table-cell-content /* remove cell borders */ {
border: none;
}
As for the cells, you can use a style generator, again with your custom defined styles for each cell, something along the lines of:
table.setCellStyleGenerator(new Table.CellStyleGenerator() {
#Override
public String getStyle(Table source, Object itemId, Object propertyId) {
if("description".equals(propertyId)){
return "style-name-with-F4F4F4-background";
} else {
return "style-name-with-E2E2E2-background";
}
}
});
P.S.: Given that you're experimenting, and if you're working with Vaadin versions 7.2+, take a look at the support for font icons which may come in very handy at times, for example the embedded FontAwesome:
I know that this is super simple with jQuery, although I am after a CSS only solution (if possible).
I have a list of divs, with the last item being an error message. I have a simple filtering system, and if none of the divs match the selected filter, I would like to display the error div.
HTML Structure:
<div id="listHolder">
<div class="listItem" data-filter-class="["filter1"]"></div>
<div class="listItem" data-filter-class="["filter2"]"></div>
<div class="listItem" data-filter-class="["filter1"]"></div>
<div class="listItem" data-filter-class="["filter4"]"></div>
<div class="errorItem">Nothing to display here</div>
</div>
What I am trying to achieve:
If a div does not match any of the filters, my filter plugin gives them the class of inactive. Hence, I need to check if all divs with the class of listItem also have the class of inactive to give the errorItem class the style of display:block.
FYI I am using the Wookmark plugin for my list and filtering system. I am also using LESS.
Sure it's possible: http://jsfiddle.net/rudiedirkx/7b1kyfz3/3/
You want to hide the last item if a previous item is not hidden:
.listItem:not(.inactive) ~ .errorItem {
display: none;
}
The demo uses JS just to toggle the inactive class, not for display logic of the errorItem.
I still agree with all the smart people here though: JS can probably do this better. You're using it already anyway.
The problem you have is in your requirement:
I need to check if all divs with the class of listItem also have the class of inactive to give the errorItem class the style of display:block
While we can set a style for the final <div> element based on its preceding siblings, we can't (without knowing how many there might be) 'check if all divs' have the inactive class. We can, however, use the sibling combinator (+) and a cumbersome selector:
.errorItem {
display: none;
}
.listItem.inactive + .listItem.inactive + .listItem.inactive + .listItem.inactive + errorItem {
display: block;
}
This is, however, ridiculous (especially if there's a dynamic number of elements preceding the .errorItem element.
If there's a class-name applied for an element which does match the supplied filters, active for example, this is much simpler, and achieved by:
.errorItem {
display: block;
}
.listItem.active ~ .errorItem {
display: none;
}
Also, as pointed out in the comments, the negation operator is also available (though, obviously, it depends on implementation by the browser in use), which would lend itself to the selector:
.errorItem {
display: block;
}
.listItem:not(.inactive) ~ .errorItem {
display: none;
}
On the whole, I'd strongly suggest using JavaScript to support this functionality, especially since the use of Wookmark implies JavaScript (if not necessarily jQuery) use in the same site already.
Native JavaScript:
function hasPrecedingSibling (elem, state) {
if (!state) {
return false;
}
var found = false,
cur = elem;
while (cur.previousElementSibling && found === false) {
if (cur.classList.contains(state)) {
found = true;
}
else {
cur = cur.previousElementSibling;
}
}
return found;
}
[].forEach.call(document.querySelectorAll('.errorItem'), function (err) {
err.style.display = hasPrecedingSibling (err, 'active') ? 'none' : 'block';
});
I'm trying to hide certain tags by using one ID element, but seem like it only hide the first tag with the ID element that I used.
DEMO : http://jsfiddle.net/mgm3j5cd/
How can i solve this issue? I wanted to hide the tag only with the ID element that I've declared. Appreciated for helps
You have this tagged as CSS, so the following CSS in your page's stylesheet will work:
#hide {
display: none;
}
Edit:
If you must only use JavaScript, you can do the following. Keep in mind that your document is already technically invalid by having multiple elements with the same ID, so this approach may not work in every browser. (I tested with Firefox 32).
Working JSFiddle: http://jsfiddle.net/88yw7LL9/2/
function hideByID(string) {
var element = document.getElementById(string); // get first matching element
var array = [];
while(element) {
array.push(element);
element.id = string + '-processed'; // change ID so next call gets the next matching element
element = document.getElementById(string);
}
for(var i = 0; i < array.length; i++) {
array[i].id = string; // revert ID to previous state
array[i].style.display="none"; // hide
}
}
hideByID('hide');
The simplest solution should be to assign 'class' attribute to certain elements you want to hide, like :
.XXXX
{
display:none;
}
Perhaps, you want to specify some elements hidden with id, like :
#id1 , #id2
{
display:none;
}
or
div#id1 , div#id2 //more accurate
{
display:none;
}
but, unfortunately, you can't hide elements you want by using one ID.
Is there a way to style an ID based on a specific word in the ID name?
If I have something like this:
<div id="name-of-id.1234">Something</div>
<div id="name-of-id.5678">Something</div>
<div id="name-of-id.4321">Something</div>
Normally I'd style it like this:
div#name-of-id\.1234,
div#name-of-id\.5678,
div#name-of-id\.4321 {
color: #F0F;
}
But I'd MUCH RATHER do something like this:
div[# contains the word "name-of-id"] {
color: #F0F;
}
Is there a way to target a specific word in an ID like that?
I have very limited access to the html - I can add scripts/styles to the layout, but that's about it.
Use the CSS3 prefix substring matching attribute selector:
div[id^="name-of-id"] {
color: #F0F;
}
It is supported by all current browsers. For support in older version of IE, use the Selectivizr polyfill. There is also a selector for suffixes ([id$="..."]) and for general substrings ([id*="..."]).
If you can add javascript (and you use jQuery), you could add something like this:
$('div').each(function(){
if(this.id.match('name-of-id')) {
$(this).addClass('someClass');
}
});
Without jQuery, you could do:
var elems = document.getElementsByTagName('div');
for(var i=0; i<elems.length; i++) {
if(this.id.match('name-of-id')) {
this.className = this.className + 'someClass';
}
}
And then style them with a class:
.someClass {
/* your CSS styles */
}
Granted, running $('div') would be slow (as far as javascript is concerned) if your page contains a lot of them, so if you could narrow that selector down, this might be a more viable solution.
More to the point, there isn't a method I'm aware of to match partial ID names in CSS alone.