I've setup a new ASP.NET MVC website, using the defaults in Visual Studio 2013. I've updated all the libraries being used so that I have the latest version of bootstrap and other CSS, JavaScript and MS libraries installed.
What I've found is that if you add basic form with validation, the Bootstrap navigation bar doesn't stay on top, it falls to the middle of the screen on an iPhone. Here is a screenshot:
You'll notice the menu is the middle of the screen, instead of being on top.
To duplicate, open the URL on an iPhone just click submit which will cause the a validation error and display the UI issue.
Note, I have removed the bundling so that we can see the individual links. I also put them all in the header for convenience, not something that we would do in production.
What is the solution to anchoring the navigation bar?
With help of a skilled CSS programmer, I was able to resolve with the following updates:
Run the following JavaScript after bootstrap:
var is_ios = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
if(is_ios) {
$(document)
.on('focus', 'input, textarea', function(e) {
$('body').addClass('fixfixed');
})
.on('blur', 'input, textarea', function(e) {
$('body').removeClass('fixfixed');
});
}
Added the following CSS updates:
.form .form-control {
font-size: 16px;
}
.fixfixed .navbar {
position: relative;
top: auto;
}
Related
I am using bootstrap datepicker on a website, It is also styled to be sticky by giving its parent a fixed position, Its working fine normally but on testing it on Ipad and Iphone (not tested on andriod devices yet), when I scroll down and try to touch the datepicker to open it , it scrolls back to the top of the page, how can I fix this issue?
Similar problem arises when I am using a custom dropdown Selectric
I have created a simple striped down version of the problem here. Note that the problem wont replicate on emulator but on an actual mobile device or ipad.
I also faced same issue and resolved it as below solution , you can try it.
datepicker has beforeShow property where you have to set calendar position.
$("#EffectiveDateAccept").datepicker({
changeMonth: true,
changeYear: true,
// minDate: 0,
dateFormat: 'mm/dd/yy',
beforeShow: function (input, inst) {
var calendar = inst.dpDiv;
setTimeout(function () {
calendar.position({
my: 'center bottom',
at: 'top',
collision: 'none',
of: input
});
}, 1);
}
});
Try this
.dropdown-menu{
position: fixed!important
}
This issue is found unrelated to specific environment (not iOS only) and has a solution as follows:
You should find out which datepicker div class sets datepicker actually from hidden to visible (which of them change upon successful show and hide event).
Add to your css for that class (here modal-open) the missing show command:
body.modal-open {
overflow: visible;
}
Now the scroll should stay in place.
Example refers to html like:
<body>
<div class="modal-open">
Datepicker
</div>
</body>
Source:
Bootstrap modal: background jumps to top on toggle
PS. My source has also 18 other options, if this seems too hacky.
I have made this current one once, worked like charm and was not so tricky to do.
just add This CSS code to your site it will fix that issue.
.element{
position: sticky!important;
}
If you view it in Inspect Element, it's creating a separate DIV in HTML which has position absolute. Just change that position to sticky. That's why that happens. See in the image.
You can do this by adding this line of CSS code:
.dropdown-menu {
position: sticky;
}
Hope that will help you
As a start, have you looked thru the GH repo's issues for something matching your description?
This link specifically sounds promising:
https://github.com/uxsolutions/bootstrap-datepicker/issues/1866
I think what might be occurring is that your datepicker is set to absolute of the body, not the parent you are setting as "fixed".
So when you click to open the datepicker, your mobile device is scrolling you to the active element (in this case, the datepicker at the top, set to absolute on the parent).
Also there seems to be some default mobile behavior related to scrolling:
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
Perhaps setting the following will help:
-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
The following link provides more context on this scrolling behavior:
https://weblog.west-wind.com/posts/2015/Jun/05/IPad-Scroll-Issues-with-Fixed-Content
It's been long time I'm building websites using HTML5 Boilerplate + Bootstrap but I still didn't figure out how to apply some sort of visual feedback/effect (could be :hover but it's not working) to let the user be aware of clicking a link (for example an item of the mobile menu). Some client started to ask/complain with "I cannot understand what I'm clicking...". I tried adding some coloured background on :hover, on :focus, but none of them are working...
How to do?!
First add this library: jquery.mobile.min.js
JAVASCRIPT:
// simulate hover effect on touch devices
$('a.add_hover_effect').on('tap', function(e) {
$(this).addClass('hover_effect');
});
$('a.add_hover_effect').on('touchend', function(e) {
$('a.add_hover_effect').removeClass('hover_effect');
});
CSS:
a.add_hover_effect.hover_effect {
background-color: red;
color: white;
}
When working with a web application after having installed it to 'home', it seems like a most recent update to iOS has caused the usual black status bar to go transparent and float above the web content below it.
Also, not pictured, is a horizontal bar at the footer of the app that pushes my fixed footer about 20px up.
I don't expect to always be serving this application via iPad (most clients would opt for the lesser expensive Android option), however it is very common for my associates to be demonstrating the application with their own iPads...
What options do I have here? Will I need to do some 'sniffing' and shift the application down just for this device/version? If so, what is the best way to do this without introducing more libraries? I'm currently using the latest Angular framework + .NET 4.5.1.
Thanks.
Well, since there was obviously a whole lot of interest in this question, I have since found an answer to the problems.
In the root of the application I created the test for modern iOS 8
var userAgent = navigator.userAgent;
$rootScope.isIOS = ( userAgent.match(/(iPad|iPhone|iPod)/g) && userAgent.match(/(OS 8_0_)/g) ? true : false );
In the primary wrapper before the navigation element I conditionally place a block
<div ng-if="isIOS" class="isIOS"> </div>
Then I have the sass class
.isIOS {
position: fixed;
z-index: 10000;
top:0;
width: 100%;
height: 23px;
background: $fooColor;
& + div {
margin-top: 25px;
}
}
and the TOP is taken care of...the status bar has a background that stays fixed and scrolling through any of the pages looks great.
The space I encountered at the bottom was a little different and required the following meta-data in the base layout.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
Anyways...all is good now. If you came here and found this and it helps, awesome. If you never came here it all then it really doesn't matter a whole bunch, now does it?
Before jumping off the deep end with Ajaxify on a large Razor project, I thought it best to create an MVC4/Razor test-bed app and try it out.
Repro:
Created a standard MVC4/Razor Web Application in VS 2012
Added the requisite JQuery add-in files (It already has JQuery 1.8.2 by default in the Razor project template).
Added this to BundleConfig.RegisterBundles
bundles.Add(new ScriptBundle("~/bundles/ajaxify").Include(
"~/Scripts/jquery-scrollto-{version}.js",
"~/Scripts/jquery.history-{version}.js",
"~/Scripts/ajaxify-html5-{version}.js"
));
Note: I rename all add-ins to the MS standard ~/scripts/addinname-9.9.9.js format to allow for easier upgrading
Added one line to the bottom of Views/Shared/_Layout.cshtml
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/ajaxify") <=== ADDED THIS LINE
#RenderSection("scripts", required: false)
When I run the web app the home page comes up normally (as expected), but the contact page comes up using the mobile styles. To verify this I made the body yellow in that media selector and sure enough, it kicks in on the Ajaxified (dynamically loaded) About page:
These CSS styles are defined in the CSS within the following selector:
#media only screen and (max-width: 850px)
The page corrects itself if you resize it at all or refresh the browser:
I am surprised that this is possible, as the media selector is meant to be resolution dependant, so thought I would see if anyone can shed light on the cause. The browser window is greater than 850px at all times so the mobile styles should not be shown at all.
The Actual Question Is:
To avoid further confusion the actual question is: I need to know why the media filter selector is triggering, even though the screen is bigger than the min size specified?
Update:
I reduced the Standard MVC4/Razor CSS mobile styles section to the minimum below and the problem still exists. If I removed the float: none, the problem does not occur:
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
body{
background-color: yellow;
}
/* header
----------------------------------------------------------*/
header .float-left,
header .float-right {
float: none;
}
}
As the details provided, I will say the problem is with float only,
Just update float and one more tag
.header .float-left{float:left;}
.header .float-right{float:right;}
.clearfix{clear:both}
Use this clearfix class with div below header div
<div class="header">
//your codes
</div>
<div class="clearfix"></div>
I think this will do..
Edit : Ajaxify Update,
The script file of ajaxify has this code,
// Prepare Variables
var contentSelector = '#content,article:first,.article:first,.post:first',
$content = $(contentSelector).filter(':first'),
contentNode = $content.get(0),
$menu = $('#menu,#nav,nav:first,.nav:first').filter(':first'),
activeClass = 'active selected current youarehere',
activeSelector = '.active,.selected,.current,.youarehere',
menuChildrenSelector = '> li,> ul > li',
completedEventName = 'statechangecomplete',
/* Application Generic Variables */
$window = $(window),
$body = $(document.body),
rootUrl = History.getRootUrl(),
scrollOptions = {
duration: 800,
easing:'swing'
};
Now for clarification the CSS you have specified is not clashing with the CSS changed by ajaxify.js so there must be something that you are missing, I will say that AJAXIFY.js is not the one who is changing behavior of page, please post live link of your page or total work for more details.
Update: Large Razor Site.
If you have ajaxify large razor project, that will not change the behavior; Yes, it prepares strong html objects in MVC4 so if there is some standard ignores in the razor code or html page code or master page code. this will occur, I will stay with My Vote that Ajaxify does not change the behavior, its something else that is classifies under mobile site.
Update : Removing float
Removing float:none helps --> that prov that this is a float issue, that has not been taken care before this node..
I will like to add that simplify CSS to base page/master page which are commonly used, as the ajaxify calls the page and if the CSS of that razor page is not loaded then also this problem occur.
I'm creating a responsive design but have run into a problem where the Facebook Javascript SDK code's div#fb-root is causing a horizontal scrollbar when the browser width is less than 590px. I've tested this on Chrome, Safari, and Firefox, but the issue only occurs in Firefox.
Should I just set div#fb-root to display:none or is there a better way of doing it?
Thanks!
EDIT: As requested, the code below is how I'm loading the SDK. When I don't load the SDK, the horizontal scrollbars disappear.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxx', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
The display: none is completely OK, since that <div> is not used for showing anything, it's a placeholder where all the FB scripts can be loaded into and appended to your page
Setting display:none made the scrollbar disappear, but when I used FB.ui(), no dialog showed.
I managed to solve it by wrapping #fb-root in another div:
<div id="fbdiv" style="width:0px;height:0px"><div id="fb-root"></div></div>
placed at the end of the body tag.
Hope that helps somebody.
As a side note this .fb-root also breaks sticky footers implemented with html { height: 100%; } body { display: table; height: 100%; } and footer footer { display: 'table-row'; width: 100% }
Facebook should fix this.
The problem with hiding the fb-root div arises when you want to make use of the apprequests API call. This places the dialog for sending app requests to friends in the div. If the div is hidden, the request dialog will never be shown. I found out about this the hard way.
You could just try setting the width of the div on page load or something similar.
I have run into this same problem and tried a slew of different CSS tricks to fix it.
Setting the width of fb-root or container divs doesn't fix the problem. Neither does any form of overflow:hidden. The only thing that has worked for me is indeed making fb-root hidden as Zoltan said. After doing this I tested the button several different ways and I am not seeing any broken functionality using with this method at least for myself.
If their script button is going to break people's sites FB really should be fixing this issue on their end.
NOTE: Firefox is the only browser this problem comes up with.
Here (and in Firefox only) it just showed two small empty "iframe-ish" windows in the middle of my page.
I solved using display: none, but Facebook should definitely fix this issue.
You should also be able to do:
#fb-root {
position:absolute;
left:-9999em;
}
and not have it cause a horizontal scrollbar. If for some reason you don't want to use display: none; you could then move it back with JavaScript/jQuery if you really need it shown.
put this in your css
#fb-root {
position:absolute;
left:0;
top:0;
visibility:hidden;
}