Need comprehensive documentation on this topic. There is not much available directly on the Infragistics site.
BTW, ChatGPT has lot more but much of it seems unreliable.
Hello Hari,
Thank you for posting into our community!
I have been looking into your question and what I could say is that the igxLayout directive is used to arrange elements, organize screen content, and add/improve the structure of overlay elements. It should be applied on a container element, and it affects the flow directions for that container's immediate children.
By setting the igxLayout directive to a container element, you could further customize the immediate children by benefiting the additional properties that are provided, such as:
igxLayoutDirigxLayoutItemAlignigxLayoutJustifyigxLayoutReverseigxLayoutWrap
Additional customization could be applied to the flex properties of the children by setting the igxFlex directive to the respective children and applying any of the additional properties that are provided, such as:
igxFlexBasis igxFlexGrow igxFlexOrder igxFlexShrink
Furthermore, our Layout Manager topic here provides several samples demonstrating how the different directives could be used and additional information could be found in the respective API documentation:
igxLayout API igxFlex API
Also, another useful resource that I could suggest is the specification section in our GitHub repository here.
Additionally, in order to assist you further, it would be highly appreciated if you could provide further information on the requirements of your application. This would be extremely helpful in providing guidance and/or a possible approach for achieving a certain requirement and developing a working sample as a reference.
Thank you for your cooperation. Looking forward to your reply.
Sincerely, Riva Ivanova Associate Software Developer
Are the child nodes of a IgxLayout container tagged with"IgxLayoutItem"? Otherwise, how does the container node identify its children?
In my app.component.htmli have the following:
Thank you for following up!
I am glad that you find my suggestion helpful and managed to achieve your requirement.
I have been looking into your additional questions, however, please keep in mind that according to our support policy we handle a single question per forum thread and since the initial theme is regarding the igxLayout directive, my suggestion is to create separate threads with your new questions. This is for better consistency and history tracking.
Thank you for using Infragistics components.
Thank you very much for your help. My code is now working. A few further issues:
Thanks. Hari
Here could be found a sample with similar configuration as the provided one to demonstrate how the container elements and their children could be aligned as desired.
In order to view the sample in full screen, copy the following link and paste it in a new tab:
However, after looking into the provided code snippet, I have the following suggestions for you:
the igxFlex directive should be added as well.
For example, the following:
<div igxLayout igxLayoutDir="row" igxLayoutJustify="space-between" igxLayoutItemAlign="center" style="width: 100%; height: 100px; background-color: lightgray"> <div igxFlexOrder="0" igxLayoutItemAlign="center"> <!-- Go Button --> <button igxButton="raised" disabled="false" igxRipple style="width: 50px; height: 50px"> Go </button> </div> </div>
should be modified to the following or similar:
<div igxLayout igxLayoutDir="row" igxLayoutJustify="space-between" igxLayoutItemAlign="center" style="width: 100%; height: 100px; background-color: lightgray"> <div igxFlex [igxFlexOrder]="0"> <!-- Go Button --> <button igxButton="raised" disabled="false" igxRipple style="width: 50px; height: 50px"> Go </button> </div> </div>
Having this in mind, I would suggest referring to the Layout Manager topic as it provides multiple samples demonstrating how the configuration of the properties should be applied and how they affect the elements’ behavior and alignment.
Additionally, please note that we do not support the following elements: igx-button, igx-input, and the following:
<!-- Ticker --> <igx-drop-down igxFlex [items]="tickerList" valueKey="value" displayKey="label" [(ngModel)]="selectedTicker"> </igx-drop-down>
is not the correct way to define the IgxDropDownComponent as it does not support the items, valueKey and displayKey properties and binding via the ngModel.
I believe that you will find the following topics quite helpful:
IgxDropDownComponent IgxInputGroup IgxLabel and IgxInput directives IgxButton IgxComboComponent and IgxSimpleComboComponent – both support the valueKey and displayKey properties and use the data property for their source data
To conclude, I would suggest referring to our official documentation and the different topics as they provide detailed information along with code snippets and samples demonstrating and explaining the components, their functionalities and what they are used for.
Also, by following the abovementioned suggestions as well as the ones from my previous messages and observing the configurations in the attached samples, you could achieve your requirements and cover other scenarios as well.
Thanks Riva.
Please check my example which is right out of the code. Although it is not small, it is pretty straightforward.
The HTML display has two rows at the top. The first row is designed to show the App Name left anchored and the Settings icon right justified. The second row has a number of input fields of various types. These fields in the row are designed to use the full row with equal spaces in between.
I have attached the output. The first row displays the App Name and below it the Settings icon which is wrong. The second row displays the first two fields ("Stock" text button and Go button) stacked up and then no other field to the right of the
<div igxLayout igxLayoutDir="column" style="display: block; width: 100%; height: 100vh; border: 1px solid red"> <div igxLayout igxLayoutDir="row" igxLayoutJustify="space-between" igxLayoutItemAlign="center" style="width: 100%; height: 100px; background-color: aqua"> <div igxFlex> <span style="font-size: 48px; margin-right: 12px; margin-left: 10px;">OptionsMaster</span> <span style="font-size: 18px; margin-right: 5px">v 0.0.1</span> <span style="font-size: 18px">@ 2023-05-04T12:13:14.123PST</span> </div> <div igxFlex> <img src="./assets/application-settings.svg" igxLayoutItemAlign="center" alt="Settings" width="50px" height="50px" style=" margin-right: 10px;" /> </div> </div> <div igxLayout igxLayoutDir="row" igxLayoutJustify="space-between" igxLayoutItemAlign="center" style="width: 100%; height: 100px; background-color: lightgray"> <div igxFlexOrder="0" igxLayoutItemAlign="center"> <!-- Go Button --> <button igxButton="raised" disabled="false" igxRipple style="width: 50px; height: 50px"> Go </button> </div> <div igxFlexOrder="1" igxLayoutItemAlign="center"> <!-- Stock/Option Button --> <igx-button igxFlex (click)="onStockOptionButtonClick()">{{ stockOptionButtonText }}</igx-button> </div> <div igxFlexOrder="2" igxLayoutItemAlign="center"> <!-- Ticker --> <igx-drop-down igxFlex [items]="tickerList" valueKey="value" displayKey="label" [(ngModel)]="selectedTicker"> </igx-drop-down> </div> <div igxFlexOrder="1" igxLayoutItemAlign="center"> <!-- ExpirationDate --> <igx-drop-down igxFlex [items]="expirationDateList" valueKey="value" displayKey="label" [(ngModel)]="selectedExpirationDate"> </igx-drop-down> </div> <div igxFlexOrder="1" igxLayoutItemAlign="center"> <!-- StrikePrice --> <igx-drop-down igxFlex [items]="strikePriceList" valueKey="value" displayKey="label" [(ngModel)]="selectedStrikePrice"> </igx-drop-down> </div> <div igxFlexOrder="1" igxLayoutItemAlign="center"> <!-- Call/Put --> <igx-drop-down igxFlex [items]="typeList" valueKey="value" displayKey="label" [(ngModel)]="selectedType"> </igx-drop-down> </div> <div igxFlexOrder="1" igxLayoutItemAlign="center"> <!-- Last Price --> <igx-input igxFlex [readonly]="true" type="text" [(ngModel)]="lastPrice"></igx-input> </div> <div igxFlexOrder="1" igxLayoutItemAlign="center"> <!-- Change --> <igx-input [readonly]="true" type="text" [(ngModel)]="change"></igx-input> </div> <div igxFlexOrder="1" igxLayoutItemAlign="center"> <!-- Bid Price --> <igx-input igxFlex [readonly]="true" type="text" [(ngModel)]="bidPrice"></igx-input> </div> <div igxFlexOrder="1" igxLayoutItemAlign="center"> <!-- Ask Price --> <igx-input igxFlex [readonly]="true" type="text" [(ngModel)]="askPrice"></igx-input> </div> <div igxFlexOrder="1" igxLayoutItemAlign="center"> <!-- Volume --> <igx-input igxFlex [readonly]="true" type="text" [(ngModel)]="volume"></igx-input> </div> <div igxFlexOrder="1" igxLayoutItemAlign="center"> <!-- Timestamp --> <igx-input igxFlex [readonly]="true" type="text" [(ngModel)]="timestamp"></igx-input> </div> </div>
import { Component } from '@angular/core'; import { defineCustomElements } from 'igniteui-dockmanager/loader'; import { IgcDockManagerPaneType } from 'igniteui-dockmanager'; import { IgcSplitPaneOrientation } from 'igniteui-dockmanager'; import { IgcDockManagerLayout } from 'igniteui-dockmanager'; defineCustomElements(); @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { // ------------------------------------------------------------------------------ // top-bar public applicationLogo: string = "options-master-logo.svg"; public applicationName: string = "OptionsMaster"; public versionText: string = "v 0.0.1 @ 2023-05-04T12:13:14.123PST"; public settingsIcon: string = "application-settings.svg"; // ------------------------------------------------------------------------------ // stocks-options-bar // Go Button public onGoButtonClick() { } // Stock/Option Button public stockOptionButtonText: string = "Stocks"; public onStockOptionButtonClick() { } // Ticker public selectedTicker: string = "SPY"; public tickerList: any[] = [ { value: "SPY", label: "SPY"}, { value: "OTHER", label: "OTHER"} ]; // Expiration Date public selectedExpirationDate: string = "05/01/2023"; public expirationDateList: any[] = [ { value: "05/01/2023", label: "05/01/2023"}, { value: "05/02/2023", label: "05/02/2023"}, { value: "05/03/2023", label: "05/03/2023"}, { value: "05/04/2023", label: "05/04/2023"}, { value: "05/05/2023", label: "05/05/2023"}, { value: "05/06/2023", label: "05/06/2023"}, { value: "05/07/2023", label: "05/07/2023"}, { value: "05/08/2023", label: "05/08/2023"}, { value: "05/09/2023", label: "05/09/2023"}, ]; // Strike Price public selectedStrikePrice: string = "400"; public strikePriceList: any[] = [ { value: "400", label: "400"}, { value: "401", label: "401"}, { value: "402", label: "402"}, { value: "403", label: "403"}, { value: "404", label: "404"}, { value: "405", label: "405"}, { value: "406", label: "406"}, { value: "407", label: "407"}, { value: "408", label: "408"}, ]; // Call/Put Type public selectedType: string = "Call"; public typeList: any[] = [ { value: "Call", label: "Call"}, { value: "Put", label: "Put"} ]; public lastPrice: string = "405.1234"; public change: string = "+6.1234(+4.12%)"; public bidPrice: string = "404.12 (8)"; public askPrice: string = "405.12 (2)"; public volume: string = "12,345,678"; public timestamp: string = "01:02:03 PM PT";
I have attached: component HTML; Component ts and the output screen which is wrong.
Please help me with this problem.
Thanks.
Hari
I have been looking into the provided code snippet and what I could say is that the additional properties, i.e., igxFlexBasis, igxFlexGrow, igxFlexOrder, and igxFlexShrink, could be used in addition to an element that already has the igxFlex directive applied and also they accept values, for example:
<div igxLayout> <div igxFlex [igxFlexOrder]="1">123</div> <div igxFlex [igxFlexOrder]="0">456</div> </div>
Using any of them without the igxFlex directive will not affect the element’s flexbox properties in any way.
Additionally, when testing the provided code snippet and removing the igxFlexOrder property, on my side, the content is displayed as expected - "123" - top left, "456" - top right:
Furthermore, the code could be simplified to the following as the igxLayoutDir defaults to "row":
<div igxLayout igxLayoutJustify="space-between"> <div>123</div> <div>456</div> </div>
or could also be achieved by using igxFlex and igxGrow:
<div igxLayout igxLayoutJustify="space-between"> <div igxFlex [igxFlexGrow]="0">123</div> <div igxFlex [igxFlexGrow]="0">456</div> </div>
The properties correspond to the respective css properties, and I believe that you will find this topic here quite helpful as it provides useful information regarding the use of the css properties and how they affect the elements’ behavior and alignment.
Here could be found a small sample demonstrating the behavior on my side.
Additionally, regarding the following question:
Hari Dudani said:Are the child nodes of a IgxLayout container tagged with"IgxLayoutItem"? Otherwise, how does the container node identify its children?
what I could say is that the child elements are not tagged in any specific way. As children of a container with applied igxLayout directive are considered all immediate elements.
For example, consider the following:
<div id="parent1" igxLayout> <!-- parent of parent2 and parent3 --> <div id="parent2" igxLayout> <!-- child of parent1 and parent of 1 and 2 --> <div igxFlex>1</div> <!-- child of parent2 --> <div igxFlex>2</div> <!-- child of parent2 --> </div> <div id="parent3" igxLayout> <!-- child of parent1 and parent of 3, 4 and 5 --> <div igxFlex>3</div> <!-- child of parent3 --> <div igxFlex>4</div> <!-- child of parent3 --> <div igxFlex>5</div> <!-- child of parent3 --> </div> </div>
Please let me know if you need any further assistance regarding this matter.