twitter-bootstrapgwtgwtbootstrap3

gwtbootstrap3 Popover bad alignment and font size


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: enter image description here

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.


Solution

  • 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 :)