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.
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.
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;}
I have a simple form that is inside Angular UI Bootstrap's tabs. Form controls have tooltips associated with them to show errors. I'm using custom event that will toggle tooltip visibility.
The idea is to have tooltip visible on required fields.
With UI-Bootstrap version 1.3.2 and Angular 1.4.8 everything is working fine but since I upgraded to Angular 1.5.3 tooltip is not showing anymore. It will show once I actually type something in the text field and delete it which makes me believe that now requires the model to be initialized.
I have here two plunks that will show exactly what is going on:
Working plunk (with angular 1.4.8) - https://plnkr.co/edit/IkuOdCrcFJ8lBeNA5sSh
<data-uib-tabset>
<data-uib-tab>
<data-uib-tab-heading>Tab 1</data-uib-tab-heading>
<form name="testform">
<input type="text" name="test" id="test"
data-ng-model="test"
data-ng-required="1"
data-tooltip-append-to-body="true"
data-tooltip-placement="right"
data-uib-tooltip="Required!"
data-tooltip-trigger="none"
data-tooltip-is-open="testform.test.$error.required" />
</form>
</data-uib-tab>
<data-uib-tab>
<data-uib-tab-heading>Tab 2</data-uib-tab-heading>
Content 2
</data-uib-tab>
</data-uib-tabset>
Not so working plunk (with angular 1.5.3) - https://plnkr.co/edit/Wl3Bq13FKPnqW7RqwfiJ
I noticed as mentioned in the comments that there is a class being attached - uib-position-measure. It has 3 styles that are causing the issue:
top: -9999px !important
left: -9999px !important
visibility: hidden !important
EDIT - I'm reorganizing my post now that I've dug pretty deep into this. Still don't think I have a great solution, but at least have some info and options.
Solution 1
Simply remove the culprit class uib-position-measure with javascript and then adjust the top and left styles on .tooltip.
Plunker
window.onload = function() {
var tooltip = document.getElementsByClassName('tooltip')[0];
tooltip.className = tooltip.className.replace(/\buib-position-measure\b/,'');
}
.tooltip {
top: 42px;
left: 150px;
}
Solution 2
Overwrite the styling that is causing the issue with javascript.
Plunker
<script type="text/javascript">
window.onload = function() {
var tooltip = document.getElementsByClassName('tooltip')[0];
tooltip.setAttribute("style", "visibility: visible !important; top: 42px !important; left: 150px !important;");
}
</script>
Solution 3
I was able to find where the .uib-position-measure class is created in the ui-bootstrap.js file. I removed !important from the visibility, top and left. After that I was able to fix the issue using css on the .tooltip class.
Plunker
ui-bootstrap.js is the file I created, copied the original over, and modified the uib-position-measure class - it is at the bottom on line 7327.
In style.css I simply added the below:
.tooltip {
visibility: visible;
top: 42px;
left: 150px;
}
Related Issue
I was also able to find an issue on GitHub related to this - https://github.com/angular-ui/bootstrap/pull/5530
Someone removed some inline styles and added them as a class, so that they could be overwritten by CSS instead of using javascript. This may be the best way to handle it - https://github.com/angular-ui/bootstrap/pull/5530/commits/44643775dece535b3ffa62d7edae86eaa12ac154. The problem is finding the location of the uib-position-measure inline styling and handling it the same way.
Using popover-popup-delay repositions the element and the class uib-position-measure is no longer active on it.
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've a div with the Angular ng-click directive attached to it. On hovering over this element the mouse pointer doesn't change. Is there a way to change it through CSS? I know I can simply attach an anchor tag to it, but I would like to know if this can be done.
Is there a way to change it through css?
Yes, see cursor.
If you just wanted to target elements with the ng-click attribute, for example:
[ng-click],
[data-ng-click],
[x-ng-click] {
cursor: pointer;
}
All you have to do is use the cursor property
<div data-ng-click="myFun()" class="pointer"></div>
.pointer {
cursor: pointer;
}
Can be done via css, just add:
.yourClass { cursor: pointer; }
To your stylesheet
If you are using datatables, you have to override the default datatables.css settings and add the following code to custom CSS, In the code below row-select is the class that I added on datatables in my HTML page.
table.row-select.dataTable tbody td
{
cursor: pointer;
}
Yes you can achieve it simply through CSS, nothing special about AngularJS here.
<div ng-click="myAngularFunctionWithinController()" style="cursor: hand;cursor: pointer;">
</div>