I have the following code:
<div>
<my-custom-component></my-custom-component>
<div>
Inside MyCustomComponent's template, I use mat-card similar to this:
<mat-card>
<mat-card-header>
<mat-card-title>{{ name }}</mat-card-title>
</mat-card-header>
<mat-card-content>{{ description }}</mat-card-content>
</mat-card>
When it renders, I notice that there is a 16px margin that's given using angular material generated code that looks similar to this:
<mat-card>
<mat-card-header>
<div class="mat-card-header-text"> <<< ******** This is the div I am asking about
<mat-card-title>{{ name }}</mat-card-title>
</div>
</mat-card-header>
<mat-card-content>{{ description }}</mat-card-content>
</mat-card>
That div adds 16px of margin on top of the 16px of padding that the mat-card supplies, which pushes the title away from the border of the card by 32 pixels.
The specs of my design say that the title should stay 16px away from the border not 32px.
What's the best practice way of how to accomplish this?
Relaying on a div that appears there and styling something like mat-card-header > div seems wrong since I would be styling this particular implementation of the material card. Next version, this div may end up being some other element.
I could do:
mat-card-header mat-card-title {
margin-left: -16px;
margin-right: -16px;
}
But that again seems kind of hacky to me.
What's the intended way of overriding the internal styles of these components?
Two ways that i know
Global level:- If you want the style to be applied to all cards in your app, add a
style in your styles.scss / css removing the padding / margin to get the required
effect.
Component level:- If you want this style only inside a particular component where the mat-card is used, add a the style in the component.scss / css file.
But make sure you use the shadow piercing operator to make the style work.
This approach can be used in other scenarios too. Hope it helps.
Related
I am still new in angular 7. I have a form with title directive and div. I am trying to set both of them in same row with 49% width in side the form. The div style work fine but in the title component doesn't take the style. the problem is i need to change the title directive only in the current form. is there any way to do that?
many thanks
<form #taskForm="ngForm" (ngSubmit)="onSubmit()">
<my-title [style.width]='49%' [title]="'title.page'" [wikiUrl]='wikiUrl' icon="work">
</my-title>
<div [style.width]='49%'>
<button>Save</button>
</div>
</form>
Add px which almost equals to 49%.
<div [ngStyle]="{'width.px': 490px}">
<button>Save</button>
</div>
If you want to set a width in percent you can also use the following syntax:
<div [style.width.%]="49">...</div>
The real problem however seems to be that the 'my-title' component is not responding to the width rule. This is probably because 'my-title' is not a known html tag and so there is no default rendering behavior in the browser for it.
If you want your component tag to behave like a block element (that is what a div element is rendered like) then you just have to apply the rule display: block; to it.
Since your component tag is not part of your template, but the wapper for it you can either apply the following style to the parent component that is using the 'my-title' component:
/* this will not work inside the css file of the 'my-title' component:*/
my-title {
display: block;
}
...or you can use the :host selector in the css/scss file of the 'my-title' component, which is probably better in this case:
:host {
display: block;
}
I have the top bar of my page set up as follows: Home | Contact Us etc..
It lies within a p tag inside a div id.
How would i go about setting up the :hover css on each link without having to separate them into different classes such as how I have them at the moment. Is it possible?
I don't think i used the correct css because i couldn't position them correctly without having to use different padding parameters for each class which makes the spacing look inaccurate.
via codepen: http://codepen.io/Hafkamp/pen/jabmE
html:
<div id="topinfo">
<div class="home"><p>Home |</p></div>
<div class="about"><p>About |</p></div>
<div class="contactUs"><p>Contact Us |</p></div>
<div class="map"><p>Map |</p></div>
</div><!--/topinfo tag-->
css:
.home p{padding-right:250px;}
#topbar .home p:hover{color:rgba(255,255,255,1)}
Is there an easier way to do this that is not so tedious. This method also causes the divider to have the hover effect which is not desirable.
The best way of defining menus in a page is to use "ul" and "li" tags. But if you still want to use with tag you have to use it this way:
`Home
About
contact
.home_link, .about_link, .contact_link{color: red;}
.home_link:hover, .about_link:hover, .contact_link:hover {color: blue;}`
I would give them all the same class, say topitem, and use a rule like this:
.topitem:hover p {
color:rgba(255,255,255,1);
cursor:pointer;
}
Although really, I would get rid of the interior <p> tag and reduce the selector to .topitem:hover – the text is already wrapped in a <div>, so why wrap it again? (But see Zinnia's note about the convention of using <ul> and <li> instead of nested <div>s.)
I'm trying to make my little icons on this page (http://www.alinewbury.com/contact.html) into links.
They're each in a div separately, but whenever I try to do:
<div class="social-btn pinterest"></div>
It doesn't seem to work! How can I link these icons to the respective websites?
The Div is supposed to be inside the Anchor tag.
Check Anchor tag usage
To make the icon click able you have to fix some issues. First of all your icons are not really linked. you can see the Hand cursor because the property defined in the class .social-btn
To make a icon clickable you should follow this approach. put the text inside a tag a better approach also you have to change the font-size:0
.social-btn a
{
padding: 22px;
font-size: 0;
}
your HTML should be like this.
<div class="social-btn pinterest">
pinterest
</div>
I have three elements that I am trying to layout horizontally. Currently, I have the following HTML:
<div>
<h1>h1. Heading</h1>
<h1 class="subheader">subheader</h1>
<h1><small>segment header</small></h1>
</div>
When I run this, I see something like the following:
h1. Heading
subheader
segment header
However, I'd really like to get things laid out like the following:
h1. Heading subheader segment header
How do I setup this up via CSS in my root DIV?
Thank you
LIVE DEMO
Add a class to your DIV
<div class="align_H1">
and do:
.align_H1 h1{
display:inline;
}
So the trick is to display:inline; your <h1> elements, cause by default they are display:block; level elements.
Think about inline like on the content positioning flow,
while on block as for layout
Are you familiar with inline vs block elements? It sounds like what you want is
H1 {display:inline}
That said, it's usually not a great idea to break an element's default style when you might want its normal behaviour somewhere else. Instead, maybe give them a class, as per #Roko's answer.
CSS tricks has a handy reference on how to use the display property http://css-tricks.com/almanac/properties/d/display/
I use
<div id="windows">
<div class="row-fluid">
<div class="span4 mywindow">Text</div>
<div class="span4 mywindow">Text</div>
<div class="span4 mywindow">Text</div>
</div>
</div>
within a div #windows of a special width.
I want to reduce the default 20px space between these three blocks.
these css code
#windows .span4
{
margin-right:-10px;
}
sets up a proper space between blocks, but each block keep the same width so the total width is less than 100% of the parent div (there is a right space).
I can fix it by changing the width of the blocks using !important. So the fix is
#windows .span4
{
margin-right:-10px;
width:180px !important;
}
The question then is: does it make sense to use Twitter Bootstrap span4 class for my windows if I have to fix it so hard?
I mean, is it a good practice to fix both margin-right and width for Twitter Bootstrap span classes or there is a simplier and a better solution to fix blocks?
P.S. Twitter Bootstrap is used for another purposes on the page as well (so span4 is not the only reason to use Twitter Bootstrap in my case).
You are triyng to change gutter width between the columns. The easiest way to do this is to customize BS build before the download:
http://twitter.github.com/bootstrap/customize.html#variables
Change #gridGutterWidth value there (for fixed layout), then download your build.
This might help people with the same issue using bootstrap as a gem in a rails app.
If your using bootstrap along with the gem 'bootstrap-sass' you can directly over write this default as follows:
.span{
margin-left:0px;
}
This overrides the default margin given by the gem.