PDA

View Full Version : [CLOSED] How to align linkbuttons and label vertically



jchau
Apr 23, 2013, 6:21 PM
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>

jchau
Apr 23, 2013, 6:53 PM
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>