Ionic-Angular 5
Using https://github.com/roman-rr/cupertino-pane, I am trying to offset the top by the height of the ion-header i.e. height = 100% - (height of header).
I'm within a child component so I can't ViewChild the header, though I'm not sure that works for ion- elements... Is there a way I can programmatically calculate the height of the ion-header element as it'll obviously vary depending on device?
Thanks,
In your component :
#ViewChild('header') header: ElementRef
getHeaderHeight(){
return this.header.nativeElement.offsetHeight;
}
Source : Ionic team
Related
Recently started working on a master detail structure angular ag-grid. The structure has two levels of master-detail nesting. I need to fix the heights of inner - 2 grids such that they occupy all available real estate on the screen. Currently, ag-grid defaults it to 300 px and a lot of whitespace or unused space appears on a 1920x1200 screen resolution monitor. I also need to have fixed headers for all grids.
Any ideas or pointers would be appreciated...
Update: Referring to a forked version of plunker example from ag-grid here - https://next.plnkr.co/edit/yUzo4EqONEmgCmIw This is simple and basic set up for master-detail grid.
Note that: I haven't set any detail row height and have setup just one record to show up in the grid to test for the issue.
If you run the plunker code and view the result in separate window, notice that the inner / child grid doesn't occupy all the space available below it. In other words, it doesn't take as much as space/height available from parent container (master's detail row). The default 300px master detailRowHeight is making height fixed for inner grid. Also, from documentation, detailRowHeight prop doesn't seem to take something similar as 100% or 100vh and only takes fixed pixels number. Added a picture of the example below and the height / unused space I referred
We have different resolutions that users use to view data in grid and the heights of inner grids need to auto-adjust taking max. available space to show most information in the grids.
You could try something like this, I pulled it from the documentation:
In your component.ts file add this method. If it's a detail row it will apply different calculations than the other rows.
public rowHeight(params) {
if (params.node && params.node.detail) {
var offset = 80;
var allDetailRowHeight = params.data.callRecords.length * 28;
return allDetailRowHeight + offset;
} else {
// otherwise return fixed master row height
return 25;
}
};
In your template add the following: [getRowHeight]="rowHeight"
<ag-grid-angular
#agGrid
style="width: 100%; height: 100%;"
id="myGrid"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[masterDetail]="true"
[detailCellRendererParams]="detailCellRendererParams"
[getRowHeight]="rowHeight"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
Hopefully this will get you moving forward. Good Luck!
https://www.ag-grid.com/javascript-grid-master-detail/#detail-row-height
So I don't have a great, full solution for you but as a starting point I would use CSS to override the styles ag-grid is setting - I don't think detailRowHeight is going to help.
Here's my plunk getting close to what you want with some simple CSS I put in index.html. You can use !important to override ag-grid styles, or you could use javascript to set the CSS after ag-grid does. I prefer !important in this case and don't have to worry about timing.
https://next.plnkr.co/edit/mmXBBJE5Wa1JrX7v
The problem I wasn't going to get into is getting it to dynamically fill up available space, depending on the row selected, scroll position, etc. I can't think of any simple way to achieve that - I do this type of thing in grid often and end up writing javascript to calculate the available space, and then set the CSS in javascript.
In ag-grid you have the possibility to set auto height for details.
Set grid property detailRowAutoHeight=true to have the detail grid to dynamically change it's height to fit it's rows.
const gridOptions = {
// dynamically set row height for all detail grids
detailRowAutoHeight: true,
// other grid options ...
}
However if you are providing your own detail component...
detailCellRenderer: 'MyOwnDetailsComponent',
then, it might not work and you will still need to provide an grid options height detail content through...
detailRowHeight: 560,
Please see the ag-grid documentation here
I would like to know if anyone faces this issue of awkward padding between the table and header of sap.f.DynamicPage:
There is nothing "incorrect" about the padding between the header and the content. It's the intended design which can be seen in the source code:
.sapFDynamicPageContent/*, ...*/ {
//...
padding: 2rem 3rem 0 3rem;
}
Don't
This shouldn't be changed if you're following Fiori design guidelines or if the app is supposed to be running on FLP. Please, avoid using custom CSS to remove the padding as mentioned in the documentation:
SAP Fiori launchpad apps should not override styles.
Do (as of v1.56)
What we can and should, however, is to align the table with the header content by removing the side padding shown below:
This can be achieved by adding the predefined CSS class sapFDynamicPageAlignContent to the table with the width: auto. E.g. in XMLView:
<Table class="sapFDynamicPageAlignContent" width="auto">
The SAP Fiori Design guidelines require that the DynamicPageHeader's content and the DynamicPage's content are aligned vertically. When using sap.ui.layout.form.Form, sap.m.Panel, sap.m.Table and sap.m.List in the content area of DynamicPage, you need to adjust their left text offset to achieve the vertical alignment. To do this, apply the sapFDynamicPageAlignContent CSS class to them and set their width property to auto. [src]
Here is an example: https://openui5nightly.hana.ondemand.com/#/sample/sap.f.sample.DynamicPageFreeStyle/preview
Predefined Padding CSS Classes (as of v1.58)
Apart from the above mentioned guidelines, sap.f.DynamicPage now supports the following padding classes:
sapUiNoContentPadding
sapUiContentPadding
sapUiResponsiveContentPadding
E.g.: Applying this completely removes the surrounding padding:
<f:DynamicPage class="sapUiNoContentPadding">
I think it's by design:
Dynamic Page | SAP Fiori Design Guidelines
SAPUI5 SDK - Samples (1.50.10)
actually it's the padding of the content.
With custom CSS you can decrease padding:
.sapFDynamicPageContent {
padding-top: 0;
}
My intention is to have a view with an overlay over the its content and bind the visibility of that overlay to a property of the model. As you see from the plnkr example everything works ok with the absolute layout if the height is set in "px" but does not work if height is set in "%".
Please have a look at the following plunker, file Product.view.js at line 46: http://plnkr.co/edit/1RON6ryRt32d5S461h9m?p=preview
var oAbsLayout = new sap.ui.commons.layout.AbsoluteLayout({
width: "100%",
height: "100px", //THIS ONLY WORKS HERE IF WE SET THE HEIGHT IN "px". DOES NOT WORK WITH %, so the content will be cutt-off
verticalScrolling: sap.ui.core.Scrolling.Hidden,
horizontalScrolling: sap.ui.core.Scrolling.Hidden
});
If I specify the height of the absolute layout in px then the Product view is rendered ok, but the content inside will be cut off in case of wrapping. (the height of the content is not fixed).
Any other ideas how to obtain the overlay over a view? You can play around with that plunker.
Many thanks!
I'm using a layout panel with some layers. One of the layers is quite simple but I want it to have a float: right on the element. But this is actually not working because subwidgets are styled with style="postition: absolute; left: 0px; ..." which overrides the styling and so the subpanels/widgets will always be placed on the left. Any workaround for this?
After adding your element to your layout container, did you try setWidgetHorizontalPosition ?
If above method does not work and you want to use float right, maybe you can use a non-layout system with FlowPanel maybe. Otherwise you will have to fix the position and width/height of your components but you may loose responsive design.
Last trick : If you really need to change the absolute style. In your component do something like this (do this after your component has been added to the dom)
this.getElement().getParent().getStyle().set.....
You can reset whatever property you want but this might break your layout
I am using bootstrap in an Ruby on Rails app. I use Firefox. I find that the height of the dropdown field (select tag) is too small.However the height of the text fields are appropriate. I had too add the below code to application.css to fix it:
select {
height: 38px !important;
}
Now dropdown shows its content properly though its overall height (box) is a bit bigger that text fields. Is there a neater way to fix the issue?
I found it more appropriate to remove styling from application.scss and modify the app/assets/stylesheets/custom.css.scss instead. custom.css.scss is generated by Bootstrap. The padding for all FORM elements was set to 10px in that file. I set padding for SELECT element to 2px and left the rest intact.