[CLOSED] How to align linkbuttons and label vertically

  1. #1

    [CLOSED] How to align linkbuttons and label vertically

    Note in example below, the label text does not wrap. If I set Align="Stretch", it will wrap the label text ON TOP of the linkbuttons. Also, the linkbuttons stretch across making it possible to click the link by just clicking the whitespace. What layout should I use to accomplish this so the label text wraps correctly and the linkbutton do not stretch across.

    I tried using FormLayout and visually it looks fine but it uses a table PER linkbutton which is too DOM heavy for my portal page where I can have 10+ panels like this with 10+ linkbuttons.

     <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
            DisableViewState="true" />
        <ext:Panel runat="server" Title="Links" Width="300" Margin="10" BodyPadding="10"
            Cls="x-links">
            <LayoutConfig>
                <ext:VBoxLayoutConfig>
                </ext:VBoxLayoutConfig>
            </LayoutConfig>
            <Items>
                <ext:Label runat="server" Text="help label that's very long and should wrap onto next line. sadsa dsa dsa da dsad sad sad sad sa fsa ewq rewq dsa f sa fsa dsa dsa dsa dsa dsa da dsa dsa">
                </ext:Label>
                <ext:LinkButton runat="server" Text="Link 1">
                </ext:LinkButton>
                <ext:LinkButton ID="LinkButton1" runat="server" Text="Link 2">
                </ext:LinkButton>
                <ext:LinkButton ID="LinkButton2" runat="server" Text="Link 3">
                </ext:LinkButton>
                <ext:LinkButton ID="LinkButton3" runat="server" Text="Link 4">
                </ext:LinkButton>
                <ext:LinkButton ID="LinkButton4" runat="server" Text="Link 5">
                </ext:LinkButton>
            </Items>
        </ext:Panel>
        </form>
    Last edited by Daniil; Apr 24, 2013 at 8:12 AM. Reason: [CLOSED]
  2. #2
    I was able to resolve this by using some css styles. Please mark as closed. Thanks!

    <head id="Head1" runat="server">
        <title>Test Page </title>
        <style type="text/css">
            .links .x-btn-text-icon, .links .x-btn-noicon, .links .x-btn
            {
                padding-bottom: 7px;
                height: auto !important;
                width: auto !important;
            }
         
            .help-label
            {
     
                margin-top: 5px;
                height: auto;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
       
        </script>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
            DisableViewState="true" />
        <ext:Panel runat="server" Title="Links" Width="300" Margin="10" BodyPadding="10"
            Cls="links">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch">
                </ext:VBoxLayoutConfig>
            </LayoutConfig>
            <Items>
                <ext:Label Cls="help-label" runat="server" Text="help label that's very long and should wrap onto next line. sadsa dsa dsa da dsad sad sad sad sa fsa ewq rewq dsa f sa fsa dsa dsa dsa dsa dsa da dsa dsa">
                </ext:Label>
                <ext:LinkButton runat="server" Text="Link 1">
                </ext:LinkButton>
                <ext:LinkButton ID="LinkButton1" runat="server" Text="Link 2">
                </ext:LinkButton>
                <ext:LinkButton ID="LinkButton2" runat="server" Text="Link 3">
                </ext:LinkButton>
                <ext:LinkButton ID="LinkButton3" runat="server" Text="Link 4">
                </ext:LinkButton>
                <ext:LinkButton ID="LinkButton4" runat="server" Text="Link 5">
                </ext:LinkButton>
            </Items>
        </ext:Panel>
        </form>
    </body>

Similar Threads

  1. [CLOSED] How to vertically align a CheckBox in a Toolbar?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 29, 2013, 2:33 PM
  2. [CLOSED] Label BottomBar are not aligned vertically
    By majunior in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jun 24, 2011, 12:29 PM
  3. [CLOSED] [1.0] Label align issue
    By edigital in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Oct 21, 2010, 4:20 PM
  4. Label Align
    By flaviodamaia in forum 1.x Help
    Replies: 1
    Last Post: Jul 29, 2009, 9:37 AM
  5. [CLOSED] Label Right Align
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 16, 2009, 11:30 AM

Posting Permissions