[6.0.452.2] BUG: Css Defect on EPiServerUI:ToolButton with ImageUrl

Vote:
 

There is a styling problem with EPiServerUI:ToolButton (in editor plugins) when you use ImageUrl property that did not exist in EPi5.

#1: Set both ImageUrl and SkinID will render broken ToolButton.

        <EPiServerUI:ToolButton ID="SendExpressButton" runat="server" Text="<%$ Resources: EPiServer, i2.ts.translate.sendexpress %>"

            ToolTip="<%$ Resources: EPiServer, i2.ts.translate.sendexpresstooltip%>" SkinID="Check" />

 

Generated Markup:

        <span class="epi-cmsButton"><input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Check" name="ctl00$FullRegion$MainRegion$SendButton" value="Add" title="Add page to normal queue for translation or proofreading" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" type="submit"></span>

        <span class="epi-cmsButton"><img src="/I2/TS/Images/Express.png" alt=""><input class=" epi-cmsButton-tools epi-cmsButton-Check" name="ctl00$FullRegion$MainRegion$SendExpressButton" id="ctl00_FullRegion_MainRegion_SendExpressButton" value="Add to Express Queue" title="Add page to express queue for translation or proofreading" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" type="button"></span>

 

Workaround: Clear SkinID fixes the problem.

 

Suggestion: Setting ImageUrl should prevent side effects from SkinID by removing unwanted css-classes.

 

Defect #2: Broken vertical alignment when ImageUrl is use

 

        <EPiServerUI:ToolButton ID="SendExpressButton" runat="server" Text="<%$ Resources: EPiServer, i2.ts.translate.sendexpress %>"

            ToolTip="<%$ Resources: EPiServer, i2.ts.translate.sendexpresstooltip%>" />

 

Generated Markup:

        <span class="epi-cmsButton"><input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Check" name="ctl00$FullRegion$MainRegion$SendButton" value="Add" title="Add page to normal queue for translation or proofreading" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" type="submit"></span>

        <span class="epi-cmsButton"><img src="/I2/TS/Images/Express.png" alt=""><input name="ctl00$FullRegion$MainRegion$SendExpressButton" id="ctl00_FullRegion_MainRegion_SendExpressButton" value="Add to Express Queue" title="Add page to express queue for translation or proofreading" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" type="button"></span>

 

Sugestion: Set style “vertical-align: bottom;” on img-tag to get alignment to work.

 

#36891
Feb 13, 2010 16:57
Vote:
 

You can track this via bug #38251

#36955
Feb 15, 2010 14:39
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.