I've been trying to read the documentation, but I don't get it. There doesn't seem to be any stackoverflow questions too. Right now using Polymer v1.0 with MVC 5.
For example, let's take the paper-toolbar. I have this sample code:
<paper-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<span class="title">My Title</span>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="add">+</paper-icon-button>
</paper-toolbar>
How do I apply a white background to it?
In the polymer website:
I've seen that there are custom properties and mixins... but how do I use them?
For example, how would I override the "--paper-toolbar-background"? to make the background white?
Thanks!
The approach I recommend is having an element for styling purposes, for example an app-theme.html. Put it inside your elements directory and import it.
If your app-theme.html looks like the following, it should style your paper-toolbar properly:
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: var(--paper-blue-900);
}
</style>
I use this approach for the Paper elements. For custom elements I put the styling inside each element.
Though theoretically you could just take my above code and paste it just before you use the element, but this approach has the issue that the default styling is applied before, resulting in breaks.
Of course you could also just use a normal app.css file to style the paper elements, but then you would have to use the !important attribute to overwrite the default styling of the element. Don't recommend it though.
Hope it helps.
George
Related
I am trying to get VoiceOver to say something other than the specified text content in an HTML span element:
<span tabindex="0" class="myClassName" id="DateLabel" role="heading">1:02a</span>
Consider the case where I might like VoiceOver to say the full time text.
When I add the aria-label attribute, VoiceOver is still reading the text, despite desktop browsers like IE and Chrome correctly reading the aria-label instead.
When I add the aria-labelledby attribute plus a hidden aria label element, I am able to get VoiceOver to read the alternate narration, and NOT the text content. However, I find this only works if the aria-role is a widget role like button or link. This is bad because I don't want to imply to users that this is an interactive element they can activate. VoiceOver annoyingly appends "button" to the end of the narrated sequence. I would prefer to use a structural role like "heading" but then VoiceOver just reverts reading the text content instead of reading my hidden narration.
Please help! I've been bashing my head against this but I simply cannot stand iOS's non-standard implementation of ARIA. I don't understand why they must be different from desktop browsers for something so simple but they are in so many places and I cannot find a good document outlining the exact behavior anywhere.
You can use aria-label like this:
<span tabindex="0" class="myClassName" id="DateLabel" role="heading" aria-label="1 0 2 am">1:02a</span>
However, why are you setting tabindex to 0? For a heading this is not a good practice because screen reader users can navigate between headings using the keyboard commands. Also, you will want to set aria-level on your heading to indicate what level it is.
The best markup to use for this is:
<span class="myClassName" id="DateLabel" role="heading"
aria-level="2" aria-label="1 0 2 am">1:02a</span>
Update: This appears to no longer work for at least some versions of VoiceOver, it will read the visible content and ignore the aria-label. See this bug - https://bugs.webkit.org/show_bug.cgi?id=160009
In my case I used for iOS VoiceOver:
<span role="text" aria-label="audible text">visible text</span>
it is important to add the attribute role="text" so that VoiceOver reads the attribute aria-label=""
In this case you could use a pattern that hides the visual text from screen-readers and hide the screen-reader text from showing visually. Like this:
<span aria-hidden="true">1:02a Dec</span>
<span class="visually-hidden">1:02 AM December</span>
and use CSS to hide .visually-hidden for example like this:
.visually-hidden {
position: absolute;
left: -999em;
}
Don't use display:none since it removes the element from being sent to the accessibility API.
As a side note: use role="heading" carefully if ever, and if so use an appropriate aria-leve="#" number/level.
You could use the abbr html element.
For example :
<abbr title="HyperText Markup Language">HTML</abbr>
I am trying to show an image in a tooltip, but all i get is the plain text. Code :<s:textfield label="cvv" name="cvv" tooltip="<img src='%{images}/cvv_34.gif'>" />
When I hover on my tooltip image all I see is the text <img src='xyz.com/cvv_34.gif'>
I have tried jsTooltipEnabled and it doesn't help. I am able to open the image in a separate browser, so image path's, etc are all good.
Any help would be appretiated.
That is because the input is escaped and I think it is not good practice to reference an image there. If you like fancy Tooltips take a look at the jQuery and css frameworks you are maybe using.
jQuery Ui Tooltip
Bootstrap Tooltip
This is not depends on struts, but I recommend qTip2.
http://qtip2.com/
With this you can show almost everything in a tooltip. Simple text, or a complete html enabled content. Also you can make this tooltip ajax enable too.
I'm trying to apply jQuery UI Selectable to a portion of my website. However, I do not see either the selection box while dragging the mouse, nor does the color of selected li elements change.
So to understand the problem, I went back to the source:
http://jqueryui.com/demos/selectable/
I see (using IE9 developer tools) that a style .ui-selected is applied to selected elements. Using Trace Styles, IE shows that background-color is originally defined in jquery-ui.css but overridden (ultimately) by #selectable .ui-selected. However, IE does not show the source of #selectable .ui-selected. Searching the jQuery UI style sheet I reference, jquery-ui-1.8.18.custom.css, finds no mention of ui-selected, nor do I find it in jquery.ui.selectable.css.
Where exactly is the demo page getting the CSS for the background color?
I found one of the other jQueryUI demos defines the style for those classes in a custom style sheet, so I ended up following that lead.
http://jqueryui.com/demos/selectable/#serialize
It seems odd that those styles are not part of jQueryUI Themeroller. Perhaps that will change in the future.
I have an issue where due to some elements loading faster than others, the page looks broken for a few seconds at the start. An example is the CSS Pie behavior that allows me to do curved corners in IE, it appears before it becomes curved which looks bad. What would be ideal would be it somehow knowing when everything is loaded and then appear all at once, possibly including some kind of elegant visual way of not making the user feel impatient... any ideas or common tricks for doing this?
You could add a css class to the <body> tag by default and use some javascript to remove that css class once the page is loaded?
<body class="notready" onload="this.className = '';">
</body>
with some css classes defined to hide the things you do not want to show just yet:
body.notready .myclassname { display: none; }
I'm learning about the Framework Icons in jQuery UI.
<span class="ui-icon ui-icon-circle-minus"></span>
produces an icon of a minus sign inside a circle.
Using the ThemeRoller Firefox Bookmarklet, I was able to change the color of the icon to red (to make it look like a delete button).
Q: How can I make one jQueryUI icon be red and another one another color?
<span class="ui-icon ui-icon-circle-plus"></span>
I'd like to make this one green.
Use the ui-state-... classes to change the state of the element with the icon. You'll need to design your theme so that items in different states (highlight,hover,active,error,default) have different colors.
<span class="ui-icon ui-icon-circle-plus ui-state-highlight"></span>
I would recommend against using the states this way (just to change colors, that is). I'd use the states semantically and let the icons render as needed to be consistent with the state. If I specifically needed red/green icons, I'd generate those icons specifically as images and simply use them directly instead of trying to design the theme to get different color choices just for those icons.
For what it's worth, I think the FamFamFam Silk icons integrate pretty well with jQuery UI.
You can't do this, at least not in the context of ThemeRoller. Themeroller uses one sprite image for this...a large image that contains all the Icons.
You can make another theme, same it's spritemap image to your images folder, and go into your jQuery UI CSS and change the .ui-icon-circle-plus background-image property.
It should look like this:
.ui-icon-circle-plus { background-position: 0 -192px; }
It would need to look something like this:
.ui-icon-circle-plus {
background-image: url(RedIcons.png);
background-position: 0 -192px;
}
You can look at the .ui-icon styles for the image it's currently using.