I am using angular-material cards and I am trying to customize it. Most of the things I am able to do, but I am not able to set the height of cards.
Suppose I want to make a card having height of 30px only. How can I achieve that? If I am using only a A tag in it's content. How do I set the padding-top bottom n it.
<md-card class="numb">
<md-card-content>
<a href="">Sourabh garg<span>7415326288</span>
<span>Sourabhxxx#gmail.com</span></a>
</md-card-content>
</md-card>
My css
md-card{
padding:0px;
min-height:30px;
margin-left:300px;
width: 800px;
md-card-content a {
color:black;
text-decoration:none;
span{
padding-left: 100px;
}
}}
Please tell me What I am missing. :(
Use
min-height:30px !important
for important into css to must apply/override
Related
I am devolping app using angular js and ionic framework. I want to show border right only for odd numbers.
Here is my code:
<div class="media-body" style="padding-bottom:25px;">
<h2 class="align_center">{{services.name}}</h2>
<a href="#job/{{services.id}}">
<h2 class="align_center_des">{{services.description}}</h2>
</div>
</div></div>
Here is the Css
.col-32-custom {
width: 32%;
float: left;
margin-left: 1%;
border-right: 1px solid #E4E4E4;
margin-bottom: 31px;
height: 144px;
}
Here is fiddle:
https://jsfiddle.net/asetkL0n/
CSS also allows you to target specific odd or even elements. An example to that could be:
.col-32-custom {
width: 32%;
float: left;
margin-left: 1%;
margin-bottom: 31px;
height: 144px;
}
.col-32-custom:nth-child(odd) {
border-right: 1px solid #E4E4E4;
}
wherein, inside that nth-child, you can pass, "odd","even","2n","2n+1", or any expression in n.
I think the best solution is to use ng-class, so you have to create a class that will only add the border right.
I presume you are in an ng-repeat loop so the code will look like
<div data-ng-class="{border-right: ($index%2)===0}" class="col-32-custom">
Here you have the condition for the even number ($index%2)===0 so the div will have border-right class on event number.
you can use ng-class-odd / ng-class-even within ng-repeat to add specific classes to this items.
example here : ng-class-odd
Material angular lays out radio boxes like this:
o Apple
o Banana
I want this in reverse
Apple o
Banana o
The md-radio-button has two compenents,
div class="md-container",
and
div class="md-label".
The container holds the button, and the label holds the label.
I can't seem to swap the positions of these divs. When I try to float md-container right, it goes outside of the md-radio-button.
How can I swap the two locations, either using float on the sub-components without breaking outside of the parent radio button, or perhaps some other way?
Thank you
You can do this
<md-content>
<span layout="row" layout-align="center center">
<span>Apple</span>
<md-radio-button value="1" aria-label="Apple"> </md-radio-button>
</span>
</md-content>
EDIT:
Add this to your css:
md-radio-button {
width: 100px;
}
md-radio-button .md-label {
width: 80%;
margin-left: 0;
word-wrap: break-word;
}
md-radio-button .md-container {
width: 20%;
left: 100%;
}
Here you can set a width for the md-radio-button component. This lets us align all the radio-buttons no matter the length of the label.
If the labels are really long, they will wrap instead of overlap or pushing the radio-button.
First answer:
Add this to your css:
md-radio-button .md-label {
margin-left: 0;
}
md-radio-button .md-container {
left: 60px;
}
Or you can do this:
md-radio-button .md-container {
position: relative;
transform: translateY(10%);
}
md-radio-button .md-label {
float: left;
left: 0;
margin-left: 0;
margin-right: 10px;
min-width: 60px;
}
You will need to adjust the left positioning of the .md-container or min-width of .md-label though based on the longest label. Or you could use the last solution and just not care about min-width and aligning the radio-buttons.
Difference between these two solutions is that in the second one, the labels will never overlap the radiobuttons. At worst, if the label is really long, it will misalign the radiobuttons. The first solution doesn't care about the length of the labels.
<md-radio-button value="1" labelPosition="before" aria-label="Apple"> </md-radio-button>
How would i come across the effect from this website http://www.theqcamera.com or http://plugandplaydesign.co.uk (the video + image at top) so that the image fills the screen on any screen size. Im not sure if this is responsive height but really would like to know how to do it.
There are a few ways to do this. The easiest is to use vh (vertical height) in your CSS. A setting of 100vh will make your div be 100% of the height of the screen being used to view the page. Combine this with a background image that is set to "cover" and a 100% width on the domain and you should be good to go.
<body>
<div class="container">
<div class="div_1">
content
</div>
<div class="div_2">
other content
</div>
</div>
</body>
.div_1 {
width: 100%;
height: 100vh;
}
.div_2 {
width: 100%;
height: auto;
}
Please note: vh is not supported in IE8. If you need to support IE8 for your project, going with position:absolute; height:100%; width:100%; margin: 0; is a slightly more complicated, but more backwards compatible answer.
try using height 100% , position absolute , margin 0 auto
this is how I've made my picture 100% on my website (http://www.dotto.be)
How can I changed the height of md-toolbar in material design?
http://jsfiddle.net/kostonstyle/gsroofa5/
On the first toolbar I want a height from 30px and tried that:
<md-toolbar style:"height: 30px;">
But it does not work at all. I need a navbar with two bulks, that because of two toolbar.
I try this, but now letter disappear.
http://jsfiddle.net/kostonstyle/r178sp9o/1/
You can use an inline style like this
<md-toolbar style="min-height:30px">
Use min-height to make the toolbar smaller
The height of the toolbar can be changed by adding the classes to the md-toolbar.
For a medium sized toolbar add class="md-medium-tall"
For toolbar bigger than the normal add class="md-tall"
You can also inline style the toolbar style="height:50px;"
The accepted answer did not work for me. Here is how I got it working in my Angular Material app:
<mat-toolbar color="primary"
style="min-height: 30px !important; height: 30px !important;">
This worked for me on Angular 8. Put this code in your scss
.mat-toolbar {
min-height: 50px !important;
height: 50px !important;
}
.mat-toolbar-row {
min-height: 50px !important;
height: 50px !important;
}
Replace 'mat' with 'md'
If just setting the min-height doesn't work, like it didn't work for me, you will also have to add in max-height with the same value:
HTML
<md-toolbar class="toolbar"></md-toolbar>
CSS
.toolbar {
max-height: 30px;
min-height: 30px;
}
I have a website running on a mapping platform called Ushahidi. The default template is quite boxy so I was fiddling with the CSS and rounding everything off using border-radius.
It has helped with other elements but the map is such a square it won't ease up!
It might be that it's not possible, wondered if anyone here had any experience of this. The html using inspect element and view source are different. Not sure what this means exactly but guessing that the html is pulled in by the map provider?
Here is the html on view source:
<div class="map " id="map"></div>
<div style="clear:both;"></div>
<div id="mapStatus">
<div id="mapScale"></div>
<div id="mapMousePosition"></div>
<div id="mapProjection"></div>
<div id="mapOutput"></div>
</div>
I've added a screen of inspect element HTML too. Looks like it's using "Open Layers". I've heard of that but don't fully understand whats going on.
Is it possible to round the edges of my map? Here is the site if that helps: http://tinyurl.com/c8djrvr
Apply the border-radius to two layers.
CSS
div.map {
border: #999 1px solid;
width: 800px;
height: 366px;
position: relative;
height: 650px;
border-radius: 25px; /* ADD THIS */
}
#OpenLayers_Map_11_OpenLayers_ViewPort {
border-radius: 25px; /* ADD THIS */
}
It works. Use however many pixels you want. I used 25px.
I would suggest more general and safer CSS selectors (since ID #OpenLayers_Map_11_OpenLayers_ViewPort is generated by OpenLayers and it's value is unpredictable; and OL 2.12 and older produce ID's, that contain dot and are therefore unsuitable for CSS selectors):
.olMap, .olMapViewport {
border-radius: 25px;
}