I am using Microsoft Fabric UI for build my Office WebApp:
http://dev.office.com/fabric/components/button
I want to change the color of a button, but if I change the color of it using some CSS, hovering effect is lost. What is the right way of changing the color of Microsoft Fabric controls?
Even I've had that question for more than a week now. It just seems like no one from the Office Fabric Teams (or even just those who know better) want to answer questions.
If you colorized your button manually using CSS, then just add the :hover to the CSS class like so:
.btn-color-red {
background-color: #FF0000; /* red */
}
.btn-color-red:hover {
background-color: #b50000; / * a darker red when hovered upon */
}
I apologize for this manual solution. Even I don't know how to do it using just Office Fabric classes and there are just no useful documentations out there.
Related
Hopefully the title makes this fairly self-explanatory.
Just a bit of background, I create and launch an aurelia modal dialog which appears on top of the parent window from where it is launched.
Is there a way to make the background (parent) window appear faded. I have done something similar in .NET environments, and just wanted to know if anything similar is achievable in aurelia?
Some example aurelia-dialog links:
https://www.tutorialspoint.com/aurelia/aurelia_dialog.htm
https://aurelia.io/docs/plugins/dialog#using-the-plugin
The answer to my question turned out to be on one of the aurelia forums:
https://github.com/aurelia/dialog/issues/84#issuecomment-239429527
It's a case up updating your css to include the background / opacity settings as follows:
ai-dialog-overlay.active {
background-color: black;
opacity: .5;
}
Having said this please be aware a breaking change had since been introduced whereby 'ai-dialog' was renamed to 'ux-dialog':
https://discourse.aurelia.io/t/trouble-with-aurelia-dialog-not-displaying-correctly/1382
So the code for your css should now read:
ux-dialog-overlay.active {
opacity: 0.6;
background-color: gray;
}
I found that this was all that was needed to make the background fade on opening the aurelia-based modal dialog, as well as un-fading on closing.
What is: the Best way to add validation ticks/cross in checkout /w autocomplete
We are looking to add those green check marks or ticks to checkout fornfields when data entry is valid.
we add validation class to the form
add observer that calls validation.validate
(And validation.validate adds CSS class)
then we set CSS background for validation-passed class to green tick image in background
This works fine ... Until we turn in autocomplete. In google chrome the yellow background auto fill overrides any background.
So now what?
- use CSS::after?
- use jquery after to add span class?
- try to outsmart google chrome
Any experiences to share on programming green ticks and red crosses on checkout form template?
Help appreciated
Take a look at Google Chrome form autofill and its yellow background
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
You may need to add 3 variations (normal - on site load, validation pass and validation fail)
I have made a website with Foundation-master wordpress theme, it looks good but I dont like how its behaving in other browser widths. Is there a way of making it non-responsive, or fixed to a certain width?
Thanks!
Sometimes it's necessary to deactivate the responsive features. For example if, like it happened to me twice already, a website is launching non-responsive and the optimization for smartphones/tablets is added later.
Foundation is an awesome framework even if you take out the responsiveness. The SCSS files are very well structured it comes with a library of very useful UI elements. It's a great choice for responsive and non-responsive sites if you ask me. Some people might also want to streamline their workflow and not jump between different frameworks depending on the project to keep costs low.
Anyways, here my two cents. This deactivated all responsiveness for me:
.row {
width: 62.5rem;
}
And then in the _settings.scss
$small-range: (0, 90em);
$medium-range: (0, 90em);
$large-range: (0, 90em);
This way we're essentially always seeing the large version. As far as I can tell this even works for top bar etc.
Foundation was built to simply create responsive websites.
Beside of the question why you use this framework if you don't want a responsive webseite, it's only possible if you start removing all the media queries in foundation css and by removing the viewport meta tag.
Maybe you should better invest this time to make your webseite responsive so that it also fits on smaller screens and mobile devices.
Although the question is marked as answered, I just wanted to give you a quick hint to prevent the Foundation 4 grid to act responsive, since we had also to deal with that.
In our case (SASS version) setting the width of the <body> element via css to the specific width of the grid and reducing the breakpoint in the SASS variable $small-screen to 1px worked fine.
Try to add a min-width in the body attributes like this:
html,
body {
font-size: 100%;
min-width: <value A>;
max-width: <value A>;
width: 100%;
}
(foundation.css)
Is there a way to style Tooltips in Google chart API? I've managed to only change the color of text using tooltip.textStyle. So is there any solution to change the white background to some other color (as shown on picture):
Test playground http://jsfiddle.net/nyNAg/
I found a solution through serendipity:
<style>
path {
fill: yellow;
}
</style>
Anyway, I did not find any configuration option for background in the google charts API.
Enable the tooltip to be handled by the HTML by writing this code in your options of google charts
CODE: tooltip: { isHtml: true } (,) add a comma if needed. :)
Now you can style tooltip using HTML and css. :)
/CSS Styling/
To style the tooltip box :
div.google-visualization-tooltip {}
To style the content like font size, color, etc
div.google-visualization-tooltip > ul > li > span {}
Use !important whenever needed ;)
http://jsfiddle.net/nyNAg/66/
It's possible to completely replace the label with custom HTML. It's maybe a bit complicated, but gives you full control of the content and style. See https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content
As the Google Chart Tools API implements its SVG charts via an iframe hosted on it's servers, as per the Same Origin Policy you may not access or modify the content of another domain, unless via server-side manipulation prior to sending the client a response.
Given that, I'm not sure how you managed to change the text colour - perhaps a browser bug?
Another option might be to override inline-style rules e.g.
li.google-visualization-tooltip-item span[style] { font-weight: normal !important; }
http://css-tricks.com/override-inline-styles-with-css/
I have an accordion control that is generated in code. Earlier today it stopped rendering correctly in IE8. It would function ok, but sometimes the layout would get corrupted, and all kinds of weird graphical glitches occured. It did not fail in firefox.
I reset my IE settings to factory defaults and it fixed it. It works perfectly on another test machine, but on some of the machines on our network the graphical issues occur.
Has anyone else experienced the same or know a fix? All of our computers run internet explorer 8. If it becomes a big problem I will try forcing compatibility mode but I would prefer a more permenant fix (and also that might not even fix the issue!).
I've had issues like this in the past, most typically an issue with some CSS settings. If you use the developer tools in IE, look to see what CSS settings are being applied and try to rule that out.
A screenshot of what is happening and what should happen would be useful along with the code sample.
On your accordion headers only, place the following css code:
.accordionHeader { display: table; width: 100%; }
If you find that the headers still jump when hovering between them, use a border-top using a solid colour rather than using margin and padding. Of course this only works on designs ontop of solid colours (the border colour would need to match the background colour). Heres an example:
.accordionHeader { border-top: 10px solid #FFFFFF; }
This will fix IE8 right up! This has taken me a year to figure out lol.