I have a div inside an ng-include template that won't highlight when you mouse over. The cursor does change to a pointer on hovering over the text, but when you actually click and drag to highlight the text, nothing highlights.
This is important because I can't tab through the elements inside the ng-included template, which is a requirement for screen readability. Any ideas what's going on?
Parent template:
<div ng-controller="EntryController">
<!-- Stuff that works -->
<div ng-include="'entry_review.html'"></div>
</div>
entry_review.html:
<div>hello</div>
Result - not able to click and drag a highlight over "hello". Also can't tab through it (which is the real problem).
It probably has 'user-select: none;' somewhere in the CSS?
Angular shouldn't have any affect on this.
Related
Take a look at this (overly simplified) snippet:
HTML
<div class="container">
<button class="no-select">Button</button>
Container Text
</div>
CSS
.no-select {
user-select: none; /* For comprehension sake, pretend this works for every browsers */
}
When clicking, dragging or double-clicking the button on desktop, it works as expected: the text inside the button is not highlighted.
Long-pressing the button on mobile still doesn't select the text inside the button, but instead starts selecting the parent's text. More precisely, it selects the next "selectable" thing it can. In this case, it would be the container text (Container Text). I've only tested on iOS, someone could confirm for other devices?
You can also see this behavior on Material-UI's buttons. Long-press one of the buttons on iOS and you will see the bug.
How do you prevent this behavior from happening?
Nodes in an HTML document bubble most events to its parent (and subsequent parents) that are not captured by the child. This is what you are seeing.
If you want to avoid the parent's other text from being selected when the child is (long) pressed, try wrapping the other text in a separate element.
<div class="container">
<button class="no-select">Button</button>
<span class="container-text">Container Text</span>
</div>
Generally, it's good practice to not leave bare text next to other HTML elements as it can break semantic reasoning. However, in some instances it can be acceptable, such as anchor tags or inline text buttons.
I'm having this problem:
I'm starting with Angular 6, so I wanted to do a text editor which shows the css styles while you are typing.
Seeing that I wasn't able to show the Css styles inside of Textareas, I tried with an editable div when I show the text on [innerHTML]="".
The main problem is when I call the method bound to an (input), the cursor goes to the start of the div, instead of go to the last position to keep typing.
I'm using the following div:
<div class="derecha" id="editable" [innerHTML]="textoCompleto" contenteditable="true" (input)="aTexto($event.target.innerText)"></div>
Thank you so much
I have made a button using which must include a picture and text. Here is an example of what I have at the moment
https://jsfiddle.net/9c9dnot9/
<button id="CLPButton" class="DeptButton">
<span>
<table style="width:120%">
<tr>
<th><img src="http://i.imgur.com/vjrbizL.png"></th>
<th>Clinical Lab <br> Platforms</th>
</tr>
</table>
</span>
</button>
The reason I have it set up as a table is to properly adjust the alignment and formatting of the image and text within the button.
I can wrap the image and the text in tags to href to the page I want to link to.... but then you have to click the picture or the text. I want the entire button to be clickable and redirect to the URL.
I have tried every tip and trick I could find on numerous forums but can't seem to get it to work. Things either outright fail or completely screw up the formatting.
The purpose of this is to have a series of buttons for a SharePoint site which link to certain corporate departments.
I am somewhat new at coding in general so the more explanation the better! Thank you
Buttons are not intended to be links. The purpose of a button is to interact with HTML forms (e.g. submitting form data).
If you want to have something that looks like a button and behaves like a link, then I would recommend creating a link and styling it with CSS to look like a button.
In your fiddle, you can actually just change your <button> markup to <a> and it should all work fine.
Updated Fiddle
You can wrap the entire button in an a tag and add the display: block property in order to set its height depending on its content. Then, instead of setting the width on the button, set it on the link and add width: 100% to the button instead, so your link won't take the full width of its container and your button will be more maintenable because you won't have to set the width of the link and the button if you decide to change !
Here is a working fiddle: https://jsfiddle.net/d5tcamok/2/
I am working on tabbing through the whole web page using the keyboard(tab key, shift+tab key) and everything is working fine and smooth. Also when i keep pressing the tab key, the focus cycles through all the elements(address bar, elements, back to address bar and so on).
Now in some cases, i have an modal and an transparent overlay on top of my content. Now when this happens, when i use tab key, i move from the left menu to the overlay and from the last focusible element on the overlay, i have to force the focus to the body element(or the address bar). So Basically when there is an overlay, i want to ignore the element below the overlay from tabbing. Is there any way i can achieve it cleanly?
I was thinking of setting tabindex=-1 for all elements under the overlay but any other better approach would be the most welcome
Thanks
This is an oldish question, but I just ran into this issue today, so I thought I'd share my solution.
As long as you know the tab order of items in your overlay, you can just add a blur event listener on the final item and use it to move the focus back to the first item in your overlay:
lastElementInOverlay.addEventListener('blur', function()
{ firstElementInOverlay.focus(); });
It strikes me that this would be easier than changing the tabIndex of all the elements under the overlay (and then having to change them back when the overlay is gone.
The 'modern/future' solution to this problem seems to be the inert attribute...
So taking the example above, it would look like this with overlay opened
<div id="menu" inert>
<a>
<a>
<a>
</div>
[...other code with tabindex]
<div id="overlay">
<a>
<a>
<a>
</div>
Now since inert is still a work in progress; you'll need to use the following polyfill (for now): https://github.com/WICG/inert
I was thinking of setting tabindex=-1 for all elements under the overlay but any other better approach would be the most welcome
This is what i usually do when fixing the tabbing of elements.
There is one other solution i can think of:
Setting the overlay tab-element lower then that of the rest.
Eg:
<div menu>
<a tabindex="10">
<a tabindex="11">
<a tabindex="12">
</div>
[...other code with tabindex > 10]
<div overlay>
<a tabindex="1">
<a tabindex="2">
<a tabindex="3">
</div>
The downside of this will be that after you have tabbed trough the overlay you will go to the menu again.
You could assign an id like "lastFocusableOverlayElement" to the last focusable HTML-element of your overlay and assign the focus to your trigger element (for example "menu-button") when leaving the last element's focus:
$('#lastFocusableOverlayElement').on('blur', function(){
if ($("body").hasClass("overlay-is-open")){
$('#toggleOverlay').focus();
}
});
In my case the last focusable element is always visible, regardless of whether the overlay is open. For this reason i needed an if query. It can be omitted if not necessary.
I just went through this tutorial: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ - to gain an understanding of modal popups with HTML5 + CSS3. What I would like to know is how the anchor tag is able to close the popup:
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
I changed the href to just "#" and it still works so I'm guessing that by virtue of targeting another element, the popup loses its target state in CSS and its opacity is set back to 0?
Here is a Codepen from one of the commenters: http://codepen.io/petebot/pen/DBvKj - its not the exact code but conveys the same idea.
This is done using the :target CSS3 selector. As long as #openModal is the URL fragment, it matches the ID of the modal, and then the styles upon it are applied. When you click the close link, the fragment changes, and the styles no longer apply, so it gets closed.
The modal will only remain open while the target is #openModal, even if you were to change it manually.