OptionGroup Caption CSS?

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

I can’t seem to find the CSS that define the style of a OptionGroup Caption, as defined by the constructor new OptionGroup(“Caption String”).

Can any one help me on this?

2

Use firebug to inspect the element and check the vaadin style.css .

3

Hi Ricardo,

try with this

   .v-select-optiongroup .v-caption {

   }

or

   .v-select-optiongroup .v-captiontext {

   }

Greetings,

Javi

4

Javier y Lawal,

Thanks for the suggestions. I’ll try them and post back my findings.

Best regards,

-RP

5

Hello Javier,

Actually, both solutions you provided don’t seem to work. Though the “.vaption…” only works, but it affects all components with the “caption” property… witch is not what I wanted. I only wanted to change the CSS of the OptionGroup’s Caption…

Any suggestion?

Tks.

-RP

6

Javier,

Forgot to add that .v-caption and .v-captiontext don’t inherit from .v-select-optiongroup

Best regards,

-RP

7

Hi Ricardo,

you are right there is no inheritance. I supose that you are working with forms and that you have the OptionGroup inside a form, right?

I make a try with an app that I have got to test all these things, and I can change the caption of OptionGroup doing this on my styles.css:

.gender .v-form fieldset {
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-top: 1px solid #3d80df;
    font-weight: bold;
}

.gender .v-formlayout {
    padding-left: 20px;
    padding-right: 20px;
 }
.gender  .v-formlayout-row {
    padding-bottom:10px;
}

.gender .v-formlayout-lastrow .v-formlayout-captioncell {
    padding-left: 25px;
    padding-right: 25px;
    font-size: 14px;
    font-weight: bold;
}

Note: the OptionGroup is in the last row.

And this is the code to create the form with the OptionGroup:

    public PersonForm()
    {
        super( new Person() );
        setStyleName( "gender" );
        setCaption( "Person From" );
        setWriteThrough( false );
        TextField firstName = new TextField( "First Name" );
        firstName.setNullRepresentation( "" );
        addField( "firstName", firstName );
        TextField lastName = new TextField( "Last Name" );
        lastName.setNullRepresentation( "" );
        addField( "lastName", lastName );
        TextField email = new TextField( "Email" );
        email.setNullRepresentation( "" );
        addField( "email", email );
        TextField phoneNumber = new TextField( "Phone Number" );
        phoneNumber.setNullRepresentation( "" );
        addField( "phoneNumber", phoneNumber );
        TextField streetAddress = new TextField( "Street Address" );
        streetAddress.setNullRepresentation( "" );
        addField( "streetAddress", streetAddress );
        TextField postalCode = new TextField( "Postal Code" );
        postalCode.setNullRepresentation( "" );
        addField( "postalCode", postalCode );
        TextField city = new TextField( "City" );
        city.setNullRepresentation( "" );
        addField( "city", city );
        OptionGroup genderOptionGroup = new OptionGroup( "Gender" );
        IndexedContainer genderContainer = new IndexedContainer();
        genderContainer.addItem( "Male" );
        genderContainer.addItem( "Female" );
        genderOptionGroup.setContainerDataSource( genderContainer );
        addField( "gender", genderOptionGroup );
        HorizontalLayout footer = new HorizontalLayout();
        footer.setSpacing( true );
        Button save = new Button( "Save" );
        save.addListener( (ClickListener) this );
        save.setData( Buttons.SAVE );
        footer.addComponent( save );
        Button reset = new Button( "Cancel" );
        reset.addListener( (ClickListener) this );
        reset.setData( Buttons.RESET );
        footer.addComponent( reset );
        Button edit = new Button( "Edit" );
        edit.addListener( (ClickListener) this );
        edit.setData( Buttons.EDIT );
        footer.addComponent( edit );
        setFooter( footer );
    }

The result look like
this

I am looking for a better way to do this, it is a workarround obviously, but I hope this helps.

Javi