Hi one of my button (toggle) in the background is not disabled when a popup is shown. I can still click on it. How to handle that with ionic?
Actually it's with:
.popup-open {
pointer-events: none;
}
To correct this, add:
.popup-container {
pointer-events: auto;}
Related
When clicking on a link (or button) to display a dismissible popover, the border of the clicked element is highlighted. This occurs with the example from the Bootstrap documentation and my page in practice. (FYI, I plan to replace my text "[ i ]" with an image; my assumption is that the highlighted element is the href and not the text.)
Bootstrap 5 Docs Dismissible Popover Button
My DismissIble Popover
In the Bootstrap Docs example, the following is added to the element when the button is clicked:
aria-describedby="popover808202"
My Code
<div class="tile-title">
Modified<span style="float:right;"><a tabindex="0" href="#" title="Help" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Descriptive and useful information can be displayed here.">[ i ]</a></span>
</div>
My JavaScript
let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
let popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
trigger: 'focus'
})
Desired Result
I would like to suppress the highlighting.
Turns out this was easier than I thought.
a:focus {
outline: none;
border-color: rgba(0,0,0,0);
box-shadow: none;
}
This example will of course disable anchor highlighting completely (for all anchors that use the CSS properties above) for the entire page.
I'm trying to use :focus on md-autocomplete to change the background color when the user press Keydown or Keyup.
It's work fine with :hover for the mouse :
md-autocomplete-parent-scope:hover{
color: rgb(63, 92, 154);
}
but not with :focus.
Thanks.
I found a way to do it. I'm not sure it's the good solution but it's works.
.ng-scope .selected{
color: rgb(63, 92, 154);
}
When md-autocomplete is focused, then it's child element md-autocomplete-wrap has class md-menu-showing, so you can use this class and change the color for this element.
md-autocomplete has an input element inside, so you have to :focus the input element.
md-autocomplete input:focus {
background-color: yellow;
}
As others have mentioned, this is because the md-autocomplete element itself does not get focus - instead it has a child input element that gets the focus.
You could try :focus-within. However this currently does not work in IE or Edge.
I am using Angular UI Bootstrap Modal box. When the modal opens the body has a scroll. When I scroll the content behind the modal also scrolls.
I can set overflow: hidden to the body tag and this solves the issue. However if I have alot of content within my modal I need a scroll to show. This scroll should not be inside the modal i.e When I use the page scroll the modal should only scroll and not the content. Plunker here
A slight modification of dreamhigh's answer which worked well for me included adding position: fixed for iOS devices:
body.modal-open {
position: fixed;
overflow: hidden;
}
Furthermore adjusting the viewport to disable user scaling to keep inputs from automatically zooming and introducing scroll bars on the body content:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Credit to this post:
Bootstrap 3: horizontal scrollbar on iPhone after form focus
With these two changes I was able to get angularjs modal forms to behave well on iOS.
I'm facing the very same problem actually, using UI Bootstrap, and came up with kind of a workaround. On opening the modal, you add a class (.ovh) to the body, that sets overflow to hidden. On closing/dismissing the modal, you remove that class, so that scrolling is possible again.
See my fork of your fiddle here: http://plnkr.co/edit/OIJ2ee5Ph0ELgkKPrSbr?p=preview
Note that I've placed the class in the index.html, just for demonstration purposes. Besides I injected $document in the controller definition, to use the reference provided by angular.
For those using Angular JS and the UI Bootstrap. Here is what it took for me to get it to work. My situation was a bit different. I had a Modal that worked and scrolled great. I then had a button on that modal that would pop another modal. Once that second modal was closed, the initial modal would no longer scroll. This is all it took:
.modal.in {
overflow-x: hidden;
overflow-y: auto;
}
I just put below CSS and now the body scroll is hidden whenever modal popup is opened. I am using Angular UI Bootstrap.
.modal-open {
overflow: hidden !important;
position: relative
}
When you add overflow:hidden, the background page scroll is hidden. However, the modal scroll will be visible as the page scroll and the modal will be set to scroll.
body.modal-open {
overflow: hidden;
}
In bootstrap js commmented line causes the problem, you can comment this line as i do.
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) {
that.$element.appendTo(that.$body) // don't move modals dom position
}
that.$element
.show()
.scrollTop(0)
if (that.options.backdrop) that.adjustBackdrop()
that.adjustDialog()
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
.attr('aria-hidden', false)
//that.enforceFocus()
For me the page scrolled when the dialog was being closed, so I fixed the ui-bootstrap-tpls.js file. The actual problem is that when dismissing the modal, removeModalWindow is being called with parameters 'modalInstance' and 'modalWindow.value.modalOpener'.
The second parameter is being used to focus on the element which triggered the modal window. Just remove the second parameter in the 'dismiss' and 'close function' and your page scroll effect will be solved.
'removeModalWindow(modalInstance, modalWindow.value.modalOpener)' becomes 'removeModalWindow(modalInstance)'
I fixed this problem, with adding this code in global style:
.modal-open .modal {
overflow: hidden;
}
.modal-open{
height: 100vh;
}
you can do this, and you haven't scroll on modal open.
I am trying to do a module with a datepicker inside an accordion.
problem is the datepicker popup box is not visible over the accordion.
here is a plunker showing the problem :
http://plnkr.co/edit/jBqU0LXQFcUuzQLency2?p=preview
any idea on how i could make the dialog window appear over the accordion module ?
edit: with bootstrap 3, this is working :
.panel-group .panel {
overflow: inherit;
}
Add this css after the bootstrap.css link can fix it. This will override the CSS relating to position for each accordion-body.
<style type="text/css">
.collapse {
position: inherit;
}
</style>
This works for me Bootstrap version 3:
.panel-body {
overflow: inherit !important;
}
my datepicker is in an accordion that is in a bootbox.
I am using lightbox2 but it hides my page scrollbar while opening, after closing scrollbar it stays hide.
I have checked css, if there is some issue with my blog, please let me know.
I have tried all browsers but same is happening on all browsers.
Link to my page which have problem , you may check this...2
Please help me out..
change your css..
whenever you are clicking on the image class named CSS_LIGHTBOX_FIXED_FRAME has been added to html tag and that class has the following css
html.CSS_LIGHTBOX_FIXED_FRAME {
height: 100%;
margin: 0;
overflow: hidden !important;
width: 100%;
}
remove the overflow:hidden part from above and you will have your scrollbar back