I would like to deliberately set an scss variable with a string as a property value which will be read as invalid and therefore will have no effect on my ui. E.g.
$invalid: "thiswontwork";
.my-element { background: $invalid; }
This value will just be considered as invalid and ignored.
I know that my variable would throw an error if it were used in a function like "lighten()".
Is there any other scenario where adding a string like "thiswontwork" as my property value could cause an issue?
There are multiple scenarios. For example, I would like to mention three:
color
content
display
As with background, the same error comes for color.
With respect to content, there won't be any error with CSS syntax but you can visibly see it's messed up.
With display, the set of enumerated values is what you need to use. Here it might throw an error, invalid value for display.
Related
I have an element that has been created via DOM.createTable(), which creates a simple <table> element without cellspacing. When I inspect that element in Chrome, I can see that it has the default style border-spacing: 2px that comes from the user agent stylesheet. And in some of my application themes that value has been overridden with border-spacing: 0. The computed styles for the element don't show border-spacing, but there is -webkit-border-horizontal-spacing: 2px (or 0 if using an overriding theme) that points back to the border-spacing style.
I'm curious, how could I check at run-time what the current spacing value is?
Here are some of my attempts to print the value to console (the first set in particular is pretty obvious since I haven't called setCellSpacing -- if I had, the first option would of course return that value):
((TableElement) element.cast()).getCellSpacing() -- empty String
element.getStyle().getProperty("cellspacing") -- undefined
element.getPropertyInt("cellspacing") -- 0
element.getStyle().getProperty("border-spacing") -- Error: java.lang.AssertionError: The style name 'border-spacing' should be in camelCase format
element.getStyle().getProperty("borderSpacing") -- empty String
element.getPropertyInt("borderSpacing") -- 0
element.getPropertyInt("border-spacing") -- 0
element.getStyle().getProperty("webkitBorderHorizontalSpacing") -- empty String
element.getPropertyInt("webkitBorderHorizontalSpacing") -- 0
element.getPropertyInt("-webkit-border-horizontal-spacing") -- 0
These values don't change whether I use border-collapse: collapse or border-collapse: separate, but of course only the latter actually displays the spacing. The computed -webkit-border-horizontal-spacing value also doesn't change in either case.
If I try this in Firefox, it naturally doesn't have the webkit style, or even default border-spacing style, but if I set it in a theme it does display the border-spacing itself in computed styles. Still didn't give me any usable values with an incomplete selection of the calls listed above.
I'm clearly missing something pretty basic here.
You can try to use elemental2 to get the element as an HTMLElement then get its CssStyleDecleration then get the property value
elemental2.dom.HTMLElement element = //get the element as elemental2 HTML element
String propertyValue = element.style.getPropertyValue("border-spacing");
make sure to use the elemental2 version that works with gwt 2.8.2, if the style property for HTMLElement is not available for that version of elemental2 you can always manually write the JsInterop to add it.
I have a website I'm building and I want to have a custom cursors specified for each property like hand, wait, pointer, default, move and so on...
I'm build an operating system website so I want to have custom cursors.
Here is the CSS code.
* {
cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
cursor:url("../.drive/system/visual/cursors/hand.cur"),hand;
cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
cursor:url("../.drive/system/visual/cursors/move.cur"),move;
cursor:url("../.drive/system/visual/cursors/move.cur"),all-scroll;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),col-resize;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),e-resize;
cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),w-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),row-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),n-resize;
cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),s-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),se-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),nw-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),sw-resize;
cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),ne-resize;
cursor:url("../.drive/system/visual/cursors/move.cur"),grab;
cursor:url("../.drive/system/visual/cursors/move.cur"),grabbing;
cursor:url("../.drive/system/visual/cursors/unavailable.cur"),no-drop;
cursor:url("../.drive/system/visual/cursors/unavailable.cur"),not-allowed;
cursor:url("../.drive/system/visual/cursors/text.cur"),vertical-text;
cursor:url("../.drive/system/visual/cursors/text.png"),text;
cursor:url("../.drive/system/visual/cursors/wait.cur"),wait;
cursor:url("../.drive/system/visual/cursors/help.cur"),help;
cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}
The only cursor that happens to load is the one at the bottom (crosshair)
I've also specified some PNG cursors aswell and they did not change the outcome.
I tried putting this into html,body{} and div{} but again nothing worked.
I want something like on Windows93 but without JavaScript
If there is no CSS-only method then I can accept JavaScript ones. But please only vanilla-js.Thanks!
The cursor values are overwriting each other. This means that the last value is the only one that works, as it is the last one to overwrite the cursor value.
The word that follows the URL is a fallback keyword. This means that if the image cannot be found or rendered, the cursor specified by the keyword will be drawn.
For example, with the property cursor: url("../.drive/system/visual/cursors/precision-select.cur"), crosshair;, the browser will attempt to draw the cursor specified in the URL, but if it cannot it will use the default crosshair cursor.
To get the browser to display different cursors you will need to specify the cursor for each element. For your default cursor you would have:
* {
cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
}
To get a pointer over links you might then do:
a {
cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
}
For crosshairs on a particular element you might try:
.target-element {
cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}
You need to specify the cursor property for each element that you wish to have a changed/custom cursor. Using a universal selector for the default cursor ensures that you only specify the property for elements that require it.
I am getting above error in my react project when chrome version is updated to 74 (latest version).
The root cause of this issue is described here. Essentially this happens when you pass style property of some elemnt as string or array. Like style="string" or style={[array]}. This may seem not relevant (I don't think that someone intentionally try to send string or Array to style property), but in my case this was root cause.
To find error I recommend to carefully investigate your code with debugger in Chrome or other browser.
Below is example of my error
I erroniously set styles.radioButton (which is used as value for style property for some element) using spread operator ...spacing.xxSmall, but spacing.xxSmall is just a string and spreaded to array with chars as array members. Previously properties with indexes (0, 1, 2, ...) of style has been ignored, but now site is crushed.
I work with Angular libraries and some of them does not support inline styles now (for me it was ngx-avatar and it not working on Firefox and chrome: 74)
before:
<ngx-avatar style="border-radius="50%"></ngx-avatar>
after:
<ngx-avatar [style.border-radius]="'50%'"></ngx-avatar>
I think you can try the same for React.
In my RN Expo Web application I was getting this error while doing something like
style={{ padding: 5, ...props.style }}
I Realized that passing prop named "style" and then using it as inline style was causing this error. What resolved it for me was using a different name for the prop and doing something like ...
style={{ padding: 5, ...props.listSectionStyle }}
Merely changing prop name from 'style' to anything else like 'listSectionStyle' (or any of your choice) should resolve if it is due to above stated reason.
Ref: link shared by Fyodor in his reply helped understand the real issue.
I was getting this error with prime ng's <p-skeleton>. What I was doing is passing a style directly to the skeleton like below:
<p-skeleton width="97.5%" height="20rem" style="margin-bottom: 2rem;"></p-skeleton>
So instead of using style directly I used the class property to give the margin bottom (my class was already defined). This removed the error for me. And updated line is as follows:
<p-skeleton width="97.5%" height="20rem" borderRadius="16px" class="mb-40"></p-skeleton>
For Expo/RN
You're probably giving an array of malformed stylesheets this way:
<compo style={[foo, biz, bar]} />
What you need to do is flatten your stylesheets:
import * as Native from 'react-native';
<compo style={Native.StyleSheet.flatten([foo, biz, bar])} />
I have this strange code:
<h1>Firmware 0.6 <span="postdate">April 02, 2015</span>
</h1>
How can I change only this certain span that has ="postdate" in it with CSS?
The problem occurs in a widespread template in the posttime of for example: http://luebeck.freifunk.net/2015/01/07/announce-0.6.html
the main source in github is corrected already, But I wonder how to fix such with only access to the CSS file.
That's not valid HTML.
If you validate it using an HTML validator, you will receive the following:
an attribute specification must start with a name or name token
An attribute name (and some attribute values) must start with one of a restricted set of characters. This error usually indicates that you have failed to add a closing quotation mark on a previous attribute value (so the attribute value looks like the start of a new attribute) or have used an attribute that is not defined (usually a typo in a common attribute name).
For what it's worth, you can technically select it by escaping the =/" characters.
Unfortunately, this will also select all succeeding elements due to the syntax error in the HTML.
span\=\"postdate\" {
color: red;
}
<span>Other span</span>
<span="postdate">April 02, 2015</span>
<p>Some paragraph</p>
<span>Everything appearing after the invalid span will get selected due to the syntax error!</span>
Ignoring the weirdness and considering it just another span there's usually another way to select it as it has a unique place in the DOM (though what that is may be unpredictable with dynamically created content such as you get in a CMS).
I'm guessing you've thought to target any ancestor items with an id attribute or determine if there's a way to target it through ancestors without affecting sibling spans or spans that sit within a similar structure elsewhere? Basically - does it sit within a unique structure in some way?
If not then you could also try to target it through span:nth-child(5). There's also a fist-child and last-child. This may help uniquely target it within the overall structure. https://css-tricks.com/useful-nth-child-recipies/
You could also try to enter an inline script in the html view of the wysiwyg (a bad CMS may allow this!) which will allow you to check the content of spans and do something to if it matches (like add a class or id for a styling hook).
Where can I find the aspNetDisabled class default properties system color values? A ddl/select control background property is not "grayed" out when ddl.Enabled=false. For aesthetic purposes I want it to look similar to other disabled controls.
I can change the background of a DDL in the css with:
Select.aspNetDisabled
{
background-color:ScrollBar;
}
Setting all background colors to the same value like this:
.aspNetDisabled
{
background-color:ScrollBar;
}
[surprisingly but makes sense now] is not a solution. Radio buttons and checkboxes have more than its "input area" grayed since the background for them consists of more than an input area. A rb becomes a grayed out square with a grayed out circle. I have tried ever possible SYSTEM COLOR that is available in VS2010 style builder color picker and none of them match. I can view the source and get the color there, but a hard coded value will not necessarily be identical on different machines. I like the default functionality of the aspNetDisabled class and only need to override the background for ddl's.
The aspNetDisabled deafult grayed out system color is "ButtonFace [in .css and buttonface from source]! I wrote a Javascript function to get the background color of a disabled TextBox. I tried the same code yesterday, but failed because of browser specific Javascript functions.
Chrome did not like the property string I was passing to currentStyle[] - received an undefined property error:
var txtBx = $get('<%=txtBx.ClientID %>');
var prop = "background-color"; //also tried backColor and many other variations
strValue = txtBx.currentStyle[prop];
alert("strValue" + strValue);
The getComputedStyle method worked, but of course that is not what I wanted. I ran the same Javascript using ie and was able to get the currentStyle[prop] value.
aspNetDisabled is simply a variable for a class/.css. It would be nice to be able to see its values. I searched the Framework and the "net" yesterday for any related .css files/classes and for the string "aspNetDisabled". The only matches I encountered were aspNetDisabled in WebControls.cs and a WebAdminStyle.css under the 4.0 dir. I also tried to use the debugger, but could not find the style properties for "txtBX" as I expanded each layer.
I guess writing Javascript a function to loop through all properties for each type of "disabled" control would accomplish that. There is probably a way to write a .net class to find all properties and their values of a .css class too.
It is unclear to me why the background color of a DDL does not get modified when disabled...
I hope this helps someone!