I have a dropdown inside a fixed height and scrollable modal body. The height of dropdown menu exceeds the modal body. When dropdown is open, it will cause the body scroll. How can I make the dropdown menu fully visible?
Here is jsfiddle
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Modal Title
</h4>
</div>
<div class="modal-body bg-secondary" style="height:15rem; overflow-y:auto;">
<div class="alert alert-info">
Modal body is fixed height and scrollable. Want to make dropdown menu fully visible.
</div>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<div class="p-3" style="width:10rem;height:12rem;">
Dropdown Content
</div>
</div>
</div>
</div>
</div>
This should work:
const dropdown = document.querySelector('.dropdown');
const dropdownMenu = document.querySelector('.dropdown-menu');
dropdown.addEventListener('shown.bs.dropdown', () => {
window.requestAnimationFrame(()=>{
dropdownMenu.scrollIntoView({
behavior: "smooth",
block: "end",
inline: "nearest"
});
});
});
Related
I'm trying to chain together a Selector, a withText, a find, and another withText in order to find a particular link.
Here's the HTML I'm trying to search through, and I want to select the "Edit" button that's in the div with the text "Reviewers":
<div class="content">
<div class="ui edit-segment--header">Documents
<button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
</div>
<div class="ui segment segment__compact-top">
<div role="list" class="ui bulleted list">
<div role="listitem" class="item"><span>Budget</span></div>
<div role="listitem" class="item"><span>Draw cover sheet</span></div>
<!-- (a few more...) -->
</div>
</div>
</div>
<div class="content">
<div class="ui edit-segment--header">Rules
<button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
</div>
<div class="ui segment segment__compact-top">
<h4 class="ui header">Automatic</h4><span>No rules selected</span>
<h4 class="ui header">Manual</h4><span>No rules selected</span></div>
</div>
<div class="content">
<div class="ui edit-segment--header">Reviewers
<button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
</div>
<div class="ui segment segment__compact-top">
<div role="list" class="ui list">None</div>
</div>
</div>
I'm trying to click this using:
await t.click(Selector("div").withText("Reviewers").find("button").withText("Edit"));
TestCafe ends up finding the "Edit" button that's in the div with the text "Documents" inside and clicking it.
I would expect that Selector("div").withText("Reviewers") would find the specific div with the text Reviewers inside it, and then the .find("button").withText("Edit") would find the only child button (which happens to have the text Edit) inside that. Am I misunderstanding how it should work? Thanks
Your "Edit button" selector (Selector('div').withText('Reviewers').find('button').withText('Edit')) is correct.
I would expect that Selector("div").withText("Reviewers") would find the specific div with the text Reviewers inside it
The main point of your example is that the "Reviewers" (Selector('div').withText('Reviewers')) selector matches two div elements.
To illustrate it I made the following test in the context of your example page:
test.js
import { Selector } from 'testcafe';
fixture `fixture`
.page `http://localhost:8080`;
test('test', async t => {
const divReviewers = Selector('div').withText('Reviewers').addCustomDOMProperties({
outerHTML: el => el.outerHTML
});
await t
.expect(divReviewers.count).eql(2);
console.log('[1] divReviewers.nth(0).outerHTML:\n', await divReviewers.nth(0).outerHTML);
console.log('[2] divReviewers.nth(1).outerHTML:\n', await divReviewers.nth(1).outerHTML);
});
Result
[1] divReviewers.nth(0).outerHTML:
<div class="content">
<div class="ui edit-segment--header">Reviewers
<button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
</div>
<div class="ui segment segment__compact-top">
<div role="list" class="ui list">None</div>
</div>
</div>
[2] divReviewers.nth(1).outerHTML:
<div class="ui edit-segment--header">Reviewers
<button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
</div>
√ test
1 passed (1s)
I have successfully added a modal from external link in my web-app, but now when I click the button to launch the modal the content of the previous modal is launched. I want it to be reloaded every time.
This is the button for launching the modal.
<button href="/forum/flag_post/0838024b-f210-4f4d-ac53-fd4ade12d533" class="btn btn-default" data-toggle="modal" data-target="#myModal">Report</button>
There are mutliple buttons like this and each one has a different href and once I press a button and close the modal, the same modal content is lauched every button. I don't want that. I want the modal content to be loaded freshly from the URL.
This is the modal class:
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>
Use JQuery:
<script>
$(document).ready(function(){
$("#modalLinks a").click(function () {
var addressValue = $(this).attr("href");
$(".modalContent").load(addressValue);
});
});
<script>
<div id="modalLinks">
Report
Somewhere
Somewhere too far
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
The idea is whenever you click on a link, JQuery update the modal content with ajax.
I want to hide html elements during the initial load, by clicking a button or link i will show those html elements. I can't find a solution to hide or show the element in vuejs2 version. I can able to see few options in vuejs but i am not sure how to use those methods. Below is my component code in that i want to hide the html element(id) "Message".
<template>
<div class="row">
<div class="col-lg-12">
<label class="checkbox checkbox-inline no_indent">
<input type="checkbox" value="">Show stats
</label>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">List Values</h3>
</div>
<div class="panel-body">
<button type="button" id="btn1" class="btn btn-warning btn-md" v-on:click="showWorkflow">Test 1</button>
<button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="showWorkflow">Test 2</button>
<button type="button" id="btn3" class="btn btn-info btn-md" v-on:click="showWorkflow">Test 3</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="Message">Hello i am here</div>
</div>
</template>
<script>
export default {
name: 'jobs',
methods: {
showWorkflow: function (e) {
console.log(e.target.id)
}
}
}
</script>
In Vue, you use the v-if directive to conditionally render elements.
You could also use the v-show directive if you wanted to just toggle the CSS display property.
See the section in the docs on Conditional Rendering for more info.
In your specific case, make showWorkflow a data property initially set to false.
Use this as the argument for a v-if directive on the content that you want to initially hide.
Then, when you want to show the content, set showWorkflow to true:
new Vue({
el: '#app',
data() {
return {
showWorkflow: false,
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<div v-if="showWorkflow">
Here is the workflow
</div>
<button #click="showWorkflow = true">Show Workflow</button>
</div>
Here is the documentation on conditional rendering in Vue
Can I eliminate some of these divs. I like to keep my code lean. I understand the 5th one b.c. it is the footer, but what about the other 4.
Here is the code
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Submit</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<p>Bookmarks</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the fiddle to run it
https://jsfiddle.net/te4ta7hc/
Let me tell you about the modal window first
Where the modal content is the base which will show after triggering the modal.
Modal Header where we can able to put the heading for our modal window like( Enquiry form).
Modal Body: where the actual content have to be present whatever it may be. Such as Forms, Text contents etc..
Modal footer: where you can add some actions like close button or anything else
So if you want to eliminate the code means you can remove the modal header and footer.. make sure you added button to close modal in modal body
i have a div which is dynamically generated though button click.
As follows:
`
<div id="modal4#{c.requestId}" class="modal-approval-size modal fade modal1" tabindex='-1'>
<div class="modal-dialog modal_dialog"
style="background-color: #f5f3f4;">
<div class="modal-content-new modal-content">
<div class="modal-header modal_header">
<h4 class="modal-title">Confirmation Header</h4>
</div>
<div class="modal-body modal_body">
<p>Please confirm the approval by clicking Ok. If you do not wish to approve the request please click Cancel.</p>
</div>
<div class="modal_footer">
<span><a href="#"
style="color: #000000; text-decoration: underline;"
data-dismiss="modal" aria-hidden="true">Cancel(Esc)</a></span>
<button type="button" class="btn btn-primary approve_btn"
data-dismiss="modal" id="approvalConfirm" onclick="callFunction('#{c.requestId}','C','A')">OK</button>
</div>
</div>
</div>
</div>`
I want to click on the OK button through selenium WebDriver.
I am using Xpath as below:
//*[#id="approvalConfirm"]
But its not clickable and working. Can you please tell me why and how to fix it?