In the process of switching from select2 3.5 -> 4.0. I have now come across a situation where there are problems when used in boostrap modals.
In 3.5 I used something like this which allowed them to function properly :
.modal-open .select2-drop-mask {
z-index: 10051;
}
.modal-open .select2-drop {
z-index: 10052;
}
.modal-open .select2-search {
z-index: 10053;
}
The classes and quite a bit else has changed with 4.0 and this no longer does anything. I am assuming the issue is z-index related, but am not sure. I have tested the same select outside of the modal and it works as intended which is why I am assuming it is css related. The input shows, but the dropdown, search etc do not. Has anyone else come across this and found the solution?
EDIT jsfiddle:
This is a little different than my use case - I use load() to inject remote content into the modal then show it in, BUT the same issue happens here. You cannot gain focus on the search input to type anything. Strangely enough I noticed it works in Internet Explorer 11, but does not in the latest Firefox, Chrome, or Safari.
modal fiddle
I resolve this problem.
You just remove 'tabindex="-1" ' in modal div:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Related
When I access at this link from iOS the button with the symbol of the clock needs to be tapped twice in order to show the opening hours. This problem affects also the other buttons.
The first tap is handled like a mouseover event.
How can I fix this problem?
This is the code of the button with the clock:
<li><a href='#openinghours' data-toggle='tab' title='Opening hours'>
<span class='round-tabs four'><i class='fa fa-clock-o'></i></span>
</a></li>
<div class="tab-pane fade" id="openinghours">
<!--html content of the opening hours-->
</div>
On the desktop version of the website everything is working well.
I don't have enough rep to comment, but I would clear all your JS errors on your page before you start to debug this. You seem to have around 6 console errors and 2 warnings.
I've tried this in my Simulator, and it behaves as you say - however the W3C Bootstrap 4 Nav Tabs are fine. Therefore, I'd suggest looking at the difference (as well as seeing if any errors are interfering)
Link to w3 Schools:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_nav_tabs_toggleable&stacked=h
I am writing an app with cordova, AngularJS 1.5.3, and Ionic 1.5.3.
I have a page that when the user clicks on a button, it toggles which component to render.
Here is a code snippet:
<div class="list">
<weekly-roster ng-if="rvm.data.mode === 'week'"></weekly-roster>
<monthly-roster ng-if="rvm.data.mode === 'month'"></monthly-roster>
</div>
<button ng-click="rvm.toggleView()">Toggle</button>
Here is my codepen link:https://codepen.io/aubz/pen/YazozL
It works fine on Android and Safari desktop. It also works on some iPhones but not on the iPhone 6. When the user pushed the toggle button the second component is rendered and then it flips back to the original one.
I have no idea what could be wrong.
Instead of ng-if try using ng-show. Unlike ng-if, ng-show simply adds/removes CSS classes to hide or show the element. ng-if actually inserts or removes a DOM node, which could explain some of the funkiness:
<div class="list">
<weekly-roster ng-show="rvm.data.mode === 'week'"></weekly-roster>
<monthly-roster ng-show="rvm.data.mode === 'month'"></monthly-roster>
</div>
<button ng-click="rvm.toggleView()">Toggle</button>
I've been struggling with this one for a while. I'm using skrollr on a new site, and it is working great on the desktop. However, the content is getting cut off on ipad and android touch devices after turning the device from either landscape to portrait or vice versa. It is very similar to the problem described here : Skrollr cutoff on iPad, but the solution they recommended there is not fixing the problem for me.
This can sort of be fixed by adding padding to the bottom of the skrollr-body div, but the amount needed changes between portrait and landscape. The page seems to need a refresh when that is changed, so CSS and media queries aren't cutting it for me at the time.
Any ideas? Really digging Skrollr otherwise, but this is driving me crazy.
Here is the link for viewing :
http://rweststaging.com/stackoverflow/test.php
Here is the basic code :
// Top fixed section
<div id="animation"
data-0p="position:fixed; top:0%;"
data-100p="position:fixed; top:0%;"
data-120p="position:fixed; top:0%;"
data-210p="position:fixed; top:-130%; opacity:1; display:block;"
data-220p="opacity:0; display:none;"
>
</div>
//lower content section
<div id="skrollr-body"
style="position: absolute; top: 220%; width: 100%;"
data-top="" data-bottom=""
>
//content sections go here
</div> // end skrollr body
//skroller init
skroll = skrollr.init({
// mobileCheck:function(){return false;},
forceHeight:false,
smoothScrolling: true,
smoothScrollingDuration: 600
});
I've experienced issues putting by not having the #skrollr-body div independent (as this inherits a new function when detecting mobile).
So try wrapping your #skrollr-body div around your div with sections -
// Top fixed section ...
<div id="skrollr-body" style=""> // no styles
<div class="nonfixed" style="position:absolute; top:220%; width:100%;">
// all non-fixed elements
</div>
</div>
I thought my external panels (jQM 1.4) were working great, until I added more content to them, and now, I can see the external panel underneath my app's home page.
If they are short, it's fine, but once they reach a certain height, you can scroll down on the home (first) page and see the panel's contents.
The new docs aren't much help :/
I've tried a lot of variations... but here's a basic example that will trigger it:
<div data-role="panel" id="imExternal" data-theme="a">
<div style="height: 1200px; background: #000;">
<p>this is the panel, code is tight and outside of any containing page divs.</p>
</div>
</div>
*update: I'm specifically seeing it in my app with a popup open, and then clicking on an input field to show the Android keyboard. It seems to resize the page, which shows content from another page (external panel) underneath it.
You should enhance External widgets manually, as they don't get enhanced when page is created.
$(function () {
$("[data-role=panel]").panel();
});
Also, elements / widgets inside External panel should be enhanced as well.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Actually... DON'T use popups in external panels. Ultimately, that was the root cause of this.
I solved this by setting the css height of the page in question to the window height, which prevented the underlying panel from showing below it.
$('#page').css('height', $(window).height());
http://jsfiddle.net/s6Umb/
I'm getting this strange behavior where when I create a datepicker, there appears a small div right below the picker:
<div
id="ui-datepicker-div"
class="ui-datepicker ui-widget
ui-widget-content ui-helper-clearfix ui-corner-all">
</div>
This div seems to become the actual calendar display when I click on the datepicker input, and becomes hidden when I am done... but is visible upon initialization.
Is this a known issue, or did I do something wrong?
I think this is a known glitch. Don't know why it hasn't been resolved until now, but the easiest way to fix it is to just add the following CSS to your global stylesheet:
#ui-datepicker-div
{
display: none;
}
I've done this on several projects and it's worked perfectly without any problems.