Tab bar right arrow

[geertolaerts]

I am just getting started with elm and elm-mdl and so far love it. I however have an annoying bug/problem when using the tab bar.
My main view looks quite simple:

view : Model -> Html Msg
view model =
    Layout.render Msgs.Mdl
        model.mdl
        [ Layout.fixedHeader
        , Layout.selectedTab model.selectedTab
        , Layout.onSelectTab Msgs.SelectTab
        ]
        { header = [ h1 [ style [ ( "padding", "2rem" ) ] ] [ text "Carma Mock" ] ]
        , drawer = []
        , tabs = ( [ text "Current Offers", text "Paid Offers", text "Settings" ], [ Color.background (Color.color Color.Teal Color.S400) ] )
        , main = [ div [] [ page model ] ]
        }
        |> Material.Scheme.topWithScheme Color.Teal Color.LightGreen

There are two things wrong see picture:

One is that the right arrow is displayed, even though i only have 3 tabs. The other is the gap between my tabs and the arrow.
Is this a bug or did i do something wrong?

[aforemny]

Hi! Do you have subscriptions set up? Could you post an example index.html + Main.elm somewhere that I can try?

[rupertlssmith]

I have the same issues.

I think it happens because you set the CSS 'box-sizing: border-box;' on the element. This would cause the padding for the space where the left chevron goes to be included in the width calculation for the whole tab bar, meaning it ends up that amount shorter than it should be. 'box-sizing: border-box' is quite a common thing to set in a CSS reset, so check all CSS that you are including.

elm-mdl does not know how wide your tabs are. Set up a suitable width using Material.Layout.setTabsWidth, to avoid the scroll chevrons being shown when they don't need to be.