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
635
Rounded image
posted

I have ultrawebtab in webpage.its loading dynamically image in tabs .I have applied rounded corner images.but problem is when image name is big the image is repeats horizontally as shown image.Please suggest any solution so that image looks continuous.

<igtab:UltraWebTab ID="tabControl" BorderStyle="None" runat="server" Style="border-spacing: 0px;"
                                    AutoPostBack="true" ViewStateMode="Enabled" DisplayMode="Scrollable" LoadAllTargetUrls="false"
                                    EnableAppStyling="True" EnableTheming="true" Height="100%" EnableViewState="true"
                                    AsyncMode="On" OnTabClick="tabControl_TabClick " ThreeDEffect="false" Width="100%"
                                    SelectedTab="-1" Visible="false" ClientIDMode="Static" BrowserTarget="Auto">
                                    <RoundedImage FillStyle="LeftMergedWithCenter" NormalImage="imageedit_2_2287647459.jpg"
                                        SelectedImage="imageedit_13_4149283003.jpg" HoverImage="imageedit_16_3964612111.jpg" />
                                    <ScrollButtons LeftButton-Image="prev_up_new.gif" LeftButton-DisabledImage="prev_disabled_new.gif"
                                        LeftButton-HoverImage="prev_hover_new.gif" LeftButton-PressedImage="prev_down_new.gif">
                                    </ScrollButtons>
                                    <ScrollButtons RightButton-Image="next_up_new.gif" ShowPartialTabs="true" AllowScrollToLastTab="true"
                                        UseBrowserDefaults="true" RightButton-DisabledImage="next_disabled_new.gif" RightButton-HoverImage="next_hover_new.gif"
                                        RightButton-PressedImage="next_down_new.gif">
                                    </ScrollButtons>
                                    <AsyncOptions EnableProgressIndicator="true" Triggers="SelectedTabChanged" RequestContext="IncludeFormData"
                                        ResponseContext="IncludeAllTabs" />
                                </igtab:UltraWebTab>

The tab.css is as follows

.igtab_Control
{
    /*background-color:#F2F7FB;*/
    background-repeat:repeat-x;
    background-position:bottom;
/*    background-image: url(images/tabbg.jpg);*/
    border:solid 1px #699BC9;
}


.igtab_Control_Outer
{
    background-color:White;
}


.igtab_DefaultTab_Top
{
    background-image: url(images/tabtop_normal_f.jpg);
    font-size:9pt;
    font-family: Tahoma;
    border:solid 1px #5F8FBD;
    border-bottom-color:#699BC9;
    padding:2px 10px 2px 7px;
    color:White;
    text-align:center;
}


.igtab_DefaultTab_Top_Rounded
{
    background-color:Transparent !important;
    background-image: url(images/igwt_tab_normal.jpg);
    font-size:10pt;
    
    font-family: Tahoma;
    border-bottom:solid 1px #D0D0D0;
    padding:4px 9px 4px 12px;
    height: 100%;
    cursor:pointer;
    /*color:White;*/
    text-align:center;

}


.igtab_DefaultTab_Top_Edge
{
    
    background-position:right top ;
    font-size:2px;
    padding-left:2px;
}


.igtab_Button
{
}


.igtab_DefaultTab_Bottom
{
    background-color:Transparent;
    background-position:bottom ;
    background-image: url(images/tabbottom_normal_f.jpg);
    font-size:9pt;
    font-family: Tahoma;
    border:solid 1px #507DA7;
    border-top-width:0px;
    border-top-color:#699BC9;
    padding:2px;
    color:White;
}


.igtab_DefaultTab_Bottom_Rounded
{
    background-color:Transparent !important;
    background-repeat:no-repeat;
    background-position:left bottom ;
    background-image: url(images/tabbottom_normal.jpg);
    font-size:9pt;
    font-family: Tahoma;
    border:solid 1px #D0D0D0;
    border-right-width:0px;
    border-bottom-width:0px;
    border-left-width:0px;
    padding:3px 5px 7px 10px;
    height: 100%;
    cursor:pointer;
    color:White;
}


.igtab_DefaultTab_Bottom_Edge
{
    background-position:right bottom ;
    font-size:2px;
    padding:0px;
}


.igtab_DefaultTab_Left
{
    background-color:Transparent;
    background-image: url(images/tab_left_normal_f.gif);
    font-size:9pt;
    font-family: Tahoma;
    border:solid 1px #4A77A0;
    border-right-width:0px;
    border-right-color:#699BC9;
    padding:8px 2px 8px 2px;
    color:White;
}


.igtab_DefaultTab_Left_Rounded
{
    background-color:White !important;
    background-repeat:no-repeat;
    background-position:left top ;
    background-image: url(images/tab_left_normal.gif);
    font-size:9pt;
    
    font-family: Tahoma;
    border:solid 1px #699BC9;
    border-top-width:0px;
    border-bottom-width:0px;
    border-left-width:0px;
    margin-top:0px;
    margin-bottom:0px;
    padding:11px 0px 3px 10px;
    cursor:pointer;
    color:White;
    text-align:left;
}


.igtab_DefaultTab_Left_Edge
{
    background-position:left bottom ;
    font-size:2px;
    padding-top:3px;
    padding-bottom:3px;
}


.igtab_DefaultTab_Right
{
    background-color:Transparent;
    background-image: url(images/tab_right_normal_f.gif);
    font-size:9pt;
    font-family: Tahoma;
    border:solid 1px #48749C;
    border-left-width:0px;
    border-left-color:#699BC9;
    padding:8px 2px 8px 2px;
    color:White;
}


