I got an Angular Flex-Layout row which contains some buttons and a mat-button-toggle-group. Unfortunately, the mat-button-toggle-group is somewhat bigger than the buttons and I would like to have them all on the same height / line-height.
This is hot it looks currently:
Tried to meddle with the css classes of mat-button-toggle-group and others, but only got to so far as to reduce the button height while the content stayed the same.
<div fxLayout="row wrap" fxLayoutAlign="space-between end">
<div>
<div fxLayout="row wrap" fxLayoutAlign="space-between end">
<div class="control-buttons">
<button
mat-stroked-button
>
<i class="material-icons">skip_previous</i>
</button>
( more buttons )
</div>
</div>
<div>
<div fxLayout="row wrap" fxLayoutAlign="space-between end">
<mat-button-toggle-group multiple>
<mat-button-toggle
value="random"
>
<i class="material-icons">
shuffle
</i>
<span class="only-on-big-screen">
random
</span>
</mat-button-toggle>
( more buttons )
</mat-button-toggle-group>
</div>
</div>
</div>
Another workaround would be to do this:
.mat-button-toggle-group {
height: 32px;
align-items: center;
}
You can change the height by adding custom styles. You have to change the line-height of the class mat-button-toggle-label-content.
.mat-button-toggle-label-content {
line-height: 32px !important; <-- set you height here
}
What worked for me was reducing the line-height of the content and adjusting height of the buttons in a global style file.
.mat-button-toggle-button {
height: 2rem; // the modified height that I wanted.
}
.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
line-height: 1rem; // default value is 48px. I wanted the height to be 2rem, but had to adjust this line-height to 1rem so that the icons were vertically centered.
}
Related
I would like to change the size of some bootstrap offcanvas elements. (not all!)
(To change all, I know I can change the SASS-Varianble ($offcanvas-horizontal-width: 400px))
I would like to make this work in a way that I have different CSS classes that I can add to the offcanvas (like the modal with .modal-xl).
I.e. here e.g. .offcanvas-size-l and .offcanvas-size-xl
Of course, the offcanvas should also remain responsive (i.e. not go beyond 100vw for narrower screens. (i.e. with max-width / media-query).
Unfortunately, this is not feasible only simply with a width specification, because bootstrap work in addition to width with corrosponding negative margin which push the offcanvas "out of screen" I.e. that are several values that must be adjusted.
Since I "compile" bootstrap itself via Sass, I have a more Options and can insert before and after the (s)css any parts/SASS functions. (or edit bootstrap source)
Has anyone been able to make this work?
I don't need the "responsive-offcanvas" function (offcanvas-xl) which is new in 5.2 /an does something complete different.
Example code (Directly from the bootstrap page, only "offcanvas-size-xl" added)
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Toggle static offcanvas
</button>
<div class="offcanvas offcanvas-start offcanvas-size-xl" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
I will not close if you click outside of me.
</div>
</div>
</div>
In the end it was easier than I thought, there is also a CSS variable that you can influence (mit SASS):
.offcanvas-size-xl {
--#{$prefix}offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
--#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--#{$prefix}offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--#{$prefix}offcanvas-width: min(95vw, 250px) !important;
}
For those who do not compile bootstrap, they should be able to do so:
.offcanvas-size-xl {
--bs-offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
--bs-offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--bs-offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--bs-offcanvas-width: min(95vw, 250px) !important;
}
I have the following html but this is making the button grow bigger in size. How to make the button not grow in height ?
<div fxLayout="row">
<h5>User Management</h5>
<span fxFlex></span>
<button mat-raised-button color="primary">Create</button>
</div>
Solution with fxLayoutAlign directive
The simplest way is to use the fxLayoutAlign directive on your div element as shown below.
<div fxLayout="row" fxLayoutAlign="center center">
...
</div>
Solution with CSS
The problem in your HTML template is that the h5 element is the tallest element and that all other elements in the row are laid out with same height. One possible solution is to remove the top and bottom margins from the h5 element using CSS.
h5 {
margin-top: 0;
margin-bottom: 0;
}
In case you have other h5 elements on the same page that must not be altered, you need to define a specific CSS class for the h5 element that appears in the flex row (it could be named "h5-inline").
.h5-inline {
margin-top: 0;
margin-bottom: 0;
}
The HTML template would then look like this.
<div fxLayout="row">
<h5 class="h5-inline">User Management</h5>
<span fxFlex></span>
<button mat-raised-button color="primary">Create</button>
</div>
Using Angular Material's flexbox I'm having trouble getting divs with margins and borders to line up.
I'm wanting to have a row with 3 boxes each taking up 1/3 of the horizontal space, followed by a row with 2 boxes - the first having 1/3 and the second having 2/3 of the space. This works fine if I don't have margins around the boxes but with margins it breaks.
How can I fix this?
HTML:
<body layout="column" ng-app="myApp" ng-cloak>
Borders of divs with margins don't line up
<div class="with-margins">
<div layout="row">
<div flex="33">Test</div>
<div flex="66">Test66</div>
</div>
<div layout="row">
<div flex="33">Test</div>
<div flex="33">Test33</div>
<div flex="33">Test33</div>
</div>
</div>
Borders of divs without margins line up fine
<div class="no-margins">
<div layout="row">
<div flex="33">Test</div>
<div flex="66">Test66</div>
</div>
<div layout="row">
<div flex="33">Test</div>
<div flex="33">Test33</div>
<div flex="33">Test33</div>
</div>
</div>
</body>
CSS:
body {
width : 100%;
background-color: #dedede;
padding: 2px;
}
div {
background-color : #c14543;
border: 1px solid black;
}
div.with-margins>div>div {
margin: 0 10px;
}
body>div,
body>div>div {
background: inherit;
border: none;
}
div.no-margins {
margin-top: 10px;
}
Here's a codepen demonstrating my issue.
http://codepen.io/craigsh/pen/ZWxGEQ
the problem is that margin takes extra spaces.
I think you probably just need to restructure your layout. does this work for you?
see http://codepen.io/anon/pen/NNYqLG
I replaced one div to span just to quickly avoid your div background css.
<div layout="row" layout-margin>
<div flex="33">Test</div>
<div flex="66">Test66</div>
</div>
<div layout="row" layout-margin>
<div flex="33">Test</div>
<span flex="66" layout="row">
<div flex>Test33</div>
<span flex="none" style="width:15px"></span>
<div flex>Test33</div>
</span>
</div>
The idea behind is to make sure every row has the same structure, but each cell may have its own layout.
I want to display a label <label> My Listview </label> just above a listview on the content div.
however the listview is not displayed properly, it goes above half of the label
<div data-role="content">
<label>My Listview</label>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
Layout is not properly displayed, i'm using version 1.4.5, how to fix it ?
Add css for margin to bottom:
.ui-mobile label {
display: block;
margin: 0 0 1em 0; // you can change as you wish.
}
The not inset listview has a negative 1em margin. This allows it to reach the page edges by defeating any content padding. In your case, you just need to set the top margin to 0 (and possibly bottom margin too if you have controls below it):
.ui-content .ui-listview {
margin-top: 0;
}
You can also set data-inset="true" on the <ul> if you want that look.
I am using jquery-mobile, and I have these two buttons:
<p id="propart">Pro:
<select id="chosenpro" data-inline="true"></select>
<button type="button" id="resetbutton" data-inline="true" data-theme="w">Reset</button>
</p>
I would like them to be displayed side by side (inline).
But I can't figure it out. I did this but it doesn't work. Can you help ?
Here is my css:
#propart .ui-select {
width:75%;
}
#propart .ui-select .ui-btn-icon-right {
width:100%;
}
#propart .ui-btn {
width:25%;
}
Use ui-grid classes, and override their width.
Demo
Markup
<div class=ui-grid-a>
<div class=ui-block-a>button 1</div>
<div class=ui-block-b>button 2</div>
</div>
CSS
.ui-block-a { width: 75% !important; }
.ui-block-b { width: 25% !important; }
There is no need to define any css rules.
jqm has Layout grids
All you need to do is:
<div class=ui-grid-a>
<div class=ui-block-a> <select id="chosenpro" data-inline="true"></select></div>
<div class=ui-block-b><button type="button" id="resetbutton" data-inline="true" data-theme="w">Reset</button></div>
</div>