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.
Related
I'm building a website with ReactJS. On my page, I have a content section as well as a sidebar.
When I click on a button the sidebar should be toggled. At this moment, I'm changing the class of the content from col-md-9 to col-md-12 from bootstrap and set the attribute hidden to the sidebar.
But now, I want to add some transitions like fade in and fade out the sidebar and increase the size of the content. I have no idea how I can add these transitions because I'm changing the classes.
Can you tell me what I have to do?
You can use CSS. Take a look at animate.css
https://daneden.github.io/animate.css/
You can use css transition by changing classes. Here is example of two clsses that will do fade animation:
.fade-in {
opacity: 0;
transition: opacity 400ms;
}
.fade-out {
opacity: 1;
transition: opacity 400ms;
}
However it wouldn't work along with hidden Bootstrap class name, because it sets display attribute to none value. TO make it work you can use fade-in class name instead of hidden and fade-out, when side nav should become visible
Created Polymer app using polymer init command and selecting app-drawer-template.
In my-view1.html, linked to paper-toast.html and modified the template and script as follows:
<template>
<div class="card">
<div class="circle">1</div>
<h1>View One</h1>
<button on-tap="handleTap">open</button>
<paper-toast id="toast0" text="This toast auto-closes after 3 seconds"></paper-toast>
</div>
</template>
<script>
Polymer({
is: 'my-view1',
handleTap: function(){
this.$.toast0.open();
}
});
When the button is clicked, the toast appears but most of it appears behind the Menu drawer and only part of the toast window is visible.
I tried to center the toast using css but it does not work. Setting z-index did not work either. How can the toast window be positioned so it is not hidden behind the drawer?
Following css also can solve your problem.
paper-toast {
width: 300px;
margin-left: calc(50vw - 150px);
}
Added the following css class to toast element:
.mytoast {
width: 100%;
text-align: right;
}
Now toast window spans the page and text shows aligned to right end .
I have an app running in an iframe and it makes use of angular ui boostrap tooltips. Unfortunately if the element with the tooltip is on the edge of the iframe, the tooltip will be cutoff by the iframe. Is there any solution to this? Should I play with its position within the iframe, or the z-index value?
UPDATE
So I'm trying to override the tooltip positions (note that I an using angularjs ui bootstrap). I have 2 tooltips which each require their own positioning. I managed to change the css styles (colours and fonts) globally, but I'm having trouble targeting each one to give them unique positions. I have the following html and css:
<div id="my-div">
<ul>
<li tooltip="Foo">A</li>
<li tooltip="Bar">B</li>
</ul>
</div>
Tooltip "Foo" needs a different position that "Bar". So I'm trying to access the li tags using the following css, but it doesn't work.
#my-div > ul > li:nth-child(1).tooltip.top {
margin-left: 10px;
}
#my-div > ul > li:nth-child(2).tooltip.top {
margin-left: 30px;
}
Note that .tooltip.top is the bootstrap class added via the angularjs tooltip directive. I'm guessing this doesn't work because the directive is actually adding another element somewhere.
So it turns out angular will insert a div element right after the element defined as the tooltip. So in my case, when the tooltip event for A is triggered, angular inserts the new element like so:
<div id="my-div">
<ul>
<li tooltip="Foo">A</li>
<div><!-- tooltip for foo --></div>
<li tooltip="Bar">B</li>
</ul>
</div>
Therefore the solution I came up with was to add id's to each of my li tags:
<li id="foo-tip" tooltip="Foo">A</li>
<li id="bar-tip" tooltip="Bar">B</li>
and then access the css tooltip element like so:
#foo-tip + div {
margin-left: 25px;
}
#bar-tip + div {
margin-left: 15px;
}
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.
Is there a way to click on the background image which is defined in the CSS but not part of the html tag? I need to click on the div tag that has #class=hitLocation.
<ul id="uxFolderTree_uxFolderTree_template_TreeRootElement" class="ui-tree-root">
<li class="-ui-tree-branch -ui-tree-folder -ui-tree-type-root collapsible" data--selectionmode="None" data-level="0" data-path="0" data-rootid="0" data-parentid="0" data-id="0">
<div class="hitLocation">
the CSS is
.ui-tree .ui-tree-branch.collapsible > .hitLocation {
background-image: url("/WorkArea/FrameworkUI/images/icons/plus.png");
background-position: 0 center;
cursor: pointer;
Not directly, no.
You can either:
simply click the hitLocation element. WebDriver implicitly clicks into the center of the element, so it might be good enough.
Use Advanced Interactions API and specify at which location in the element you want to click.
For example, this clicks at position [1,1] counting from the top-left corner of the hitLocation element.
WebElement hitLocation = driver.findElement(By.className("hitLocation"));
new Actions(driver)
.moveToElement(hitLocation, 1, 1)
.click()
.perform();