How do I align helper text with other items in a Flexbox , flex-direction horizontal?
Its currently using Box with MUI text fields and selects. The first item below is shifted upwards due to helper text. Align-items center currently does not fix problem.
Following question does not apply, since its not moving other elements, just not aligned. Adding ErrorText to material-ui Textfield moves other elements
Update: When I do align-items: stretch, everything looks good, but now the buttons filter at the right is kind of sunk below. Is there a clean way of fixing this, without adding a margin top for the right button?
Try applying
align-items: start;
To the Box
Related
When I hover over the stars, the half star is showing below the star
It's due to the style being applied to that element. I had a half-star that was off to the right and fixed it by applying text-align: 'left'. Your issue is the half-star is below. If you post your code I can help troubleshoot which css property needs to be updated specifically.
I'm testing out the md-chips directive in AngularJS.
Is there any way of stacking the 'chips' vertically instead of appending the chips horizontally?
I have been trying out the demos found here:
https://material.angularjs.org/latest/demo/chips
The following CSS style is the minimum needed to enable chips to stack vertically:
md-chip {
clear: left;
}
The default CSS of md-chip's is
float: left and applying clear: left causes the chips to clear each other and stack vertically. Applying float: none or some other styles to change the float appears to easily break the default directive and causes one to be unable to access the input field and add new chips. I note that some other styles may need to be applied to fix the .md-chips container containing the chips such as limiting its width to get the desired result.
See: Vertically Stacking Chips Demo on Codepen
I have a problem with aligning text in a single row I tried using Fexl approach as well as other approaches as well
also some of the data in my div is rendered dynamically using ng-repeat
the third column displays special data always.
all the rows from 3 columns should be aligned equally
please help me
link for plnkr http://plnkr.co/edit/LSLktvmvlaQtWUofzJvF?p=preview
I think I understand your question - I ran into a similar problem on another project, and I ended up giving each div a fixed height and setting the overflow to hidden. It takes a bit of testing, but if you're aiming for a responsive design, you can uses Sass to set it to different heights based on screen resolution.
Adding this CSS to your Plunkr would be a good starting point. Of course, you'd want to apply this to a custom class and not '.col-md-6':
.col-md-6 {
height: 100px;
overflow: hidden;
}
Increase the 'height' as needed to make sure all text fits.
Default Material Design gives a sidenav width of 304px. I am trying to implement material design's use of flex boxes, by adding in a flex="66" attribute inside the md-sidenav element.
When I did, it shortened the sidenav vertically, instead of horizontally.
It seems like I'm unable to override that 304px without pure CSS, which, although I can accomplish, is something I was specifically hoping to stay away from.
I haven't seen this concept referred to in the Material Design documentation. Anyone else have this issue?
If you will look at angular-material.css as below
md-sidenav is displayed as
display : none
when its closed & its displayed as
display : flex
when its visible.
If you want to change its width you need to write below lines in yr custom.css which you should load after loading angular-material.css
width : 500px !important;
min-width : 500px !important;
max-width : 500px !important;
replace 500 with yr custom value.
I defined a fieldset while setting blank title. however, in browser, the fieldset has a expand/collapse icon in right-top corner, while i want have it in left-top corner? what I am supposed to do?
thanks!
You can get it on the left corner like any normal fieldset with a title with some trick. You can get what you need by using unicode for "Narrow No-Break Space". The unicode is U+202F. So in your code, you will have to set your title as:
title: '\u202F',
keep in mind that you cannot completely box the fieldset with this trick. Here is a small gap in the fieldset border on the right side of the collapse button. You could also use other unicode characters like \u200B,\u200C etc. But they all provided me with the same result.
You can get a more better result by removing the CSS style right-margin: 3px applied to the legned of fieldset. I haven't tried to do that though.