I am looking for the next scenario in css where i will be able to check if a style is applied without using any javascript code. Example: If flex: wrap is applied add another style like gap: 5. All this computations should be done using only css. I inspected the documentation but i did not find something similar. Could somebody help?
You can directly use the "gap" css. If there is a flex property used, only then the gap property will work. So no harm in using the gap property by default. Why check for whether flex is used or not.
as far as I understand, to check a style is applied, it must use javascript code,
ex:
const box = document.getElementById('box');
// Check if CSS property is contained in Style
if (box.style.backgroundColor) {
console.log('value is', box.style.backgroundColor);
} else {
console.log('CSS property is not contained in style');
}
Related
It use from external CSS file.(google MDL)
And I want to cancel just -webkit-flex element.
How can I cancel only that line?
Removing A Style
If you want to remove a single specific style that is being applied to an element, you can simply set that style to an empty string :
// This would remove your specific style (i.e. -webkit-flex-wrap)
$('{selector}').css('{style}','');
This should remove the style entirely as mentioned in the documentation :
Setting the value of a style property to an empty string — e.g.
$('#mydiv').css('color', '') — removes that property from an element
if it has already been directly applied,
Setting Its Default
If you simply want to set it to it's default value, you could setting its value to initial (i.e. display: initial) or you should consider what value you want it to have and use that.
Consider Overriding
If you are already using these styles, then it may simply be easier to just override them to define the values you want to use :
.mdl-navigation {
display: {your-preferred-value}!important;
}
Setting the width of select2 using css is overridden by the javascript call of the select2
// javascript
$(function() {
renderSelect("select");
});
# HAML example (Rails)
= select_tag "countries", options_for_select(#countries), class: 'some-ignored-css-class'
related: How to control the width of select tag?
The problem isn't javascript, the issue is that you're not preserving the CSS.
The only way to set the width is to use CSS. Even your JS sets the CSS (.width):
The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). They both set the CSS "style" element
A better way is to either set the CSS on a "container" element, or make sure you're persisting the CSS whenever you call the renderSelect function:
Container
#app/assets/stylesheets/application.css
.container select { width: 50px; }
#app/views...
.container= select_tag "countries", options_for_select(#countries)
Using a container will allow you to set the CSS on the container, removing the need for the class on the select itself. Whilst it means adding a container div, it will give you the most autonomy.
--
JS
The alternative will be to change the renderSelect function to take the class of the current select & append it to the new element.
Since I don't know your renderSelect function, I can only provide that level of suggestion.
A solution is to javascript again
// javascript
$(function() {
renderSelect("select");
$("div#s2id_countries").width(300);
});
# HAML example (Rails)
= select_tag "countries", options_for_select(#countries), class: 'some-ignored-css-class'
ahh, Javascript, the cause of, and solution to, all of life's problems
(any improvements?)
I Konw I can use setStyleSheet() to set style in Qt.But I encountered a problem,when I used setStyleSheet() twice first styles lost,which are set by first use of setStyleSheet().
For exmaple,
setStyleSheet("QLabel{color:red;}");
…………
setStyleSheet("QLabel{border-image:url(……)}")
When I set border-image,the red color property lost.
I tried to solve it by using
setStyleSheet(styleSheet()+QString("QLabel{border-image:url(……)}"));
but it was the same that only the border-image property existed.
Must I add every style property when I use setStyleSheet(),although that I set it before.
Thanks for bearing my poor written English.Any tips will be appreciated.
You can set stylesheets without QLabel tag:
setStyleSheet("color:red;");
After setting one stylesheet property, you can add another property like:
setStyleSheet( styleSheet().append(QString("border-image:url(……);")) );
This is in response to your comment on the accepted answer.
You can prevent overwriting stylesheets properties by setting the constant values to the parent (permitting that the parent's style isn't being changed dynamically as well). Only set the values that you change with C++ to the child item.
parentWidget->setStyleSheet( "QLabel#yourLabel { color:red; }" );
yourLabel->setStyleSheet( "QLabel { border-image:url(...) };" );
This will retain all of the parents properties that have been set on the widget when you change the widget's stylesheet.
Furthermore, this removes the case of a very large string, which is possible in the accepted answer. Frequent changes will inefficiently append the string with previously defined styles that will not be used.
By using double column for the second entry.
ui->pushButton_2->setStyleSheet(
"QPushButton{background-color:red;color:white}\
QPushButton::hover{color:black}");
My code:
myTextItem = new TextItem();
myTextItem.setHint("Some text");
myTextItem.setShowHintInField(true);
myTextItem.setHintStyle("myTextItemHint");
My css:
.myTextItemHint {
color: gray;
}
My Problem:
My issue is that I can have that setShowHintInField(true) set OR my css getting applied, but not both.
I found more info about this on the link: http://forums.smartclient.com/showthread.php?t=14463 but I cannot come up with a common style / place for it, that would make the trick while the hint is inside the field.
My question:
What kind of css would I need in this case and how I tell the field to use it?
What I have tried:
With that setShowHintInField(true) line and without. Both cases: half of the solution is there. Not both halves.
FormItem has method setCellStyle() to set the style of specific cell.
Use
myTextItem.setCellStyle("myTextItemHint");
your CSS will look like this:
.myTextItemHint, .myTextItemHint input {
color: gray;
}
Override other properties also if needed
.textItem,.textItemFocused,.textItemDisabled,.textItemDisabledHint,.textItemError,.textItemHint
For more information on CSS, Please have a look at skin_styles.css that is already shipped along with standard skins in SmartGWT.
I am working with Magento which doesn't allow for classes on images in the visual editor; so I want to program it to automatically apply right margin to an image if the image has the property float:left ... and visa versa. Is this possible without using javascript?
If it's part of the style attribute, then sure: [style*='float:left']
No, there isn't a selector based on CSS properties, apart from scanning selecting on the style attribute - after all you set them with CSS.
The easiest way would be to set the margin-right property at the same place where you set the float property.
See also:
http://www.w3.org/TR/selectors/#selectors
http://dev.w3.org/csswg/selectors4/#overview
Assuming all of your styles are placed in an external stylesheet the answer's 'not without javascript'.
If, however, you're placing that specific style on the html (inline styles, that is) then what Kolink suggested does work.
Anyway, using javascript(jQuery) here's a possible solution: http://jsfiddle.net/joplomacedo/TECWM/
If you can't see the fiddle, it goes something like this:
if (el.css('float') === 'left') {
el.css({
'margin-left': '50px'
});
}