Please see my live site http://mozzor.com and hover over the circle icons at the top. Notice two effects that occur only in Firefox (I'm using FF23):
1) There is a blue underline added to the text of the tooltip
2) The text renders upon hovering, then after a moment, seems to blur itself.
I'm having trouble debugging this with Firebug...I can't find a css element that corresponds to either of these effects.
Just in case, here is some relevant code for how I style the tooltips:
// Variable currentSelect corresponds to hex color value
// selected in the jQuery widget seen at the top left side of the page
$('#notebookIcon,#pencilIcon,#headphoneIcon').tooltip().on("mouseover", function () {
var tooltip = $(this).next(".tooltip");
//Box
tooltip.find(".tooltip-inner").css({
backgroundColor: "#fff",
color: currentSelect,
borderColor: currentSelect,
borderWidth: "1px",
borderStyle: "solid"
});
//Arrow
tooltip.find(".tooltip-arrow").css({
//borderTopColor: currentSelect,
//borderLeftColor: currentSelect,
//borderRightColor: currentSelect,
borderBottomColor: currentSelect
});
});
EDIT: Second issue seems to deal with font aliasing slowly in Firefox. Issue still persists after trying several different fonts. For more information, see below:
Github issue: https://github.com/twbs/bootstrap/issues/10218
Bugzilla issue: https://bugzilla.mozilla.org/show_bug.cgi?id=909814
Your first problem is the underline, which is dictated by the CSS text-decoration property. I'm not exactly sure why it's happening on Firefox (Chrome seems to have it correct, because text-decoration for your menu items is set to none). Here's a quick fix, but I'll see if I can find the cause.
#iconrow a {
text-decoration: none;
}
About the second question: I don't understand why you can't do this with CSS.
Related
I am working with angularjs google chart API. I have multiple charts in my webpage. I want to make one of the charts h-axis labels to hide or make the labels font color to white so that it is not shown on the webpage. I went through the API but seems there is no such configuration options working right now.
Generated code:
Is there a option modifying the svg elements for that particular chart to hide the h-axis labels.
js code:
sample code tried but failed:
$scope.chart.options = {
timeline: {
showRowLabels: false,
},
hAxis: {title: 'Priority', titleTextStyle: {color: 'white',fontSize:'0'}},
};
I tried to change font size to 0 but even that didn't worked.
This is the selector i was able to craft. Hope it works for you.
If not please tell me.
#timeline div div div svg g:nth-child(3) {
display: none;
}
New to Polymer, and the docs seem a little 'light' on examples. I'm trying to style a dropdown menu so everything is white on a blueish background. Most things (tabs, toast, etc.) are working, but the dropdown-menu stubbornly refuses to show the little 'arrow' button in anything other than murky grey.
Example JSBin
The styling code is:
<style>
:host {
display: block;
/* Main vars */
--ki-teal: #4790A8;
--paper-tabs-selection-bar-color: #fff;
--paper-tab-ink: #fff;
/* Toolbar colours */
paper-toolbar.ki {
--paper-toolbar-background: var(--ki-teal);
}
/* Project select dropmenu colours */
paper-dropdown-menu-light.ki {
--paper-dropdown-menu-color: #fff;
--paper-dropdown-menu-focus-color: #fff;
--paper-dropdown-menu-button: {
color: #fff;
}
--paper-input-container-color: var(--ki-teal);
--paper-input-container-focus-color: #fff;
--paper-dropdown-menu-input: {
border-bottom: none;
};
}
/* Notifications */
#toastSave {
--paper-toast-background-color: var(--ki-teal);
--paper-toast-color: white;
}
}
</style>
But the --paper-dropdown-menu-button doesn't seem to have any effect, or I'm not using it right. Any guidance appreciated.
In addition, you'll see (at least on Chrome/Windows) that the underline bar when the dropdown has focus is not aligned properly with the active tab bar. I guess that's just a Polymer CSS glitch which will get worked out eventually, unless it's something I need to take care of in the <style> section as well?
Use --iron-icon-fill-color in your paper-dropdown-menu class if you want have other iron-icons also which you don't want to style, else you can style use it in host if you want.
Another way of doing it will be giving color to mixin --paper-dropdown-menu-icon. As per paper-dropdown-menu documentation it is
A mixin that is applied to the internal icon
Lastly, if you look at the code of paper-dropdown-menu-light you'll notice that icons have default value as --disabled-text-color. So, if you change this value that should do the trick for you. I'll recommend not to use this method as this is a default variable for material design theme and Polymer has used this as default value at lot of places. So, unless to know what you are doing avoid this method.
In Polymer if an element is using some other element internally you can always refer the style guide of internal element and use it directly. Like here we are using iron-icons styles to style the icon which is inside paper-dropdown-menu
I don't think Polymer has directly mentioned this in their styling guide but you can find this detail written at the end of styling details of paper-dropdown-menu and generalise it
You can also use any of the paper-input-container and paper-menu-button style mixins and custom properties to style the internal input and menu button respectively.
This is a most basic question about formatting text links in css
I have tried to do it myself. I got the hover to work -- at least in firefox. But can't get the default color to work. Only hover.
Please look at this development page http://ogrowby.com/ in firefox.
There is a menu about the middle of the page, called "Test Menu". Please click on that. Then, in the dropdown, go to "TEST LINK".
When you hover over it, the text color changes to Gold. That is fine. But its default text color is black and I want it to be white. I may also want to change the font size, etc. But the main thing is to get the css working to set the default text color for this class to WHITE. #ffffff.
Here's my css so far. The hover is working, but the default remains needs to be changed to #ffffff Only for the .roundedblue class. And it needs to work not only in firefox but other modern browsers.
Any help will be appreciated. Thanks
Rowby
.roundedblue:link,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: white;
}
.roundedblue:hover,
div#Maximenu_NEW_GRANDE ul.maximenuck2 li.roundedblue:hover span.separator {
color: #FFB300;
}
If that is the only link you want to change, you should add an id to it and change the id's css properties. If you want multiple elements to have the same properties add a class to the element (if it doesn't already exist).
Then simply edit its properties as you would normally.
color:white;
font-size:14px;
...
I simply changed the styles in inspector and it worked for me. added "style='color:white;'" to your span.
I have some buttons using <button>, which when clicked get a blue selected color!
Is there a way to remove this feature?
That is a default behaviour of each browser; your browser seems to be Safari, in Google Chrome it is orange in color!
Use this to remove this effect:
button {
outline: none; // this one
}
You can remove the blue outline by using outline: none.
However, I would highly recommend styling your focus states too. This is to help users who are visually impaired.
Check out: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible. More reading here: http://outlinenone.com
You can remove this by adding !important to your outline.
button{
outline: none !important;
}
This is an issue in the Chrome family and has been there forever.
A bug has been raised https://bugs.chromium.org/p/chromium/issues/detail?id=904208
It can be shown here: https://codepen.io/anon/pen/Jedvwj as soon as you add a border to anything button-like (say role="button" has been added to a tag for example) Chrome messes up and sets the focus state when you click with your mouse. You should see that outline only on keyboard tab-press.
I highly recommend using this fix: https://github.com/wicg/focus-visible.
Just do the following
npm install --save focus-visible
Add the script to your html:
<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>
or import into your main entry file if using webpack or something similar:
import 'focus-visible/dist/focus-visible.min';
then put this in your css file:
// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
outline: magenta auto 5px;
}
You can just set:
button:focus {outline:0;}
but if you have a large number of users, you're disadvantaging those who cannot use mice or those who just want to use their keyboard for speed.
Is there some way to define a text sprite with some more style options then just size and font as shown in the example?
{
type: "text",
text: "Hello, Sprite!",
fill: "green",
font: "18px monospace"
}
Specifically, I want to make it bold or underlined.
I tried a style config like this:
style: {
'text-decoration': 'underline'
}
I also tried setting it in the font config like this:
font: "underline 18px monospace"
Neither worked.
This sentence from the Ext.draw.Sprite#font config in the docs sounded promising but it is pretty cryptic:
Uses the same syntax as the CSS font parameter
I've been googling around for the CSS font parameter and haven't found much of use. Maybe if someone knows what that means they can shed some light on this.
The font css attribute will let you specify bold and italics, but underline is set using the text-decoration attribute. You'll need to use a style config:
{
type: "text",
text: "Hello, Sprite!",
fill: "green",
font: "bold 18px monospace",
style: {
textDecoration: "underline"
}
}
Working demo: http://jsfiddle.net/gilly3/WSQv9/.
Tested in Chrome and IE9. Firefox doesn't yet support underline in SVG.
For reference, here is the font parameter definition:
MSDN
MDN
I've never used extjs, but it looks like SVG to me. Unfortunately Firefox doesn't support text-decoration attribute on svg elements, so perhaps you are testing in Firefox but in Chrome it might be displaying fine with your style attribute.
The workaround for this would be drawing the underline manually with a line element. It is not difficult with javascript but I would have no idea of how to accomplish this the extjs way.