How to center Icon in a container

  1. #1

    How to center Icon in a container

    I'm having trouble centering an Icon - specially an iconCls in a container layout:
    <ext:Container runat="server" Width="100" Height="100" StyleSpec="background-color:orange">
        <Content>
            <i class="x-fa fa-compass fa-5x" />
        </Content>
    </ext:Container>
    I've trying using fitlayout and centerlayout but the icon won't show. Suggestions?

    Thank you.
    Last edited by geoffrey.mcgill; Jan 07, 2019 at 7:01 PM.
  2. #2
    Hello @ojuniour!

    One important thing to bear in mind is that from the point you use <Content>, Layout should not be relied upon.

    The <Content> block gives the developer freedom to add arbitrary HTML code within its premises. But also the responsibility to keep the layout therein.

    That said, you should rely on <Items> block whenever you want Ext.NET to deal with the layout. Mixing both block types is not possible in the same component, and so on. Well, if you want to know more about it, let us know, or just do a search in the forums for various topics we have covering this subject.

    Now, as for centering the glyph in the container, here are two alternatives into getting it the way you need:

    1. Style a bare component, rely on Ext.NET for layout:

    <ext:Container runat="server" Width="100" Height="100" Layout="CenterLayout" StyleSpec="background-color:orange">
        <Items>
            <ext:Component runat="server" Cls="x-fa fa-compass fa-5x" />
        </Items>
    </ext:Container>
    2. Keep using the container and the "i" tag

    <ext:Container runat="server" StyleHtmlContent="true" UserCls="blok">
        <Content>
            <div style="width: 200px; height:200px; border: 1px solid red; background-color: orange; display:grid; align-content:center">
                <i style="text-align: center" class="x-fa fa-compass fa-5x"></i>
            </div>
        </Content>
    </ext:Container>
    Notice now how the width/height is relied upon the internal div within the component in the second solution. These are not necessarily the best ever possible solution, they are just two solutions highlighting different approaches of attaining the objective of centering the content within a container.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Nov 21, 2014, 7:11 AM
  2. Replies: 3
    Last Post: Oct 23, 2013, 4:30 PM
  3. Replies: 2
    Last Post: Jun 23, 2012, 3:17 PM
  4. [CLOSED] Center align panel in container
    By machinableed in forum 2.x Premium Help
    Replies: 1
    Last Post: May 04, 2012, 7:55 AM
  5. how to align the Icon in GridCommand to center
    By harshad.jadhav in forum 1.x Help
    Replies: 0
    Last Post: Dec 30, 2010, 11:24 AM

Posting Permissions