gwtbootstrap3 Popover bad alignment and font size

Question

I have the following problem, when I use gwtbootstrap3 Popover on top of the Checkbox it doesn't align properly with the Checkbox, but points to a margin a few pixels over the checkbox.

Looks like this:

The Popover code in a form Group:

       <b:FormGroup>

            <b:FormLabel addStyleNames="col-md-4 no-top-padding">
                <ui:msg description="Caption checkbox: enable online meetings">Enable Online Meetings</ui:msg>                      
            </b:FormLabel>


            <g:FlowPanel addStyleNames="col-sm-1"> 
                <b:Popover ui:field="onlineMeetingsPopover" container ="body" isHtml="true"
                    content="{settingsMsgs.onlineMeetingsInfo}"
                    title="Enable Online Meetings" placement="RIGHT">

                    <b:InlineCheckBox ui:field="onlineMeetingsCheckbox" value="false"
                        addStyleNames="new-checkbox-float new-checkbox-margin no-top-padding"/>

                </b:Popover>
            </g:FlowPanel>

        </b:FormGroup>

Besides can anyone help me with changing the font-size of the Popover text. I can't do it with CSS since the Popover doesn't seem to allow the use of addStyleNames (css functions) and I can't find a gwtbootstrap function which does it.

Answer 1

I hope it is not too late but this is not a gwtbootstrap3 Popover bug, it's your code which is wrong :)

You use a <b:InlineCheckBox/> but InlineCheckBox is a widget containing a checkbox AND text, so you must use it with text=""attribute. In your case i think you want to use just a checkbox (without text), so you need replace your <b:InlineCheckBox/> by <b:SimpleCheckBox/> and remove your addStyleNames attribute.

Like this :

   <b:FormGroup>

        <b:FormLabel addStyleNames="col-md-4 no-top-padding">
            <ui:msg description="Caption checkbox: enable online meetings">Enable Online Meetings</ui:msg>                      
        </b:FormLabel>


        <g:FlowPanel addStyleNames="col-sm-1"> 
            <b:Popover ui:field="onlineMeetingsPopover" container ="body" isHtml="true"
                content="{settingsMsgs.onlineMeetingsInfo}"
                title="Enable Online Meetings" placement="RIGHT">

                <b:SimpleCheckBox ui:field="onlineMeetingsCheckbox" value="false" />

            </b:Popover>
        </g:FlowPanel>

    </b:FormGroup>

PS : The popover in <b:InlineCheckBox/> will be placed over the label and NOT the input.

Hope it helps :)