I have md-grid-list which contains cards. I have set the number of columns to 4 in the grid-list. When I resize the browser window, the grid list will not resize according to the browser window and contents in the card gets overlapped and looks ugly. How do I set the grid-list to display dynamically according to the browser window size? Or How to set the number of cards in the grid according to the browser window size?
<md-grid-list cols="4" md-cols-sm="2" md-cols-md="4" md-cols-lg="8" md-cols-gt-lg="12" rowHeight="250px" gutterSize="20px">
<md-grid-tile *ngFor="let data of myData">
<md-card [style.background]="'lightBlue'" [style.minHeight]="'100%'" >
<md-card-title></md-card-title>
<md-card-title></md-card-title>
<md-card-content>
<h2>
</h2>
</md-card-content>
</md-card>
</md-grid-tile>
</md-grid-list>
The directives like md-cols-sm are not valid for md-grid-list for your angular veresion. Please have a look at this for more details : Angular 2 md-grid-list
You can use flexbox layout by angular (dzurico.com/angular-flex-layout , github.com/angular/flex-layout/wiki/Responsive-API) or write your own css class to implement the flexbox.
Related
I am trying to use a PrimeNG turbotable with custom size (500px) and I expected the columns width to be set automatically however it does not work. I get a horizontal scrollbar and the total width seems to be fixed at 767 pixels. If I try to set the column width manually it gets ignored. If i don't set the table width and I try to put it inside a DIV that is 500px wide I still get the same result (horizontal scrollbar).
Below is the (very simple) code:
<p-table #dt [value]="statusChangesData" [paginator]="true" [alwaysShowPaginator]="false" [rows]="2" [style]="{'width':'500px'}">
<ng-template pTemplate="caption" >
<div class="tableCaption">
<span translate>Status changes</span>
</div>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td [attr.colspan]="3">
<span translate>There are no data into the table</span>
</td>
</tr>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="width:200px" [pSortableColumn]="'date'"><span translate>Date</span><p-sortIcon [field]="'date'"></p-sortIcon></th>
<th style="width:200px" [pSortableColumn]="'status'"><span translate>Status</span><p-sortIcon [field]="'status'"></p-sortIcon></th>
<th style="width:100px" [pSortableColumn]="'userId'"><span translate>User ID</span><p-sortIcon [field]="'userId'"></p-sortIcon></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-col>
<tr>
<td>{{col.date}}</td>
<td>{{col.status}}</td>
<td>{{col.userId}}</td>
</tr>
</ng-template>
</p-table>
and this is what it looks like:
Turbo Table
As you can see both the header and the paginator respect the width I set (500px) but the body of the table does not.
I have tried every suggestion I can find in stack overflow including setting
the style like this: [style]="{'width':'200px'} or using [autoLayout]="true" but nothing seems to work. I am using primeNG 7.0.0.
PS. I don't really care to set each column width manually. I just don't want the horizontal scrollbar.
In case someone has a similar problem try setting the min-width of the table to 0:
::ng-deep .ui-table .ui-table-wrapper table {
min-width: 0px;
}
I copied your code from above and pasted it in a new Stackblitz project to test it. I even specified the 7.0.0 version of PrimeNG specifically, to make sure there are not any issues with different versions. (I have found that to be the case when I have used PrimeNG.) I also made up some data to show.
I am not seeing the issues you are talking about. Here is what my resulting grid looks like (ignore the fact that Stackblitz is not finding the primeicons.)
It is staying perfectly 500px wide and all columns are obeying the fixed widths you specified in the header row (<th> tags.) When I removed the fixed widths you provided in your <th> tags, all of the columns are auto-adjusting and fitting within the 500px table.
I have this table in its own component and it is not wrapped in a <div> or any other tags. You can check it out on the Stackblitz link I provided above.
I wonder if there is something about the rest of the page this is contained in that is causing the problem?
I am trying to implement a custom combobox dropdown using angular 4 in my web application.
I have used this custom combobox as one of the field in to list of line items using divs.
Here, I wanna open dropdown in last line item of list, but it exceeds the window screen.
How to make the full dropdown visible to user automatically while opening combobox at the bottom of the page?
<div style="height: 56px; margin-left: 7px; min-width:220px" [style.width]="columnsHeaderWidth.division">
<div style="width:180px; height: 56px; max-width:180px; cursor: pointer;">
<combo-box [id]="'division-'+user.uuid" [userOption]="true" [isSelected]="false"
[magicLabelHack]="'projectTypeLabel'"
[includeMagicLabel]="false"
bind-placeHolder="'Select division/group...'"
icon="wizard:chevrondown"
[source]="divisions" [selectedValue]="user.divisionId" (onSelected)="onChangeDivision($event,user,user.division.id)"
[isIconItemList]="true" [itemListWidth]="'230px'"
[changeStyle]="true"
(click)="rowClick(user)" (onFocusVisible)="tabFocus($event, user)">
</combo-box>
</div>
</div>
Snapshot:
Use a template variable with some vanilla JS calculation :
<div #div style="left: 500px;"></div>
<p *ngIf="div?.getBoundingClientRect().x + div?.getBoundingClientRect().width > totalWidth">
The div is out of bounds
</p>
Stackblitz (change the style.left of the div to see it work)
English is just enough broken so I can't decipher what is it that you exactly want, so I assumed that you wanna scroll to the bottom of that dropdown?
In the screenshot you posted I can see the page scroll bar being near the top, I presume that dropdown stretched the page vertically so the end of it is actually visible.
Under those two assumptions, the simplest vanilla solution is to target the last option in dropdown and scroll to it.
el.scrollIntoView() is a vanilla solution where el is the DOM element you are after.
Description of options available in the documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
if you have it in Angular4, you can get the DOM element via var el = ang4ele.nativeElement
It is hard to test this to make it bulletproof for your case before posting due to your code being incomplete (showing only the template part).
By using angular flex layout custom queries I can show or hide some elements like this.
<span fxShow fxHide.lt-sm></span>
In the above example angular flex layout will show span except devices which is little than 599px in width.
My question is how can I use custom query in that context ?
Is that possible to do something like :
<span fxShow fxHide.('screen and (max-width: 677px)'></span>
Thanks.
How do I style angular-ui bootstrap modal dialogs so they appear different from one another in color and/or size? I can style them for the site but not individually.
I found the following similar question but it only provides a solution to change all dialogs: How do I increase modal width in Angular UI Bootstrap?.
During initialization there are options to apply size='lg' and size='sm' but this is not nearly enough to style different dialogs as I would like.
I have tried structuring my html as follows:
<div id="area1">
<div ng-include="'my-dialog1.html"></div>
<div>
<div id="area2">
<div ng-include="'my-dialog2.html"></div>
<div>
Then I have made different css rules for area2 .modal-dialog and area1 .modal-dialog but they have no effect because the html output of those dialogs is not rendered as child elements of my divs.
Is there any way to get individual control over those dialogs?
Angular UI modal configuration can accept CSS class name parameter windowClass. You can provide individual class for each of your dialog and set necessary styles per class:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
windowClass: 'fancy-modal'
});
It will add fancy-class to the topmost modal container, so from there you can set/overwrite whatever styles you want for any inner element. For example:
.fancy-modal .modal-content {
background-color: #EEE;
}
I have a page set out similar to this:
My question is about mobile support and how should I go about doing the following:
When the user resizes the window to about the size of a smartphone screen, I want to remove the main content, which is everything below the header area/login, and keep only the header, the login form and the footer. So I have been using css media queries to do this. My problem is that my login form markup resides within the header area.
<div id = "header">
<div id= "logo"><img src =""/> </div>
+-------form markup here------+
|<div id= "login-form">..... </div>|
+ ----------------------------+
</div>
<div id= "main-content">
This is where I want to put the login form
</div>
So my question is, How should I do this?
should I just create another css file and link/apply that when the screen width-height is detected to be smartphone size ?
Should I create the markup block inside main-content, and set its css style display to none UNTIL the screen is resized to smartphone size, where a media query is set to change display attribute ?
What is the best way to accomplish this? I greatly appreciate any help and at least, some little explanation to justify that answer. Also links and other references are very welcome !
Cheers..
Use Media Queries to hide and show content based on device or device width/height.
Here's a good Media Queries Cheat-sheet:
http://stephen.io/mediaqueries/
I wouldn't position the form as 'absolute' and put it outside the header as another poster suggested. This is super sloppy and bad practice. What's the 'absolute' form going to be positioned too? The body? Aghh. You'd need a wrapper - and that's just more code. You can do it all via CSS. Just use Media Queries to change the CSS styles for the header, show/hide elements, and reposition.
OR
JQUERY (Not the best route, but for what you want you're a limited without a redesign). I kept it simple for easy explanation. Note, I haven't tested this:
$(window).resize(function(){
var maxwidth = $(window).width(); // get device window width
var form = $('#login-form'); // form
if(maxwidth <= 320) { // 320 px or whatever you want
form.clone().appendTo('#main-content'); // clone form and append to main content
form.eq(0).hide(); // hide first form, the one in the header
}
else {
form.eq(0).show(); // show initial form
form.eq(1).remove(); // remove cloned form, if set
}
});
I can see two ways you could go about accomplishing your goal:
Take your login-form out of the header div, put it in the main-content div and absolutely position it to make it appear inside the header when on a desktop screen, then use a media query to move it to below the header for viewing on mobile devices.
Use your idea of having two login-forms: one in the header, and one in the main-content area. Use media queries to change the display attribute so that the correct login-form is showing at the right time depending on the screen size. I'm not sure if duplicating the login-form is good practice, so I would try option 1 to start.
Let me know if this works out!