RadColorPicker wrapping labels when in HSB or HSV rendering mode

2 posts, 0 answers
  1. Scott
    Scott avatar
    5 posts
    Member since:
    Nov 2015

    Posted 28 Dec 2015 Link to this post

    I placed a RadColorPicker control on my form and when I switch the rendering mode to HSB or HSV, the field labels for "R:", "G", etc. are wrapping with their associated controls, and the height of the RadColorPicker grows to a very large layout (see the attached screenshot for an example of the problem).  There is no problem in the layout when I choose the "Web Palette" or "RGB Sliders" mode.  And the problem is happening in IE11 as well as in Chrome and Firefox.  The page is being hosted within a Bootstrap v2.2.2 container.  The page markup of this control appears as follows:

         <div class="row-fluid">
            <div class="span12">
                <asp:Label id="lblFooterBGColor" runat="server" text="Pick the background color for the site header" meta:resourceKey="lblSiteHeaderBGColorResource1"></asp:Label>
                <telerik:RadColorPicker ID="radCPSiteHeader" runat="server" PaletteModes="All" ShowEmptyColor="true" ShowIcon="false" Skin="Office2010Blue" Width="150px" RenderMode="Mobile"></telerik:RadColorPicker>

    Does anyone know why this is happening and how I can correct the problem?  Thanks.

  2. Daniel
    Daniel avatar
    4933 posts

    Posted 01 Jan Link to this post

    Hello Scott,

    Some of the possible reasons include:
    - the 'label for' element may have its float: left overridden
    - the width of some of the parent nodes restricts the available width for these two elements and the second one (input) falls down

    By the way I tried to replicate the problem in my bootstrap test page (2.3.2) but it didn't reproduce.
    I would recommend that you inspect the element with the developer toolbar of your choice to see what exactly happens in this case.

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top