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
15
How to evenly size multiple horizontal (Ultra) Web Tabs
posted

We're using (Ultra) Web Tabs both down the left side and across the top by nesting the last inside instance of the first.

As you can see, there's plenty of room to equally size the tabs going across the top.  However, the sizing seems to be proportional to the length of the text.  

Here's a sample snippet of the code (and (1) I've tried my reasonable best with the indenting but it's far from perfect, and (2) this is an inherited project, so please no remarks about the code itself ...):

<igw:Tab runat="server" Text="2. Project Description">
<ContentTemplate>

<igw:UltraWebTab ID="uwtSection2"


DisplayMode="MultiRow"
EnableOverlappingTabs="false"
StyleSetName="A"
runat="server"
BackColor="White"
Height="400px"
BorderColor="LightGray" BorderStyle="Solid" BorderWidth="1px"
Width="960px"

>
<Tabs>


<igw:Tab runat="server" Text="Description">
<ContentTemplate>


<div class="layLeft">
<asp:Button ID="btnSection2_1Prev" CssClass="tabBtn" runat="server" Text="Prev Tab" OnClick="btnSection2_1Prev_Click" />
</div>

<div class="layRight">
<asp:Button ID="btnSection2_1Next" CssClass="tabBtn" runat="server" Text="Next Tab" OnClick="btnSection2_1Next_Click" />
</div>

<asp:Panel ID="pnlErrorSection2_1" Visible="false" runat="server">
<asp:Label ID="lblErrorMessageSection2_1" CssClass="textMedium textErrorBold" runat="server" />
<p class="textMedium">&nbsp;</p>
</asp:Panel>

<table border="0" width="100%">
<tr>
<td colspan="2">
<p class="textMedium textColorBluish textBold">Description</p>
</td>
</tr>
<tr>
<td valign="top">
<ighedit:WebHtmlEditor ID="lblProjectDescription" runat="server" ImageDirectory="~/images/htmleditor" Height="285px" Width="580px" RightClickBehavior="Nothing" EnableSpellCheck="true" TabStripDisplay="false">
<Toolbar Style="zoom: .85;">
<ighedit:ToolbarButton runat="server" Type="Bold" />
<ighedit:ToolbarButton runat="server" Type="Underline" />
<ighedit:ToolbarButton runat="server" Type="Italic" />
<ighedit:ToolbarImage runat="server" Type="Separator" />
<ighedit:ToolbarButton runat="server" Type="UnorderedList" />
<ighedit:ToolbarImage runat="server" Type="Separator" />
<ighedit:ToolbarButton runat="server" Key="CleanWord" ImageName="~/images/htmleditor/cleanword2.gif" Type="Custom" ToolTip="Clear All Formatting" />
<ighedit:ToolbarImage runat="server" Type="Separator" />
<ighedit:ToolbarButton runat="server" Type="Preview" />
</Toolbar>
<TabStrip Style="zoom: .6;" />
<ClientSideEvents Initialize="" BeforeAction="Event_BeforeAction" KeyDown="" />
</ighedit:WebHtmlEditor>

</td>
<td valign="top">
<asp:Panel ID="pnlSection2_1Instructions" ScrollBars="Vertical" Height="225px" runat="server">
<p class="textMediumBold"><b>Instructions</b></p>
<p class="textMedium">
Beginning with short statement of the overall desired outcome, discuss all major project activities.
</p>
</asp:Panel>
</td>
</tr>
</table>

</ContentTemplate>
</igw:Tab>

<igw:Tab runat="server" Text="Work Plan">
<ContentTemplate>

...

Your help would be greatly appreciated.

        Richard

  • 17590
    Offline posted

    Hello Richard,

    I noticed that similar issue has been discussed in this forum thread,which I believe you might find helpful.

    Please have a look at the approach and let me know if you need any further assistance with this matter.