[CLOSED] How to center Icon in a container

  1. #1

    [CLOSED] 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 fabricio.murta; May 17, 2019 at 8:34 PM. Reason: no feedback from the user in 7+ days
  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
  3. #3
    Hello @ojunior!

    It's been some days since we replied your inquiry here, yet, no feedback from you. Did the answer above help you at all? Do you still need help with this issue?

    We may mark this thread as 'closed' if you don't post back in 7+ days from now; but even if we mark it as closed, we don't lock it up, so you'll be able to post a follow-up here whenever you feel like it.

    Looking forward to your feedback!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    I managed to just put padding on it.
    I managed to center it horizontally but not vertically.
    basically I have a container (100px X 100px) and i want to literally center the icon in the middle.
  5. #5
    Hello @ojunior!

    Okay, it seems I tested it on 200x200 because the glyph font's size was affecting the centralization of the figure. If I reduce it to 100x100, I get it a little off.

    Best way I found at the moment was to compensate the shift with margins;

    If you set this to the surrounding box, you should compensate for the difference, but it may not work very well if you have a resizable square.

    style="text-align: center; margin-bottom: 5px; margin-right: 15px"
    The margin-right bit actually is just useful for centering horizontally when the tag is <i>. Then the margin-bottom bit pulls the glyph up in a much closer to center position (I didn't check centeredness at pixel level, but it looks much better with that adjustment).

    You'll be adding the code above to the <i> tag according to the approach #2 shared in our first reponse in this thread.

    Is this an acceptable solution? I believe that, to get better centering with font awesome at 5x, you should use a bigger square. Still the italics will have to be compensated with a margin-right: 15px; style in the <i> tag.

    Hope this helps, let us know if you still can't get it to work and we'll try another solution.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hello again, @ojuniour!

    It's been a while since we replied here, yet no feedback from you up to now. Was our proposed solution sufficient to fulfill your needs, or do you still need help with this inquiry?

    We may mark this thread as closed in 7+ days from now, but don't worry, we don't lock up the thread, so you will be able to post a follow-up here whenever you feel like it.

    Looking forward to your feedback, we really hope the css setting suggested put you on rail to fully develop the requirement you have!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Nov 21, 2014, 6:11 AM
  2. Replies: 3
    Last Post: Oct 23, 2013, 3:30 PM
  3. Replies: 2
    Last Post: Jun 23, 2012, 2:17 PM
  4. [CLOSED] Center align panel in container
    By machinableed in forum 2.x Premium Help
    Replies: 1
    Last Post: May 04, 2012, 6: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, 10:24 AM

Posting Permissions