RadColorPicker wrapping labels when in HSB or HSV rendering mode

[Scott]

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>
        </div>
    </div>

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

[Daniel]

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.

Regards,
Daniel
Telerik