Remove Space at the end of webtab

505

ananda posted over 8 years ago

Hi,

I need to remove the last extra space on the webtab which is shown below. I am using version 14.2

https://s31.postimg.org/xvv3dw6fv/forum.png

Parents

3995

Offline Deyan Kamburov posted over 8 years ago

Hello,

Thank you for posting into our community. You can specify the width of the layout and also specify the tab size for each tab.

You can also go in Design mode and drag-and-drop to resize the WebTab.
Cancel
Reply

Cancel

Reply

505

ananda posted over 8 years ago in reply to Deyan Kamburov

Hi DeyanK,

This tab is dynamically build. I am adding the tab items dynamically, so i cannot set the widhth manually for the each tab items. Is there any css class i need to modify to remove that extra space at the end? Please suggest
Cancel
Reply

Cancel

Children

15320

Offline [Infragistics]Tsanna posted over 8 years ago in reply to ananda

Hello Tct_Anand,

As Deyan suggested you may change the tabs width every time a new tab is added on TabAdded event, so that the sum of all tabs should be 100%. How you will do the tabs width calculations is up to you. If I can provide you with further assistance, please let me know.

Regards,
Tsanna
Cancel
Reply

Cancel
15320

Offline [Infragistics]Tsanna posted over 8 years ago in reply to ananda

Hi Tct_Anand,

I'm looking into this and will keep you posted. If you have any questions at the meantime, please let me know.

Regards,
Tsanna
Cancel
Reply

Cancel
505

ananda posted over 8 years ago in reply to Deyan Kamburov

Hi,

I already told you that the tabs are not fixed on design time. Currently it is having 10 tab items. In future it may increase or decrease. So all the time i cannot modify the design and modify the width %.
Cancel
Reply

Cancel
3995

Offline Deyan Kamburov posted over 8 years ago in reply to ananda

Well, I'll suggest once the WebTab is loaded to set the width of each tab to be in percentages and the sum of them should be 100%

<script type="text/javascript">
  function WebTab1_Loaded(sender, eventArgs) {
   var tabs = sender.get_tabs();
   for(var tab in tabs) {
    tabs[tab]._elem.style.width = "10%";
   }
  }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div style

     <ig:WebScriptManager ID="WebScriptManager1" runat="server">
  </ig:WebScriptManager>
  <ig:WebTab ID="WebTab1" runat="server" Height="189px" SelectedIndex="3" DisplayMode="MultiRowAuto" Width="100%">
   <ClientEvents Loaded="WebTab1_Loaded" />
  <PostBackOptions EnableReloadingUnselectedTab="true" EnableAjax="true" EnableLoadOnDemand="false" EnableReloadingOnTabClick="true" />
  <tabs>
  <ig:ContentTabItem runat="server" Text="Employees">
  </ig:ContentTabItem>
  <ig:ContentTabItem runat="server" Text="Shifts">
  </ig:ContentTabItem>
  <ig:ContentTabItem runat="server" Text="Rework Reasons">
  </ig:ContentTabItem>
  <ig:ContentTabItem runat="server" Text="Partnumbers">
  </ig:ContentTabItem>
  <ig:ContentTabItem runat="server" Text="Customers">
  </ig:ContentTabItem>
  <ig:ContentTabItem runat="server" Text="Machines">
  </ig:ContentTabItem>
  <ig:ContentTabItem runat="server" Text="Actions">
  </ig:ContentTabItem>
  <ig:ContentTabItem runat="server" Text="Qualification Types">
  </ig:ContentTabItem>
  <ig:ContentTabItem runat="server" Text="Qualification">
  </ig:ContentTabItem>
  <ig:ContentTabItem runat="server" Text="Routes">
  </ig:ContentTabItem>

  </tabs>
  </ig:WebTab>

    </div>
    </form>
</body>
</html>
Cancel
Reply

Cancel
505

ananda posted over 8 years ago in reply to Deyan Kamburov

Hi,

Ok now it seems to be ok. But i want this webtab to be 100% width of the browser but it is now not showing till the right corner of the page. I am attaching it below.

i want the tab to be till the right side of the browser. How can i do that? please suggest any idea....
Cancel
Reply

Cancel