This project is read-only.

Bootstrap 3 for SharePoint 2013 Alpha V 0.1 bootstrap.css breaks Android mobile phone scroll on Blog Site template

Nov 5, 2013 at 10:34 PM
I have packaged the Alpha build into a declarative package (wsp) in Visual Studio 2012 sp3. When the master page is applied to a OTB SharePoint 2013 blog site (one with lots of posts). I notice that once the screen is full it stops downloading. Delete the include for the bootstrap.css and the default behavior returns. So basically, one screen full and that's it. Remove and it scrolls through the list of posts.
Nov 6, 2013 at 3:17 PM
Edited Nov 6, 2013 at 8:20 PM
Solved. This is the issue: Line 6236 @-ms-viewport { width: device-width; }

References:
http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx

Adding this to the master fixed the scroll without changing the BOOTSTRAP.CSS.
 <script language="javascript">
        (function () {
        if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
            var msViewportStyle = document.createElement("style");
            msViewportStyle.appendChild(
                document.createTextNode("@-ms-viewport{width:auto!important}")
            );
            document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
        }
    })();

</script>
Marked as answer by starnell on 11/6/2013 at 12:20 PM
Nov 13, 2013 at 12:17 AM
Hi,

Thank you for the fix. This is being added to B3 for SP2013, Beta V 1.0.1 and should be available for public download very soon.

Eric
Nov 13, 2013 at 3:59 PM
I found some specific challenges with the pop-up dialogues that are used for editing meta-data after a document upload and list views on system pages. Here are my fixes for them:

.ms-srch-sb-searchImg {
left:auto;
top:auto;
position:inherit;
}
.ms-srch-sb-navImg:hover, .ms-srch-sb-navImg {
left:auto;
top:auto;
}

@media (max-width: 767px) {
table {
    table-layout:fixed;
    width: 100%;
}
}

.sp-peoplepicker-intitalHelpText {
position:inherit;    
}
/ default 375px made wider to remove wrapping on otb dialog forms /
.ms-inputformcontrols {
width:400px;
}

/ fixed to the upload type of dialogue forms that use excessive tables /
.ms-long {
width:280px;
}

.ms-formtoolbar > tbody > tr > td:nth-of-type(2){
width:50%;
}

td.ms-separator {
 width:10px;
}

.ms-core-pageTitle {
white-space:normal;
}


.ms-vb {
word-break:initial;
word-wrap:break-word;
}

contentBox {

word-break: initial;
}

.ms-srch-ellipsis {
white-space:normal !important;
}

.ms-core-pageTitle
{
white-space:normal;
word-wrap:normal;
}