How to make an angular 2 material md-radio button vertical and change and default colour. I tried this link and I was not able to make it display vertically
my code:-
<md-radio-group ng-model="data.group1" layout-align="start start">
<md-radio-button ng-value="green" class="my-radio" *ngFor="let schedule of schedules" value={{schedule}} (click)="postSchedule(schedule)" ng-style="{'display':'list-item'}">{{schedule}}</md-radio-button>
</md-radio-group>
css:-
md-radio-button ._md-container {
top: 0;
transform: translateY(0);
}
You may have to try to use flex-box properties. Try below code
.my-radio {
display: -webkit-box;
display: -webkit-flex;
display: flex-box;
flex-direction: column;
}
Cf deleted post on this page by Pengyy which works for me:
You can add a custom style as below for md-radio-group.
.radio-group {
display: inline-flex;
flex-direction: column;
}
Related
my name: [$name]
How to make the “my name:” not visible if the "[$name]" is blank? I’m using inline css because this form will be sent to HTML email.
As mentioned in the comments, if you want to use CSS only, it depends on the HTML structure. It is possible though.
.nameContainer {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.name {
margin-left: 0.5em
}
.name:empty + span {
display: none;
}
<div class="nameContainer">
<span class="name"></span><span>My name:</span>
</div>
<div class="nameContainer">
<span class="name">John Doe</span><span>My name:</span>
</div>
I am using the Material-UI library for React.
I am trying to make a simple form that looks like:
However, I can't figure out how to align the button with the TextField.
I tried changing the margin-top but it increases the margin of the entire wrapper.
Below is the code sandbox for it.
Any tips on getting this fixed?
https://codesandbox.io/embed/material-demo-y5eg7?fontsize=14&hidenavigation=1&theme=dark
In your styles.css file you can add {position: relative; top: 10px} to the small-button className then adjust the top value until you are happy with the position alternatively you might be able to wrap the row in a div and use {display:flex; flex-direction:row; justify-content:center;} to align them all.
Change the below styles in styles.css
.horizontal-form { /* This is newly added style */
display: flex;
align-items: center;
}
.input-text-wrapper {
/* margin-bottom: 1.2em; */ /* comment these styles */
}
.input-text-wrapper-small {
width: 33%;
/* margin-bottom: 1.2em; */
display: inline-block;
}
.small-button {
width: 10%;
/* display: inline-flex;
align-items: center; */
}
jsx
Remove the small-button div from inside the input-text-wrapper div and Then Enclose the input-text-wrapper div and small-button div inside a newly created horizontal-form div
...
</Typography>
<div className="horizontal-form">
<div className="input-text-wrapper">
<div className="input-text-wrapper-small">
...
</div>
<div className="input-text-wrapper-small">
...
</div>
<div className="input-text-wrapper-small">
...
</div>
</div>
<div className="small-button">
<Button variant="contained" color="primary">
Add
</Button>
</div>
</div>
</CardContent>
....
Just replace this line
<div className="input-text-wrapper">
with
<div className="input-text-wrapper" style={{display:"flex", alignItems:"center"}} >
AND remove margin-bottom from your style.css
.input-text-wrapper-small {
width: 30%;
/*margin-bottom: 1.2em;*/
display: inline-block;
}
I've dived last weeks a bit more into react.js with Gatsby and Prismic. I've created blog cards which I display using flex: wrap (Check the image) , now I want to display my blog cards horizontal.
If I do nowrap:
MY CODE:
Cardlist.js:
<React.Fragment>
<div className="cardslist">{children}</div>
{/* --- STYLES --- */}
<style jsx>{`
.cardslist {
text-align: center;
}
#from-width desktop {
.cardslist {
display: flex;
flex-wrap: wrap
}
}
`}</style>
</React.Fragment>
Try this: flex-direction: row;
I'm trying to customise the popup info window that appears when you click on a marker, but I can't get rid of the scrollbar that appears on the right in case the content overflows.
https://pasteboard.co/Ith8X2v.png (image was not loading when used the image template)
I've tried adding overflow: scroll too all the parent containers as it seems that's the only thing the was different (see this).
I've made a little clip with what kinda worked but not entirely.
https://streamable.com/guoei
Markers code:
<agm-marker *ngFor="let m of markers; let i = index"
(markerClick)="clickedMarker(m.label, i)"
[latitude]="m.lat"
[longitude]="m.lng"
[label]="m.label"
[markerDraggable]="m.draggable">
<agm-info-window>
<div class="popup-info-container">
<div class="popup-header-container">
<strong>InfoWindow content</strong>
</div>
<div class="popup-body-container">
<strong>InfoWindow content</strong>
</div>
</div>
</agm-info-window>
</agm-marker>
CSS code:
.popup-info-container {
height: 400px;
width: 300px;
background-color: red;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
&::-webkit-scrollbar {
display: none;
}
}
.agm-info-window-content {
overflow: scroll;
}
.popup-header-container {
height: 20%;
width: 95%;
background-color: blue;
}
.popup-body-container {
height: 75%;
width: 95%;
background-color:whitesmoke;
}
I want to get something like this:
where the scrollbar fadesout.
I've found a similar thing here How to edit css of child component imported from other module Angular 2+
Basically I had to override classes that angular was generating with ::ng-deep
::ng-deep .gm-style {
.gm-style-iw-d::-webkit-scrollbar {
display: none !important;
}
}
Having this:
<label>
<button>Create</button>
</label>
I want button to be aligned to the right like this
----------------------------
| [create]|
----------------------------
while having this:
<label>
<button>Delete</button>
<button>Update</button>
</label>
I want buttons to be in the corners
----------------------------
|[delete] [update]|
----------------------------
Without adding additional classes to the label.
You can just use margin-left: auto on last-child and that will produce desired result.
label {
display: flex;
border-bottom: 1px solid #aaa;
margin: 20px 0;
}
label button:last-child {
margin-left: auto;
}
<label>
<button>Create</button>
</label>
<label>
<button>Delete</button>
<button>Update</button>
</label>
You can do this using nothing but standard flexbox properties:
flex-direction: row-reverse - put the items in a row, start from "the end" (depends on reading direction)
justify-content: space-between - put the items as far away from each other as possible
label {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
<label>
<button>Create</button>
</label>
<label>
<button>Delete</button>
<button>Update</button>
</label>
You can use CSS Flexbox justify-content property to align your elements.
Have a look at this Codepen.
Or look at the code below for reference, also I've used <div>s in place of <label> as in the .two they are acting on both the buttons.
div {
display: flex;
background: #ddd;
padding: 10px 20px;
margin-bottom: 10px;
}
div:first-child {
justify-content: flex-end;
}
div:nth-child(2) {
justify-content: space-between;
}
<div>
<button>Create</button>
</div>
<div>
<button>Delete</button>
<button>Update</button>
</div>
Learn more about CSS Flexbox
Hope this helps!