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
Related
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
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.
So I have some controls in a fixed position to the bottom of the screen for easy reach on mobile, but for the life of me I can't figure out how to make the option content appear above the select menu.
I tried messing with append-to-body="true" and some other stuff that was totally off the wall. I feel like this should be a simple hook but not finding anything..
Add position='up' to <ui-select-choices>.
Other options include down and auto (top/down depending on available space).
Demo: https://angular-ui.github.io/ui-select/demo-dropdown-position.html
Edit on Plunker available at https://angular-ui.github.io/ui-select/
[Dropdown Position]
I was able to get it with css by adjusting the absolute positioning.. This is actually kind of nice because I could control when it happened this way, for me it was only for mobile screen widths.
.some-container-class .ui-select-choices {
top: auto;
bottom: 100%;
}
I am currently trying to build a slider on my page. The slider slides between different content, which means each slider has a different div height. This makes it hard to use animations since I need to use position:absolute; for those (to slide left/right). To work around this, I added a parent container with a position:relative; and used this directive to get equal height on my divs. However, the problem I am facing is that it only gets the height of the first visible div. Meaning it will work fine if the div with the highest height is shown first, but otherwise it won't work (since content will come outside of the slider).
How can I adjust this so that the equalizer gets the height of each div, and gets the one with the highest value in height, and uses that instead of the only visible one?
Additional info:
Using ng-show to show the current slide, and css3 animations.
The solution was pretty logical. I'm not that great with directives. But after some researching I saw that this directive had a function called equalize() - meaning I could only call EqualizerState.equalize() once I had added EqualizerState to my dependencies.
<div>
<div style="display:inline-block;">
<div style="display:none"></div>
</div>
</div>
I'm trying to understand this inline-block behaviour. This is a simplified version of a layout issue I ran into with some responsive elements in my header and menu bars. If the intermediate div is anything but inline-block, the entire nested block will have no height (or visibility, I'm not sure). However, if the intermediate div is an inline-block, it appears to display none with the innermost child (it's shaded in Firebug code, so I'm assuming it's hidden), however the the parent div maintains some sort of default height.
The best work-around I've found, which also sheds some light on where the default height is coming from, is to give the outer div a line-height of 0 or 1px. It still shows a 2-3px height which I can live with for my particular design. However, I can imagine cases where this work-around won't work, so it seems a bit like a hack.
I'm interested in understanding why this particular structure is behaving this way. So far, with my tests, it appears to be unique in terms of not collapsing when its children have no display. When understood properly, is it a bug or the logical result of the way the nested displays are interacting? Is there a better way to control it than with line-height? Can it be forced to display no height at all?
I'm not interested in JS solutions, or solutions which suggest work-arounds involving avoiding inline-blocks. Adding CSS to the existing proposed structure is fine. In my mind, the best solution would show no height for the structure with the least consequences for elements displayed inside the structure when display is not set to none. My question is as much theoretical as it is practical.
Is it a bug or the logical result of the way the nested displays are interacting?
Inline elements (inline-block and inline - which both recreate your issue), have white space after them. This has the same effect as a single SPACE U+0020 character, by HTML specifications. This is what causes your parent div to have a height.
Is there a better way to control it than with line-height? Can it be forced to display no height at all?
It depends, really, on what you consider 'better'. You could float the 'middle' element, instead of displaying it inline. (This may require you to clear the floats in the parent element - there is a common fix for this called clearfix)
Here is sample code showing this method in effect:
HTML:
<div class="parent">
<div class="middle">
<div class="final">asdf</div>
</div>
</div>
CSS:
.middle{ float:left; }
.final{ display:none; }
/* Shading to show sizes of divs */
div { border:1px solid; background:rgba(0,0,0,.2); }
/* Clearfix */
.parent:before,
.parent:after {
content: " ";
display: table;
}
.parent:after {
clear: both;
}
Live example: http://jsfiddle.net/16xp2m3L/2/