Make Accordion change width to display its contents

Vaadin 6 / 7 / 8 Framework UI
1

How can I make an Accordion automatically change its width to be wide enough to show all of its contents?

Screen shot of Accordion too narrow:

Short example app:

package com.example.dummy;

import com.vaadin.Application;
import com.vaadin.ui.*;

@SuppressWarnings ( "serial")
public class DummyApplication extends Application {

    @Override
    public void init() {

        Accordion accordion = new Accordion();
        accordion.addTab( this.makeListSelect(), "Apple", null );
        accordion.addTab( this.makeListSelect(), "Banana", null );
        accordion.addTab( this.makeListSelect(), "Grape", null );

        HorizontalLayout layout = new HorizontalLayout();
        layout.setMargin( true );
        layout.addComponent( accordion );

        // Display on screen. - - - - - - - -
        Window window = new Window( "Make Accordion Wide Enough For Content" );
        window.setContent( layout );
        setMainWindow( window );

    }

    private ListSelect makeListSelect() {
        ListSelect listSelect = new ListSelect( null );
        listSelect.addItem( "Very long content in this item" );
        listSelect.addItem( "Yet another very long content in this item" );
        listSelect.addItem( "Still more long content to be read in this item" );
        return listSelect;
    }
}
2

Currently you cannot.

The Accordion measures its undefined width based on the widest caption width and not based on the content. You will either have to set a size (relative or pixel) for the Accordion, or expand the caption text width.

3

Set width and height for both window and accordion.
Example,

window.setSizeFull();
and
accordion.setSizeFull();