I would like to fit child <material-expansionpanel> that is into a AngularDart component invoked into <material-tab> to reach parent´s width.
I used [flex] directive, but did not work. How could I to do this work?
See the picture. The <material-expansionpanel> does not expand to right side.
Code:
<!-- parent -->
<material-tab-panel>
<material-tab [flex] label="Formação do Preço">
<precomi-formacaopreco></precomi-formacaopreco>
</material-tab>
<!-- child <precomi-formacaopreco> -->
<div>
<material-expansionpanel name="Atividade Principal" flex [showSaveCancel]="false">
<material-radio-group flex>
<material-radio [checked]="true">Comércio</material-radio>
<material-radio>Indústria</material-radio>
<material-radio>Serviços</material-radio>
</material-radio-group>
</material-expansionpanel>
...
</div
I do not think [flex] does anything in particular here. If you don't constraint width then expansion panel should take whole horizontal space. If that doesn't happen you can try filing an issue to angular_components with runnable reproduction instructions.
I think the issue might be that your <div> the <material-expansionpanel> does not expand to the width of page. Can you try setting the width of the <div> to 100%?
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 need to remove the defualt pagination provided by ZK in one of zul page and add a vertical scroll bar instead. How to achieve this?
Perhaps you are refering to a listbox or a grid component, in that case you probably have something like this:
<listbox id="listbox" mold="paging" pageSize="10">
or
<grid id="grid" mold="paging" pageSize="10">
In both cases, the mold property is making that your component do a pagination, and the pageSize property stablish how many item will be show in every page...
If the component does not have the mold property, zk will put a scrollbar by default (but it can give you an unexpected visual behavior)
If you want to replace the pagination with a scrollbar you can put a css property into your component, like this:
<listbox id="listbox" style="overflow:auto">
You can see an example here
I'm using the Polymer core-list in a page and the display provides a good result, but when I try to use this file as a Polymer custom element, it shows me this error : core-list must either be sized or be inside an overflow:auto div that is sized.
How to resolve this problem please ?
Because your question doesn't provide much information just a guess. You are missing
<polymer-element name="xxx">
<style>
:host {
display: block;
}
</style>
<core-list-dart>
...
</polymer-element>
From the core-list documentation:
IMPORTANT: core-list must ether be explicitly sized, or delegate
scrolling to an explicitly sized parent. By "explicitly sized", we
mean it either has an explicit CSS height property set via a class or
inline style, or else is sized by other layout means (e.g. flex or
fit). Alternatively, core-list can delegate scrolling to a scrollable
element that contains the list by setting the scrollTarget property,
and the same explicit sizing requiremets will apply to that element.
You should be good to go, if you set a height property for your element.
<polymer-element name="somename">
<style>
:host {
display: block;
}
.someclass {
height:10vh;
}
</style>
<core-list-something class="someclass">
...
</polymer-element>
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 writing an opensocial gadget. My structure is something like this:
<div style="height:200px;overflow:auto;">
<div id="dComment">Comments are loaded here.</div>
</div>
I update the content of the "dComment" every second, and its content gets some scrolling.
In my gadget I have specified <Require feature="dynamic-height"/>
When I use gadgets.windows.adjustHeight() it calculates the height of the content regardless that I have made some part of it hidden through adjusting a height for my outer div. As a result I see a huge white space below my content !!!
I know that I can specify height for adjustHeight function. But then it means that on every update I have to calculate the height of the gadget myself, and I don't want to do it (if possible).
Can someone explain to me why it happens and how can I solve it ?
Instead of visibility:hidden use display:none