Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Hari Dudani
20
IgxLayout
posted

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. 

Parents Reply
  • 740
    Offline posted in reply to Hari Dudani

    Hello Hari,

    Thank you for following up!

    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:

    1. When defining a container element with igxLayoutItemAlign, there is no need to define it again for the child elements as it defines the default behavior for how children are laid out along the cross axis of the current line.
    2. When using either of the following properties:

    igxFlexBasis
    igxFlexGrow
    igxFlexOrder
    igxFlexShrink

    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.

    Sincerely,
    Riva Ivanova
    Associate Software Developer

Children