The goal
I'm trying to write my own search bar for mat-table. The search bar consists only of inputs - one for each column. I placed it right above the table and now I'm trying to distribute them equally with the help of flex-layout, like the table does with its columns.
The problem
But the problem is that those inputs don't listen to me and don't shrink but they overflow outside the wrapping element. I need them to shrink equally to fit in the wrapping section but I don't know how to do this.
The code
Here is the sample of the code I wrote so far:
<section fxLayout="row" class="search-table" style="overflow-x: auto;">
<mat-form-field *ngFor="let item of items" fxFlex>
<input matInput type="text" placeholder="sample text" fxFlex>
</mat-form-field>
</section>
.search-table {
border: 1px solid black;
}
EDIT
Here's stackblitz example of my problem. Flex-layout don't work there for some reason so I added flex to css.
The problem comes from the .mat-form-field-infix class which sets a width of 180px on the input.
Solution: Add the class below to the styles.css file
.mat-form-field-infix {
width: auto!important;
}
StackBlitz: here
Related
I am trying to add a button to a mat-list-item. This is my current HTML template code:
<mat-selection-list
[multiple]="false"
[class.selected]="currentItem"
formControlName="itemListControl"
>
<mat-list-option
*ngFor="let item of items"
[value]="item.id"
>
<div style="display: flex; justify-content: space-between; align-items: center">
<div style="display: flex; align-items: center">
{{ item.name }}
</div>
<button mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
</div>
</mat-list-option>
</mat-selection-list>
When I inspect the site in my browser, I can see that there is a 16px padding which moves the button to the left inside the list item:
I already tried removing it by adding this to my scss file for the component:
.mat-list-item {
padding-right: 0 !important;
}
For some reason, this does not have any effect. It seems like this is not even applied at all to the element. What am I doing wrong and how can I get rid of this padding (without causing any potentially bad side effects)?
Please use like below. It would work.
.mat-list-text {
padding-right: 0 !important;
}
Thanks!
Use the whole selector(instead of just .mat-list-text, copy all the selector part of the css highlighted in the image above) to remove the the padding, angular material is very hard to modify. Dont forget to add the !important aswell. I had to do this previously. I hope it will work for you aswell.
I'm trying to implement a virtual scroll in my image gallery. My problem is that the implementation doesn't work correctly. First, the elements are displayed in vertical position, when in fact they should respect the horizontal breakpoints and only then respect the vertical scroll. Second, with the scroll elements appear with huge spacing.
Does anyone know how I can solve this problem? thanks
DEMO
HTML
<div [ngSwitch]="viewMode" style="height:100%; width:100%">
<div id="tab2" *ngSwitchCase="'tab2'" style="height:100%; width:100%">
<div
style="margin-left: 16px; margin-right: 16px;height:100%; width:100%"
class="first"
>
<ng-container
*ngIf="
arrayDeNomesCategorias.length == 0 ||
arrayDeNomesCategorias == undefined
"
>
<ul
class="mdc-image-list my-image-list"
style="height:100%; width:100%"
>
<cdk-virtual-scroll-viewport
itemSize="50"
style="height:100%; width:100%"
>
<ng-container *cdkVirtualFor="let i of images; let j = index">
<li class="mdc-image-list__item">
<div class="mdc-image-list__image-aspect-container">
<img
src="https://material-components-web.appspot.com/images/photos/3x2/{{
i + 1
}}.jpg"
class="mdc-image-list__image"
/>
</div>
</li>
</ng-container>
</cdk-virtual-scroll-viewport>
</ul>
</ng-container>
</div>
</div>
</div>
Problem
Correct, but without the implemented scroll :(
I updated your example here.
Your problem was mainly css and there seem to have been (at least) 2 problems:
Your are giving .mdc-image-list__item class min-height: 400px and max-height: 400px. That basically means that all your .mdc-image-list__item containers will have 400px height (so height: auto is kind of useless). Removing this will remove the white space between your images.
If you want to have scroll as well as elements on the same page you should use a flex container with flex-wrap: wrap.
In order to do this I used the following snippet (for your case):
:host ::ng-deep .cdk-virtual-scroll-content-wrapper {
display: flex;
flex-wrap: wrap;
}
You can read more about host and ng-deep here. But please be aware that according to this article (and not only) is recommended to avoid using it in recent version of angular. For the sake of simplicity I used it on your example but you might want to avoid it in production.
(extra) : As a small improve I also removed the duplicated margin: 10px; height: auto; max-height: 400px; properties from .mdc-image-list__item media queries (and only leaved the initial one with no media query). It will be applied anyway since there isn't anything to overwrite it and just changing just the with on the media queries should be enough.
The sample code:
<div>
<mat-list fxLayout="row" dense>
<mat-list-item *ngFor="let label of labelsList"> <!-- just an array of strings -->
<button mat-button>
<mat-icon>cloud</mat-icon>
{{label}}
</button>
</mat-list-item>
</mat-list>
</div>
The result:
When I resize the browser window:
What I need: the buttons that don't "have room" to simply go on the next row.
How do I achieve this? I tried several combinations of CSS classes, properties, etc... nothing worked.
LATER EDIT: here's a complete reproducible example: https://angular-svt72k.stackblitz.io
mat-list-item is by default using the full width of its container and setting each item as display: block. To overrule this, you need to override the default Angular (Material) styling that comes with <mat-list>.
Setting .mat-list-test to display: flex and adding flex-flow: row wrap will make it go to the next line when there's not enough space available. Next to that, as said, the .mat-list-item styling is taking the full width. You can override it by setting display: initial and width: auto. Read more about flexbox at MDN.
CSS
.mat-list-test {
display: flex;
flex-flow: row wrap;
}
.mat-list-base .mat-list-item.mat-list-item-test {
display: initial;
width: auto;
}
See this example on StackBlitz to show the outcome.
I have created a sample jsFiddle here, with the html copied straight from my web page. I have included the css for bootstrap 4 which i have compiled using sass, along with the rest of my css.
Now from what i can see, this should all line up fine, and on all sizes it does, until you get to a small display. Then for some reason the input boxes and buttons seem to go all the way to the edge, but the rest of the content (labels, headers, p text, tabs etc) seem to stay within the bounds of the tab-content box.
Here is the link to the jsFiddle example
https://jsfiddle.net/Gillardo/y3Lr9sbf/1/
Why is this? Have i laid something out incorrectly, or is it just a bug with bootstrap 4 currently? I am asking here because if i go to the bs4 examples, it lays out correctly, which you can find here, and i cannot tell what i have done differently http://v4-alpha.getbootstrap.com/components/forms/#using-the-grid
An example of how my form is created, using form-group is like so
<div class="row form-group">
<label class="col-sm-3 form-control-label">Label</label>
<div class="col-sm-9 col-md-7">
<input class="form-control form-control-lg ng-pristine ng-untouched ng-valid" disabled="disabled">
</div>
</div>
Class .tab-content is set with 0 padding, if you want some change the following:
.nav-pills+.tab-content {
border: 0;
padding-bottom: 3rem;
padding-left: 0; // <-- change
padding-right: 0; // <-- change
}
Alternative answer, modify .row class to remove negative margins:
.row{
margin-left: 0 !important;
margin-right: 0 !important;
}
I have:
<div>
<input id="input" type="text" />
<button id="submit">submit</button>
</div>
which gives me this
If I expand the main panel by dragging it with the mouse cursor the width the new space is empty:
I want that the <input type="text" /> fills the whole horizontal new space but that the submit button remains in the same row.
I tired to use <input style="width:100%" type="text"/> but then it fills the whole row and the submit button appears in the next row:
I also tried a table as mentioned in that thread:
Liquid textfield width
The result was that it works "a little bit" the submit button overlaps the input text and a certain space on the right always remains empty:
Can somebody help me with an code idea for fill the whole space except the (static) size of the submit button.
Thanks!
The "table" method you linked to will work, but you're missing one crucial property on your input elements: box-sizing.
http://cssdeck.com/labs/sbffl3l2
<div class="foo">
<div class="bar"><input type="text"></div>
<div class="bar"><input type="submit"></div>
</div>
.foo {
display: table;
width: 100%;
}
.bar {
display: table-cell;
}
.bar:first-child, input[type="text"] {
width: 100%;
}
input {
box-sizing: border-box; /* this is the key */
}
Prefixes may be required: http://caniuse.com/#feat=css3-boxsizing
I believe you can do this:
<input type="text" style="width:calc(100%- widthofbuttoninpixels);" />
It's not advisable to do inline styles though.
Edit: Make sure you also define a fixed width for the button
Why not give width of 70% to input and 20% to button?