Hi,
I want to fit the elements of the first group (the numbers) to look like the second group(noche, mañana...). Change sizes according to the outer element.
I set both the group and individual element width to 100%
The numbers go all the way to 22 but they are cut off.
I used the answer in this question: Angular-material constant width of button group
The elements are there but they overflow, is there any way to distribute the available width between the 24 buttons without it overflowing?
Thanks in advance.
EDIT: Stackblitz
My HTML:
<div class="row">
<div class="col-12">
<label>Horas</label>
<div>
<mat-button-toggle-group [formControl]="hoursCtrl" multiple>
<mat-button-toggle *ngFor="let hour of hours" [value]="hour">{{hour}}</mat-button-toggle>
</mat-button-toggle-group>
</div>
<mat-button-toggle-group [formControl]="dayMomentCtrl" multiple>
<mat-button-toggle *ngFor="let dMoment of dayMoments; let i = index" [value]="i">{{dMoment}}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
My scss:
.mat-button-toggle-group {
height: 20px;
font-size: 11px;
align-items: center;
width: 100%;
}
.mat-button-toggle {
width: 100%;
}
You can enclosed all under a class wrapper
<div class="wrapper">
<mat-button-toggle-group class="min-width" [formControl]="hoursCtrl" multiple>
<mat-button-toggle *ngFor="let hour of hours" [value]="hour">{{
hour
}}</mat-button-toggle>
</mat-button-toggle-group>
<mat-button-toggle-group [formControl]="dayMomentCtrl" multiple>
<mat-button-toggle
*ngFor="let dMoment of dayMoments; let i = index"
[value]="i"
>{{ dMoment }}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
Then, in styles.css remove the "padding" of the groups-buttons
.wrapper .mat-button-toggle-appearance-standard .mat-button-toggle-label-content,
.wrapper .mat-button-toggle-label-content {
padding:0;
}
You can also add a min-width to the group
.wrapper .mat-button-toggle-group {
...
min-width:400px;
width:100%;
}
stackblitz
Related
I want to fix ngx-audio-player at bottom of the screen like most music streaming websites.
I'm using inside which I've and . Inside , I've for dynamic content and my for playing music.
The problem is has different heights based on the content of the link visited and moves up-down because of that. takes height equal to the content of the visited page.
How to fix position of at bottom of screen (also leaving space for sidenav on left side) no matter height of
If has more content, then only it will scroll not the
.sidenav-container {
height: 100%;
}
.sidenav {
width: 200px;
}
.sidenav .mat-toolbar {
background: inherit;
}
.mat-toolbar.mat-primary {
position: sticky;
top: 0;
z-index: 1;
}
.router-link-active{
background-color: #aaa7b4;
}
.example-spacer {
flex: 1 1 auto;
text-align: center;
}
<mat-sidenav-container class="sidenav-container" >
<mat-sidenav #drawer class="sidenav" fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list *ngIf="!anyrole">
<a *ngFor="let item of menuItems" mat-list-item [routerLink]="'/'+item" routerLinkActive="router-link-active"> {{item | titlecase}} </a>
</mat-nav-list>
<mat-nav-list *ngIf="anyrole">
<a *ngFor="let item of menuItems" mat-list-item [routerLink]="'/admin/'+item" routerLinkActive="router-link-active"> {{item | titlecase}} </a>
<amplify-sign-out></amplify-sign-out>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span >Organization Name</span>
<mat-form-field *ngIf="!orgName" class="example-spacer" appearance="fill">
<mat-label >Select School</mat-label>
<mat-select name="schoolId" [(ngModel)]="selectedSchool" (selectionChange)="refreshId($event.value)">
<mat-option *ngFor="let school of facilitatorSchool" [value]="school.id">
{{school.name}}
</mat-option>
</mat-select>
</mat-form-field>
<span *ngIf="orgName" class="example-spacer">{{orgName}}</span>
<span >Hi {{currentUserName}}</span>
</mat-toolbar>
<router-outlet></router-outlet>
<app-player fixedInViewport></app-player>
</mat-sidenav-content>
</mat-sidenav-container>
Try by encapsulating the router-outlet inside a as:
<div class="my-div">
<router-outlet></router-outlet>
</div>
Where my-div should set the router space. For example:
my-div{
top: 0;
left: 0;
position: absolute;
width: 100vw;
height: calc(100vh - $navbar - $controls);
max-height: calc(100vh - $navbar - $controls);
scroll-y: auto;
}
Where navbar and controlls are the heights of navbar and audio player.
The important part is to set max height and scroll. So now, the whole app wont scroll, but only the content of my-div.
Then the router should work only inside that div. And you can properly manipulate audio-player position.
Also, if that doesn't work, try by encapsulating audio-player and my-div inside another div, which should have full size and work as a whole screen div and contain all other divs. Make sure to style correctly.
You can also, try setting the body's css to scroll: none, and then style divs inside to properly scroll when it's needed.
I am using PrimeNG - OrderList but the buttons are too small
How to resize the buttons to make the bigger?
Here is my code
<p-orderList [value]="products" [listStyle]="{'height':'auto'}" header="List of Option Codes"
dragdrop="true">
<ng-template let-product pTemplate="item">
<div class="product-item">
<div class="product-list-detail">
<h5 class="p-mb-2">{{product.optionCode}}</h5>
</div>
</div>
</ng-template>
</p-orderList>
The buttons are too small
You can add css to .product-item like -
.product-item {
font-size: 15px; !important
}
I am new in Angular. this is my main table(its wireframe)
when i click on pencil icon it should look like this:
but i am not getting the output like this. i have tried this
stackblitz url: https://stackblitz.com/edit/mat-table-custom-dtb5bv?file=index.html
problem facing:
dropdown going in right side of update button
Seems like the menu is having width: 100%;. Which makes the button move to the next line. So to have both in the same row try adding the following.
.mat-cell .mat-select {
width: auto;
min-width: 100px; /*adjust accordingly*/
}
Some adjustments to CSS and HTML were necessary. Further adjustments will be necessary, but it is an initial idea.
HTML
<span *ngIf="!element.isSelected; else editPlace">
{{element.value}}
</span>
<button mat-icon-button aria-label="Toggle star" *ngIf="i!==2 && !element.isSelected"
(click)="editSetting(element)"
style="color: blue">
<mat-icon class="material-icons">edit</mat-icon>
</button>
<ng-template #editPlace>
<div class="editPlace">
<mat-select>
<mat-option *ngFor="let value of dropDownValues">
{{value.name}}
</mat-option>
</mat-select>
<button mat-raised-button color="accent" class="submit-button" *ngIf="element.isSelected" (click)="update(element)">Update</button>
</div>
</ng-template>
<ng-container *ngIf="i===2">
<mat-slide-toggle></mat-slide-toggle>
</ng-container>
CSS
.editPlace {
display: flex;
}
.editPlace > * {
margin-right: 10px;
}
.mat-select {
border: 1px solid #666666;
border-radius: 5px;
width: 10em;
}
I have some checkboxes, but they are positioned next each other and not under each other.
I have this:
.mat-header-cell mat-checkbox {
padding-top: 50px;
padding-right: 1px;
padding-left: -10px;
display: block;
}
.mat-header-cell:hover mat-checkbox {
padding-top: 50px;
padding-right: 1px;
padding-left: -10px;
display: block;
}
.mat-checkbox-inner-container{
display: block;
}
And this is the html:
<div class="col-sm-12" *ngFor="let item of returnProjectCodes; let i = index">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="selected = i"
[checked]="selelected === i"
>{{item.name}}
</mat-checkbox>
</div>
But the header 'projects' doesnt positioned correct anymore.[![enter image description here][1]][1]
<ng-container matColumnDef="projects">
<th mat-header-cell *matHeaderCellDef (mouseover)="show = true" (mouseout)="show = false" mat-sort-header i18n>
<div class="col">
<div class="row" *ngFor="let item of returnProjectCodes; let i = index">
<mat-checkbox (click)="$event.stopPropagation()" (change)="selected = i" [checked]="selelected === i"
>{{ item.name }}
</mat-checkbox>
</div>
</div>
Projects
</th>
<td mat-cell *matCellDef="let row">{{ row.projects }}</td>
</ng-container>
Not sure entirely what you are asking, but I assume it is for them to be in vertical order and not horizontal.
You can apply a CSS display as block as you are doing, however you should do it on the parent, and the col-sm-12 is probably keeping the width small so that they line up horizontally.
You can remove that and try setting the width to 100% (this probably wont be necessary, it should default to that width for a block div)
Please keep in mind the more context you can provide the better, such as a picture of what you have versus what you are going for.
Trying to display a list of things in a single line using flex display. I am using angular 7 for development.
Below is the HTML I implemented:
<div class="d-flex">
<span>Other: </span>
<div class="d-flex">
<div *ngFor="let allergy of allergies; let i = index">
<span *ngIf="i > 0">,</span><span *ngIf="allergy"> {{ allergy }}</span>
<span *ngIf="!allergy">None</span>
</div>
</div>
</div>
d-flex is the bootstrap display class:
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
In my component allergies is set to
allergies = ['dermatological allergies', 'dust', 'pollen', 'mold'];
Display:
As seen, the list does not break properly and the display is distorted. This happens when the list length exceeds the computed column width. How can I display it as a list that breaks properly as expected? Please let me know if I can improve my question or if I can provide any more information.
I think this is what you want:
<div class="d-flex">
<span>Other: </span>
<div>
<ng-container *ngFor="let allergy of allergies; let i = index">
<span *ngIf="allergy">{{ allergy }}</span><span *ngIf="i < allergies.length - 1">, </span>
<span *ngIf="!allergy">None</span>
</ng-container>
</div>
</div>
Here is a stackblitz example showing how this looks like.
Hope this helps...
With angular, I suggest you to use Flex-layout from Angular.
With your to wrap your item, use row wrap
With your code, you can also do:
<div class="d-flex">
...
...
<div *ngFor="let allergy of allergies; let i = index" class="d-flex">
...
</div>
</div>
</div>