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
  • 700
    Offline posted in reply to Hari Dudani

    Hello Hari,

    Thank you for following up!

    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.

    Sincerely,
    Riva Ivanova
    Associate Software Developer

Children