I have a container with an arbitrary width and inside I use flexbox, to have:
A material2 select box, that should use up all given space automatically
Another container with a fixed width next to it, that should always be visible and have a fixed with of 140px:
<div style="display: flex; display: -webkit-flex; width: 300px;">
<div style="flex-grow: 1;">
<mat-form-field style="width:100%">
<mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div style="flex-basis: 140px; flex-grow: 0; background-color: #f00;">
</div>
</div>
Unfortunately the width:100%, covers the whole flex container and therefore hides the static one.
In my plunker you can see the red area as my static element:
https://plnkr.co/edit/E1BE26Zd8L5D3yc6SPPw?p=preview
The red area should be always 140px wide, but in the example it can only take up 100px, because the mat-form-field already needs 200px (this is the default value). However, if I change the 200px width to 100% like in my example, the container covers everything.
How can I archive a 140px wide static element with a flexible select drop down next to it?
Try adding flex-basis: 0 to the styles of the div containing the mat-form-field. This will work with your width: 100% modification.
Related
I've been trying to get the images to center on the page. I tried justifying the content in the center and also aligning items in the center but neither works. Neither does margin auto (which usually does work). I tried setting similar stylings for the div containing the image but still no change. I know I can add margins but causes and issue when I set the background color of the page so I'd like a different solution. Let me know if you have any ideas, thanks!
<ngb-carousel *ngIf="images" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let image of images">
<div class="picsum-img-wrapper">
<img [src]="image" alt="Random slide">
</div>
</ng-template>
</ngb-carousel>
img {
width: 50vw;
height: 80vh;
margin-left: auto;
margin-right: auto;
}
Wrap your carousel inside a div with display flex. Something like this.
<div class="carouselCont">
<ngb-carousel *ngIf="images" [showNavigationArrows]="true" [showNavigationIndicators]="true">
<ng-template class="imageSlider" ngbSlide *ngFor="let image of images">
<div class="picsum-img-wrapper">
<img [src]="getImageLink(image)" alt="Random slide">
</div>
</ng-template>
</ngb-carousel>
</div>
The css style of carouselCont class applied shall be
.carouselCont{
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
height:100vh;
}
This way your carousel shall be aligned to center of the screen horizontally and vertically. No need to give vh/vw or margins to image itself for the sole purpose of aligning carousel in center (this way your images shall get stretched /shrinked in different screen resolutions)
Thanks.
<mat-autcomplete> and <mat-select> are overlaying my header. I have a sticky header and if I'm opening mat-autocomplete or mat-select and I'm scrolling, the list is overlaying the header. I saw that the content is in a div cdk-overlay-container. I've tried to use a bigger z-index for header but not works.
Here it is: below I just want to make the slide toggle to not be covered by the panel. So I applied a class to its div container (my-class).
.my-class {
position: relative;
z-index: 2000;
background-color: blue;
color: white;
}
z-index must be higher than 1000 (#angular/cdk/overlay's default z-index).
position: relative is important here, as, per css docs (w3schools):
z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img class="example-option-img" aria-hidden [src]="state.flag" height="25">
<span>{{state.name}}</span> |
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<br>
<div class="my-class">
<mat-slide-toggle
[checked]="stateCtrl.disabled"
(change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
Disable Input?
</mat-slide-toggle>
</div>
</form>
html
<div class="xxx">
<div class="xyz" ng-repeat="item in formList">
<div ng-show="formList.indexOf(app)!= -1" class="added-item">
<img class="col-md-6 added-item-icon" ng-src="app.iconFile"/>
</div>
</div>
<div class="abc" ng-hide="formList.length>20">
<button class="btn" ng-click="addItem()">
Add<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
</div>
css
.xxx {
width:500px;
height: 80px;
}
.added-item-icon, .abc {
width: 50px;
height: 50px;
}
I'm not good in css, and have only very basic knowledge
I am trying to add some list of items in a horizontal tab of height 80 and width 500 pixels, also an add app button too
As per the code, the add app button disappear when we add the 20th app
what I need to do is, lets say the xxx div(horizontal div) can have 5 items, after which overflow occurs
I want to set the overflow horizontal, not vertical
also at that stage(when 5 items are added), I want to fix the add app button at the very right of the division xxx, and the scroll due to overflow should not affect that button, it should be fixed there
we doesn't need to care more about the size of the item icons or add button,
Please help
For this you'll want to look into using flexbox. To get this working, all you really need to do is add display: flex; flex-direction: column to your container, and then overflow-y: auto to the section you want to scroll.
Heres a Plunker demonstrating it.
I'm creating an application in angular 6 (I plan to migrate it to ng7) and in one of component need to add 2 elements, ng material's textarea and my custom component. Each should take 50% of available height. I have a problem with textarea as generated mat-form-field-wrapper takes only as much space as it needs and I can't achieve my goal in that element (I don't want to use any ::ng-deep solutions as it isn't recommended)
Here's what I've done so far (a sample of course):
<form [formGroup]="myGroup" fxLayout="column" fxLayoutAlign="center stretch" fxFlex="1 1 100%">
<mat-form-field fxFlex="1 1 100%" fxLayout="column" fxLayoutAlign="start stretch">
<textarea matInput formControlName="myControl" fxFlex="1 1 100%"></textarea>
</mat-form-field>
</form>
<my-custom-component *ngIf="somevariable" [variable]="somevariable"></my-custom-component>
You will need to override style in your global style sheet as an alternative to using deep. I'm not confident you can make this work perfectly under all conditions because of the way elements of the form field are laid out and variable paddings etc, but here's a starting point:
<form [formGroup]="myGroup" style="display: flex; flex-direction: column; height: 50%;">
<mat-form-field class="stretch-height">
<textarea matInput formControlName="myControl"></textarea>
</mat-form-field>
</form>
<my-custom-component style="height: 50%" *ngIf="somevariable" [variable]="somevariable"></my-custom-component>
Global CSS:
.mat-form-field.stretch-height,
.mat-form-field.stretch-height .mat-form-field-flex,
.mat-form-field.stretch-height textarea {
height: 100%;
}
.mat-form-field.stretch-height .mat-form-field-wrapper {
height: calc(100% - 1.34375em);
}
.mat-form-field.stretch-height .mat-form-field-infix {
height: calc(100% - 1.34375em - 2px);
}
It is vital that the parent container is 100% height or however you wish.
Here's a demo on StackBlitz.
I have a bootstrap column defined as follows:
<div class="col-md-4 limit">
<img id="myImage" src="" class="img-responsive"/>
</div>
<style>
.limit {
max-height:500px;
overflow:hidden;
}
</style>
The source of the image is obtained programatically so I do not know in advance the height or width of my image. What I want to do is that the image in this column whose height is limited appear completely inside of the div. With the img-responsive class I have achieved the image to horizontally fill my column, however, as this class also sets the height to auto, most of the time this causes the image to overflow and be hidden. I do not want my image to overflow in any way.
So, lets say that my column measures:
Width: 300px (defined by bootstrap)
Height: 500px (.limit)
And my image dimensions are:
Width: 600px
Height: 1500px
The current configuration makes the image shrink to 300px x 750px. As its container is set to only 500px, this causes the last 250px to be lost inside the overflow. I would like to image instead to be resized to 200px x 500px in order for it to completely into the containing div
How can I do this?
Thanks!
Try this:
<div class="row">
<div class="col-md-4">
<div class="limit">
<img src="images/yourimage.png" alt="" />
</div>
</div>
</div>
<style type="text/css">
.limit{
width: 300px;
height: 500px;
max-height: 500px;
overflow: hidden;
}
.limit img{
width: 100%;
height: 100%;
}
</style>
You could try to inherit the height or the width of the parent div (as both would not contain proportions). This could only work if you have the same type of img (all portret or landscape). Other solution is to calculate the dimensions based on the max width/height of the img in your program language. Pick the one that matches the condition (both var <= max value). Then echo the solution in your html.
#Luis Becerril I normally used this plugin with those type of issues. Please try this. If may suit to your requirement. jQuery Image Center
Simplest way in Bootstrap 4
<div class="row">
<div class="col-md-4">
<img src="images/yourimage.png" alt="" class="w-100" />
</div>
</div>