csstwitter-bootstrapgwtbootstrap3

gwtbootstrap3. How to justified ButtonGroup element with buttons


I would like to justified my button group to whole width of parent.

I am trying to Justified button groups

Here is my code:

ButtonGroup buttonGroupHelper = new ButtonGroup();

Button loginButton = new Button("Log in");
Button resetButton = new Button("Reset");
Button forgotCredentialsButton = new Button("Forgot credentials?");

buttonGroupHelper.add(loginButton);
buttonGroupHelper.add(resetButton);
buttonGroupHelper.add(forgotCredentialsButton);

And I am getting this: enter image description here

When I will add this line:

buttonGroupHelper.setJustified(true);

I am getting this: enter image description here

I use bootstrap css darkly theme.

Here is html that my gwtbootstrap3 framework produce:

<div class="btn-group btn-group-justified">
    <button type="button" class="btn btn-success"><i class="fa fa-play-circle-o"></i> Log in</button>
    <button type="button" class="btn btn-danger"><i class="fa fa-times-circle-o"></i> Reset</button>
    <button type="button" class="btn btn-warning"><i class="fa fa-key"></i> Forgot credentials?</button>
</div>

Am I doing something wrong. Or is this just a bug?

Please help.


Solution

  • You should put the buttons inside button groups and then put the button groups inside the helper button group.

    ButtonGroup buttonGroupHelper = new ButtonGroup();
    ButtonGroup loginBtnGroup = new ButtonGroup();
    ButtonGroup resetBtnGroup = new ButtonGroup();
    ButtonGroup forgotBtnGroup = new ButtonGroup();
    
    Button loginButton = new Button("Log in");
    Button resetButton = new Button("Reset");
    Button forgotCredentialsButton = new Button("Forgot credentials?");
    
    loginBtnGroup.add(loginButton);
    resetBtnGroup.add(resetButton);
    forgotBtnGroup.add(forgotCredentialsButton);
    
    buttonGroupHelper.add(loginBtnGroup);
    buttonGroupHelper.add(resetBtnGroup);
    buttonGroupHelper.add(forgotBtnGroup);
    
    buttonGroupHelper.setJustified(true);