I am using bootstrap modal for showing modal window. For modal body I am using iframe so that if I submit form I can get response on the same modal window.
My iframe is like :
<div class="embed-responsive embed-responsive-4by3">
<iframe seamless="seamless" class="embed-responsive-item" src="schedule"></iframe>
</div>
I am using ClockPicker plugin to pick the time. But when Clock Picker appears it hides behind the scroll. I have changed z-Index of clock picker but it doesn't seem to work.
Any help ?
Related
I have got Aurelia CssAnimator working and thats fine however I assumed it would act on any div and anything within that div however all the times I tried to make a div with other tags inside have animations nothing worked. I had this and because it has in side the div it fails to work.
<require from="./animateOnChange"></require>
<div animateonchange.bind="messageStrong">
<strong>${messageStrong}</strong>
${messageStrong}
</div>
What I wanted to animate is a div that has a bootstrap alert class as per:
<template>
<div animateonchange.bind="messageStrong">
<div class="alert alert-${alertType}" role="alert">
<strong>${messageStrong}</strong> ${message}
</div>
</div>
</template>
I assumed wrongly that anything that sat within the div being animated would also be animated. Its not so.
How would I make these message alerts disappear after 10 seconds ie fade out using javascript? I have bootstrap 3..
I have just one element that triggers a popover, and another element that closes it. If the popover is closed by this another element, then the next time I click the trigger, the popover won't show. I have to click it twice in order to see it opening.
I'm using Bootstrap v3.3.6 (latest version today). If I use previous versions of Bootstrap (i.e., v3.0.2), it works fine. Another questions in SO that solve this issue are using older versions of Bootstrap.
An example that illustrates this issue (in Codepen):
HTML:
<button class="btn btn-default" data-toggle="popover" data-content="This is a popover">
Toggle popover
</button>
<button class="cpo btn btn-danger">
Close popover
</button>
JS
$('[data-toggle="popover"]').popover();
$(".cpo").on("click", function(e) {
e.preventDefault();
$('[data-toggle="popover"]').popover('hide');
});
It's a known bug, with a fix pending of revision: github
When I'm using bootstrap 3 modal when I dismiss it the page reloads and /?is added to location string. How can I just dismiss and hide modal without page reload?
Your button that closes the modal will need to have the data-dismiss attribute and it should be equal to "modal"
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
This code is straight from the Bootstrap website (http://getbootstrap.com/javascript/#modals)
I am using bootstrap popover with vuejs.
How can I trigger vue functionality?
In below code when I am clicking on add break link, it opens bootstrap popover, with click me button. Now here vuejs doesn't work, if I click on click me, it is not prompting alert.
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button>' href="javascript:void(0)" class="btn btn-link popover-notitle">
<i class="ace-icon fa fa-plus-circle bigger-120 green"></i>add break
</a>
Can anybody help me?
Since the button is just written in a string, it isn't being compiled by Vue. Here are a couple of ideas to try:
Use Vue for popover as well: https://yuche.github.io/vue-strap/#popover
Create popover content in a separate div (in your component so Vue will compile it) and then fetch the content for the popover:
{
content: $('#myPopoverContent').html(),
html: true
}
I'm testing a form. When I click on a modal, a div modal appears and the background fades out and this new modal fades in that allows you to input information. For some reason selenium won't recognize elements on this modal. Its not listed as an iframe so I'm not sure if I'm suppose to use the switch to.
the modal
<div id="addressModal-20f95ac4-8a83-4c02-862d-a42d60a74b04" class="modal hide fade in"
style="display: block;" aria-hidden="false">
text are in modal
<textarea rows="2"name="viewModel.MortgageForm.BorrowerInformationSection.Borrowers[0].Dependents.modalTextArea-addressModal-20f95ac4-8a83-4c02-862d-a42d60a74b04" id="modalTextArea-addressModal-20f95ac4-8a83-4c02-862d-a42d60a74b04" cols="20" class="span valid"></textarea>
There may be multiple elements with that same DOM signature and webdriver picked up the one which is not context of the current user view.
Solution: Since it is not an iframe, you will have to locate the element in context of the modal box container. You can try the following to locate the textarea webelement:
JQuery:
$("div[id^='addressModal']:visible").find("textarea")
WebDriver(Java):
driver.findElement(By.cssSelector,"div[id^=addressModal] textarea")