I'm trying to change md-button text color using accent Palette color using Angular material 1.0.9 version. But it is not changing button text color.
If i'm using latest beta it got fix. But i'm not going to production with this unstable version.
Code:
<md-toolbar class="md-primary md-hue-1">
<div class="md-toolbar-tools">
<md-button class="md-accent">My Profile</md-button>
</div>
</md-toolbar>
Below are the plnkr urls:
Angular material 1-0-9 Plnkr URL
Angular material Latest beta Plnkr URL
Can anyone suggest a fix?
It appears that with V1.0.9 md-accent within md-toolbar does not work for non-raised buttons but only for raised ones. It works for non-raised buttons outside md-toolbar.
The fix would be CSS
.md-toolbar-accent span {
color: #6A1B9A;
}
Plunker.
I have check and found the md-accent was override by some class from md-toolbar as you can see as below image
So If you still want to use the color, just added new class
.md-button.md-accent {
color: rgb(106,27,154) !important;
}
I started to use Angular Material in my project and I was wondering how I can change the svg color inside an am-button.
This is my code:
<md-button class="md-fab md-primary">
<md-icon
class="ng-scope ng-isolate-scope md-default-theme"
style="height: 14px; width: 14px;"
md-svg-src="img/material-icons/core/arrow-forward.svg"
></md-icon>
</md-button>
What do I need to add to change the color of the svg from the curent black to white, just like in Google's button demo? (section "Icon button using Font-icons")
I'm on angular-material 0.8, and I simply added
style="color:white;font:bold;"
to the md-icon element.
For the people trying to color their md-icon, I found out that I had the same problem using Angular 1.3.x and Angular Material 0.8.x.
I fixed the problem by editing my SVG files and deleting the "fill" attribute that was overriding any inherited color.
After deleting this "fill" attribute in each SVG file, I could properly choose the color I wanted to assign to the icon thanks to CSS as specified by Jason Aunkst.
The SVG is under the md-icon, so you could add this to your style:
md-icon {
color: red
}
md-icon svg {
fill: inherit;
}
The following is the only way I've gotten it to work via stylesheets.
md-icon {
svg {
path {
fill: #ffffff;
}
}
}
Am using this in the CSS :
.my-icon svg
{
fill : #fff;
}
And in the HTML :
<ng-md-icon icon="search" class="my-icon"></ng-md-icon>
Works fine!
You should be able to do this by add "fill:white" to the style of the icon.
<md-icon class="ng-scope ng-isolate-scope md-default-theme" style="height: 14px; width: 14px; fill:white" md-svg-src="img/material-icons/core/arrow-forward.svg"></md-icon>
Add this to your css:
svg {
fill: inherit;
}
The svg will now inherit the fill attribute of your md-icon
<md-icon style="fill: red;" md-svg-src='/img/ic_menu_white_24px.svg'></md-icon>
I was having a similar problem when trying to change default svg icon color. For those who are experiencing the similar issue, make sure you check the angular-material version you're currently using. Currently, I'm using the angular-material "0.7.1" and this is quietly important.
NOTE: with my current Angular-material (0.7.1) version, the <mdIcon></mdIcon> directive only checks to see if attr.Icon is defined or not during postLinking compileFunction. With this implementation, in order to reference your svg icon files, you simply add icon attribute to your <mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon> element directive. Notice in the earlier angular-material version, you might have use md-src-svg for referencing your svg files, its no longer the case in 0.7.1 version.
So if you were using 0.7.1 and following above instruction, you should have your svg icon rendering correctly, now its time to change the background-color of the svg you're using.
Raw svg file before any modification:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24">
<g>
<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" />
</g>
You should have a folder within your project where you save all your svg icons, in my case, I have a folder named icons where I store all my svg icons. The example svg file above is the non-modified svg icon where I got it from https://github.com/google/material-design-icons. (Default its rendering as a black svg file)
To change the default svg file, you would simple add a fill attribute to your raw svg file. See modified svg file version:
<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" fill="green" />
I simply added fill="green" the path element svg file, and now my svg icon is rendering as color green instead of default black. I know some of you guys might be using a different version of angular-material, but the mechanism of changing default svg color should apply the same. Hopefully this can be helpful to solve your problems, thanks!
The issue seems to be with the downloaded SVGs from Google Design icons as they override the fill attribute in the svg root. Compare the view source of SVGs on Google Design with the ones used in the example.
Solution:: Override fill in css.
md-icon svg {
fill: currentColor;
}
One way to do it is by setting a custom class selector.
HTML:
<md-button class="md-fab mybtnstyle">
<md-icon md-svg-src="img/icons/cake.svg"></md-icon>
</md-button>
CSS:
.md-button.md-fab.mybtnstyle {
background-color: blue;
}
.md-button.md-fab.mybtnstyle:hover {
background-color: red;
}
Codepen here: http://codepen.io/anon/pen/pjxxgx
Easiest way out
Now there's no need to change the svg or the fill property.
Simply add the !important to md-icon's color property in CSS:
md-icon {
color: #FFF !important;
}
I was having a similar problem, I needed to change the SVG color using CSS, but I also needed to keep the original SVG color (e.g. fill="#fff") when no CSS was supplied.
I enhanced Jason Aunkst's approach to make it work. Here's the solution:
md-icon[style*="color:"] svg [fill] {
fill: inherit;
}
That class will set any svg's child element with a fill attribute to inherit the color value as long as the svg is a child of an md-icon element that contains the style attribute with a color value.
It will only work on SVG's that are only using one fill color though. Adjust as needed, hope it helps!
Is there some way to provide different image sizes for the carousel for different screen sizes ? I understand the CSS media query can get this information to provide different CSS settings for different devices/screens, but I don't see anyway to pass this information into the carousel. For a full-screen carousel this seems to mean it only works properly on devices matching the image size.
You could make the images take up a certain percentage of the screen by scaling them.
ons-carousel-item {
text-align: center;
}
ons-carousel-item img {
width: 95%;
}
And the carousel:
<ons-carousel overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item>
<img src="http://placehold.it/350x150">
</ons-carousel-item>
<ons-carousel-item>
<img src="http://placehold.it/700x100">
</ons-carousel-item>
</ons-carousel>
Here is a jsfiddle demonstrating the following issue.
I'm using Foundation 5 framework and trying to include an Orbit Slider inside of a Reveal Modal, however for some reason the slider is not given an appropriate height.
<-- Button to Reveal Modal -->
Click For Modal
<!-- Modal Popup that is revealed -->
<div id="myModal" class="reveal-modal" data-reveal>
<ul data-orbit>
<li><img src="http://placekitten.com/400/300" /></li>
<li><img src="http://placekitten.com/400/300" /></li>
<li><img src="http://placekitten.com/400/300" /></li>
</ul>
</div>
Note that if you resize your browser window with the modal open, it automatically corrects itself to the appropriate height. This issue existed in previous versions of Foundation, so hacky fixes popped up like this:
$('.reveal-modal').on('opened', function(){
$(this).find('[data-orbit]').css('height','');
$(window).trigger('resize.fndtn.orbit');
});
However this fix no longer works in the newest version of Foundation. Is there any way to get it working?
Note that I don't want to simply assign a min-height css attribute as the content in my slider will be of variable height, not to mention responsive so a pixel value wouldn't work.
In short I believe this is the answer:
$(document).foundation();
$('.reveal-modal').on('opened', function(){
$(window).trigger('resize');
});
OR
$(document).foundation();
$(document).on('opened', '[data-reveal]', function () {
$(window).trigger('resize');
});
I looked at the following references:
Foundation 4.1.2: Orbit slider not shown in Reveal window
The one you listed as "hacky fixes" above
Squashed picture when using Orbit in a Reveal
Orbit height not set on accordion.
It looks like the old hack for 4.1.2 just called the compute_dimension method to resize the modal once it was opened. I looked in the foundation.orbit.js file and found $(window).on('resize', self.compute_dimensions);, around line 280.
Instead of $(window).trigger('resize.fndtn.orbit'); I used $(window).trigger('resize'); and removed the line $(this).find('[data-orbit]').css('height','');.
I forked your jsfiddle and added the changes here.
I hope that helps.
For anyone using Foundation 6 (my legacy project was on 6.2.4), i fixed this by adding the following css code:
div.gallery-in-modal .orbit-container {
height: auto !important;
}
div.gallery-in-modal .orbit-container .orbit-slide {
max-height: initial !important;
}
Here is the link :
www.guidegather.com
(sorry, tried posting image but cannot)
If you look at the footer section, it appears correctly in all major browser (including IE9) but in IE7, the width of the div#mainfooter follows the max-width of .center class instead of extending horizontally to fill the space.
Here is the CSS :
.center{
margin:0 auto;
padding:0 50px;
max-width:960px;
}
#mainfooter{
background-color:#000;
color:#CCC;
list-style:none;
}
Here is how the HTML roughly looks like :
<body>
<div class="center">
Something here
</div>
<div id="mainfooter">
<div class="center">
Something here
</div>
</div>
</body>
As you can see, the div#mainfooter is independent of the previous div, but the width is restricted to the max-width of the previous div (and child div). Any solution to this?
Any help is appreciated. Thanks!
Since #mainfooter's rules will take priority over any inherited rules, you could specify a width for #mainfooter (width: 100%, or barring that, max-width: 100%). That should solve the problem.
So the solution is to add display:block to #mainfooter. Hope this helps anyone facing this issue in the future and great thanks for those who tried helping me