Fails to show scroll control when too many tabs to fit the browser window

[basil-bourque]

With this code using Tabs control bundled with Vaadin 14.0.9:

package work.basil.example;

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

import java.util.regex.Pattern;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{
    final private Tabs tabs;

    // Constructor
    public MainView ( )
    {
        // Widgets
        this.tabs = new Tabs();
        String words = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis eleifend quam adipiscing vitae. Pellentesque diam volutpat commodo sed egestas egestas. Iaculis urna id volutpat lacus laoreet non. Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Sed blandit libero volutpat sed cras ornare arcu dui. Blandit turpis cursus in hac. Netus et malesuada fames ac turpis egestas. Vitae aliquet nec ullamcorper sit amet risus nullam eget felis. Dictumst vestibulum rhoncus est pellentesque. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Sit amet nisl suscipit adipiscing bibendum est ultricies. Viverra adipiscing at in tellus integer feugiat scelerisque varius. Laoreet id donec ultrices tincidunt arcu non sodales. Pulvinar proin gravida hendrerit lectus. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. Curabitur gravida arcu ac tortor dignissim convallis.".replace( "," , "" ).replace( "." , "" );
        Pattern.compile( " " ).splitAsStream( words ).forEach( word -> {
            this.tabs.add( new Tab( word ) );
        } );

        // Arrange
        this.tabs.setSizeFull();
        this.add( this.tabs );
    }
}

…I get a scroll control appearing on the right edge of the tab bar, because there are far too many tabs to display within the width of the web browser window.

Using similar code with PagedTabs fails to display the same scroll control. Instead, the PagedTabs tab bar stretches beyond the bounds of the web browser window. The user must scroll the contents of the entire browser window to access more tabs along the tab bar.

package work.basil.example;

import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
import org.vaadin.tabs.PagedTabs;

import java.util.regex.Pattern;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{
    final private PagedTabs pagedTabs;

    // Constructor
    public MainView ( )
    {
        // Widgets
        this.pagedTabs = new PagedTabs();
        String words = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis eleifend quam adipiscing vitae. Pellentesque diam volutpat commodo sed egestas egestas. Iaculis urna id volutpat lacus laoreet non. Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Sed blandit libero volutpat sed cras ornare arcu dui. Blandit turpis cursus in hac. Netus et malesuada fames ac turpis egestas. Vitae aliquet nec ullamcorper sit amet risus nullam eget felis. Dictumst vestibulum rhoncus est pellentesque. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Sit amet nisl suscipit adipiscing bibendum est ultricies. Viverra adipiscing at in tellus integer feugiat scelerisque varius. Laoreet id donec ultrices tincidunt arcu non sodales. Pulvinar proin gravida hendrerit lectus. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. Curabitur gravida arcu ac tortor dignissim convallis.".replace( "," , "" ).replace( "." , "" );
        Pattern.compile( " " ).splitAsStream( words ).forEach( word -> {
            this.pagedTabs.add( new H1( word ) , word );
        } );

        // Arrange
        this.pagedTabs.setSizeFull();
        this.add( this.pagedTabs );
    }
}

(a) I suggest making this basic behavior of PagetTabs match that of Tabs.

(b) I am unable to find a workaround. I cannot make the scroll widget appear on a PagedTabs bar constrained to fit within the browser window.

[alejandro-du]

Have you tried with tabs.getContent().setWidthFull()?