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
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.
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
Sorry. I tried as per your code and it worked. But in my project i linked a bootstrap css. Without linking this bootstrap css the tab works good as you mentioned. But if i refer the bootstrap css it is showing the extraspace as i mentioned in the first message. I am attaching the sample i did. Please suggest me any solution
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Prod_Admin.WebForm1" %><%@ Register Assembly="Infragistics4.Web.v14.2, Version=14.2.20142.1028, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.LayoutControls" TagPrefix="ig" %><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <link href="css/font-awesome.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" /> <%-- <link href="css/bootstrap.css" rel="stylesheet" />--%> <%--<link href="css/Admin.css" rel="stylesheet" />--%></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <ig:WebTab ID="WebTab1" runat="server" Height="189px" SelectedIndex="1" DisplayMode="MultiRowAuto" Width="100%"> <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>
you should not specify Width
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....
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%
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 %.
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
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.