.igtab_DefaultTab_Right_Rounded
{
    background-color:Transparent !important;
    background-repeat:no-repeat;
    background-position:right top ;
    background-image: url(images/tab_right_normal.gif);
    font-size:9pt;
    
    font-family: Tahoma;
    border:solid 1px #699BC9;
    border-top-width:0px;
    border-right-width:0px;
    border-bottom-width:0px;
    padding:10px 4px 6px 0px;
    cursor:pointer;
    color:White;
    text-align:right;
}


.igtab_DefaultTab_Right_Edge
{
    background-position:right bottom ;
    font-size:2px;
    padding:0px 0px 0px 10px;
    width: 10px;
}


.igtab_ButtonHover
{
}


.igtab_ButtonPressed
{
}


.igtab_ButtonDisabled
{
    padding:0px;
}


.igtab_HoverTab_Top
{
    background-color:#F0F0FF;
    background-image: url(images/tabtop_hover_f.jpg);
    border-color:#D0D0D0;
}


.igtab_Separator_Top
{
    /*background-color:White;
    background-image:none;
    border-bottom:solid 1px #D0D0D0;
    border-top-width:0px;
    border-right-width:0px;
    border-left-width:0px;*/
}


.igtab_HoverTab_Top_Rounded
{
    background-image: url(images/igwt_tab_hover.jpg);
}


.igtab_HoverTab_Bottom
{
    background-position:bottom ;
    background-image: url(images/tabbottom_hover_f.jpg);
    border-color:#699BC9;
}


.igtab_Separator_Bottom
{
    border-top:solid 1px #699BC9;
    border-right-width:0px;
    border-bottom-width:0px;
    border-left-width:0px;
}


.igtab_HoverTab_Bottom_Rounded
{
    background-image: url(images/tabbottom_hover.jpg);
}


.igtab_HoverTab_Left
{
    background-color:#F0F0FF;
    background-image: url(images/tab_left_hover_f.gif);
    border-color:#699BC9;
    border-right-color:Transparent;
}


.igtab_Separator_Left
{
    background-color:White;
    border-right:solid 1px #699BC9;
    border-top-width:0px;
    border-bottom-width:0px;
    border-left-width:0px;
}


.igtab_HoverTab_Left_Rounded
{
    background-image: url(images/tab_left_hover.gif);
}


.igtab_HoverTab_Right
{
    background-color:#F0F0FF;
    background-position:right ;
    background-image: url(images/tab_right_hover_f.gif);
    border-color:#699BC9;
    border-left-color:Transparent;
}


.igtab_Separator_Right
{
    border-left:solid 1px #699BC9;
    border-top-width:0px;
    border-right-width:0px;
    border-bottom-width:0px;
}


.igtab_HoverTab_Right_Rounded
{
    background-image: url(images/tab_right_hover.gif);
}


.igtab_SelectedTab_Top
{
    /*background-color:#FEF0F0;*/
    background-image: url(images/tabtop_selected_f.jpg);
    border-color:#D0D0D0;
    border-bottom-width:0px;
    border-bottom-color:Transparent;
}


.igtab_SelectedTab_Top_Rounded
{
    

    background-image: url(images/igwt_tab_selected.jpg);
    border-width:0px;
    border-bottom:solid 1px #D0D0D0;
    cursor:default;
}


.igtab_SelectedTab_Bottom
{
    background-color:#FEF0F0;
    background-image: url(images/tabbottom_selected_f.jpg);
    border-color:#699BC9;
    border-top-color:Transparent;
}


.igtab_SelectedTab_Bottom_Rounded
{
    background-image: url(images/tabbottom_selected.jpg);
    border-color:Transparent;
    border-top-color:#699BC9;
    cursor:default;
}


.igtab_SelectedTab_Left
{
    background-color:#FEF0F0;
    background-image: url(images/tab_left_f.gif);
    border-color:#699BC9;
    border-right-color:Transparent;
}


.igtab_SelectedTab_Left_Rounded
{
    background-image: url(images/tab_left.gif);
    border-color:Transparent;
    border-right:solid 1px #6CA3D2;
    border-bottom-width:0px;
    cursor:default;
}


.igtab_SelectedTab_Right
{
    background-color:#FEF0F0;
    background-image: url(images/tab_right_f.gif);
    border-color:#699BC9;
    border-left-color:Transparent;
}


.igtab_SelectedTab_Right_Rounded
{
    background-image: url(images/tab_right.gif);
    border-color:Transparent;
    border-left-color:#699BC9;
    cursor:default;
    color:White;
}


.igtab_DisabledTab_Top
{
    color:#6CA3D2;
}


.igtab_DisabledTab_Top_Rounded
{
    color:#6CA3D2;
}


.igtab_DisabledTab_Bottom
{
    color:#6CA3D2;
}


.igtab_DisabledTab_Bottom_Rounded
{
    color:#6CA3D2;
}


.igtab_DisabledTab_Left
{
    color:#6CA3D2;
}


.igtab_DisabledTab_Left_Rounded
{
    color:#6CA3D2;
}


.igtab_DisabledTab_Right
{
    color:#6CA3D2;
}


.igtab_DisabledTab_Right_Rounded
{
    color:#6CA3D2;
}


  • 20255
    Offline posted

    Hello,

    Let me know if I may be of further assistance

  • 20255
    Offline posted

    Hello,

     Thank you for contacting us.

     About this issue, I hope I am understanding it correctly, but let me know if I’m missing anything from your scenario. By my opinion the image is repeated (background-repeat:repeat-x;). My suggestion is to set some fixed size of the tab, and if the text is bigger than the tab width, the tab wont be expanded, and will remain the same. In this way the image will show correctly within the tab, although the text will be cropped.

     Let me know if I may be of further assistance.