I’m trying to make a visualisation like this:
I used the built in card and card-columns of bootstrap. But when I expand a panel, all of my <div>s are moving randomly:
I would like the other expansion panels to not move when I open one. Here is an example: StackBlitz.
I've been testing your stackblitz code and the "problem" is at the line 8:
<div class="card-columns">
Exactly at the class name, 'card-columns' is a predefined class that maybe is in BootStrap predefined classes.
My suggestion is to remove this class and use another alternative, like a flex-layout.
Or use html columns.
I've forked your stackblitz code and solved using html columns:
https://stackblitz.com/edit/angular-material-bootstrap-css-qmrzcm
Next step is to add your custom paddings between each columns.
Related
So I'm trying to figure out if there is a way to "inset" two mat-progress-bar spinners inside one another in Angular-material.
Example picture of the implementation I'm trying to achieve. So far I haven't come up with a solution exept to maybe just try to move one of the spinners inside the other and scale it down somehow.. could that work?
you can set them both in a div and use absolute position
https://stackblitz.com/edit/angular-corfs4?file=src/app/progress-spinner-overview-example.html
Using Bootstrap v4, how can you build a form like the one seen below?
I'm trying to understand if I should be using form-inline with either multiple form-groups or multiple rows?
https://v4-alpha.getbootstrap.com/components/forms/
You'll want to use form-group and fieldset
form-group groups the input elements on the same line
fieldset makes the label appear above the input
Jsfiddle: https://jsfiddle.net/5wbeqmgc/2/
Not perfect, but a simple example using columns: https://jsfiddle.net/5wbeqmgc/4/
Started learning Twitter Bootstrap a couple days ago and in form-design they use form-group but from some examples I have seen for example each label and its text box is inside one form-group and from some other examples I have seen they put multiple labels and their text boxes in one form-group.
So my question is what makes them know and decide which way to wrap in form-group?
Wrap labels and controls in .form-group for optimum spacing. - Bootstrap Documentation
It just adds a bottom margin to help space out your controls. I find that in most cases you would want to use them. The only time I can think of that you might consider not using them is if the form you're styling requires a lot of custom positioning or spacing.
I'm starting to use zurb foundation and would like to know what the "foundation way" of sizing inputs and selects is.
Basically i got row with four columns and in each one a form element.
By default every element has a different height.
Please refer to this screenshot i took:
So again, what would be the zurb foundation way to size the elements evenly?
Thanks in advance!
Take a look at this Foundation form mixin: form-element
If you are using SASS, you can do something like this:
your_styles_file.css.scss
select {
#include form-element;
}
Doing so, you'll have all form inputs and selects with the same look and feel.
Beware of the width property set by this mixin, which is 100%.
Can any one help this..
I want to adjust the two adjacent cell height using div tag without using the display:table-cell. Please reply as soon as possible..
I don't believe you can do what you're trying to do using simply CSS.
I'd recommend using a jQuery Equal Heights plugin like this one:
http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
You simply load jQuery and the plugin onto your page then use it like so:
$('.myCLASSorIDorWHATEVER').equalHeightColumns();
Hope that helps.