WinJS.UI.Pivot: How to cut long headers?

[pke]

I have a pivot that has some over-long titles. "Current Sprint" and "In Progress" seem to overlap.

It gets worse with even longer titles:

Is there a way (CSS style) to prevent this?

[rigdern]

Did you override the style for the default header font size? If so, this isn't supported.

[pke]

No that comes straight from the Windows Universal App templates of VS2013.

phone.css

#contenthost {
    background-color: gray;
}

.fragment header[role=banner] {
    /* Define a grid with columns for the back button and page title. */
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    display: -ms-grid;
    height: 40px;
}

    .fragment header[role=banner] .win-navigation-backbutton {
        visibility: hidden;
    }

    .fragment header[role=banner] .backbutton {
        visibility: hidden;
    }

    .fragment header[role=banner] .titlearea {
        -ms-grid-column: 1;
        margin-top: 10px;
        margin-left: 20px;
        font-size: 20pt;
        overflow: visible;
    }

        .fragment header[role=banner] .titlearea .pagetitle {
            width: calc(100% - 20px);
        }

Using WinJS 3.1 that is. With 2.1 that comes with the Phone SDK the headers are correct.

    <link href="/css/ui-themed.css" rel="stylesheet" />
    <!--script src="/WinJS/js/WinJS.js"></script-->
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <link href="/css/phone.css" rel="stylesheet" />    

[jseanxu]

I just created a VS2013 pivot/hub universal hub project, deleted the 2.1 framework package reference and dropped in WinJS 3.0 loose files and here is what I see. Could you share a project with your issue?

[pke]

@jseanxu I am on WinJS 4.0 at the moment for my new app. Its even worse for that. Now the pivot control is not styled at all as the old one.

[jseanxu]

Many controls are styled differently in 4.0 compared to 3.0. This is due to 4.0 aligning to the Win10 design while 3.0 followed Win8.1 design. The smaller pivot headers are intended.

Are you still struggling with the overlapping headers in 3.0? If so, I can help you debug if you could attach a repro project. If you want 4.0 instead (which I would recommend if your app is targeting Win10), then the above screenshot looks correct to me.

[pke]

I still strongly believe MSFT is slowly ruining the Windows UI (again) after what has been great with "Metro". The half cut, strong type UI language was so unique and fresh. Now it all looks like a glorified Android clone.

But anyway, I appreciate your offer to help me tailor my apps to Windows 10. The app you see above is in https://github.com/pke/codecheck

The pivot headers are sometimes cut of, have to much left/top margin. I just dropped in the WinJS 4.0 that is included with the project as nuget package.

Thanks for your help!

[jseanxu]

I cloned your repo, dropped in 3.0.1 from http://try.buildwinjs.com/#get:stable and ran the project in a phone emulator and it looks correct:

Been a while since I read German :)

[pke]

Thanks for trying this out. Version 3.x is not really a problem, although can you see the gap on the left side of alternativ... it does not line up with the repeater below. But now try to drop in WinJS 4.x.preview for fun.

As for German, that is even Swiss-German to make it worse :) hihi

[jseanxu]

Thanks for trying this out. Version 3.x is not really a problem, although can you see the gap on the left side of alternativ... it does not line up with the repeater below.

That is a known in issue in the VS Hub template for WP projects - In the hubPagePhone.css file, if you remove the first two rules that style the pivot's margins and paddings, the pivot content and header should line up again.