I use bootstrap 4 I would like my field to always grow down. Never up, no matter what half the screen is in the form select.
How to achieve this effect? I tried to use this data-dropup-auto="false" but to no avail.
The desired effect
Side effect
My form example:
<!-- form -->
<tr>
<th></th>
<td>
<select name="city" class="form-control bg-white text-dark" data-dropup-auto="false" id="id_city">
<option value="" selected>Choose your city...</option>
<option value="1">Chorzów (3)</option>
<option value="2">Katowice (3)</option>
<option value="3">Diffrent (4)</option>
<option value="4">Mallorcowo (3)</option>
<option value="5">Milaberalinto (4)</option>
<option value="6">Kalineskow (2)</option>
</select>
</td>
</tr>
<!-- end form -->
You are using a native select element, and thus you have no control over its display.
The browser automatically determines how to display it, based on its position relative to the viewport.
The only way to control this is to use a custom dropdown list that works with JavaScript and not with the native select HTML element.
Bootstrap provides this kind of custom dropdown and has some options that will help you achieve what you want: https://getbootstrap.com/docs/4.0/components/dropdowns/#options (what you need is to set the boundary option to window)
I wanted to tackle this problem with CSS alone.(A hack actually :))
Bootstrap's dropdown's uses Popper.js for the positioning of the drop-down menu. This makes the task challenging since Popper.js seems to check and evaluate the position of the dropdown when the window is scrolled so I needed to use an !important rule to override Popper.js.
Here's the code I came up with.
.dropdown-menu{
transform: translate3d(5px, 35px, 0px)!important;
}
.dropdown{
margin-top:900px;
}
.dropdown-menu{
transform: translate3d(5px, 35px, 0px)!important;
}
**Working snippet**
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
This will always force the drop-down to be below the button, even if the button is at the bottom of the screen.
Related
I have a small question.
Building a system to manage bookings. Now I would like each booking to have its own individual dropdown menu.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
All of my lovely actions
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="?add_booking_queue&id={booking_id}">Add to queue</a>
<span class="dropdown-item" onclick="show_booking_summary({booking_id});">Another action</span>
<a class="dropdown-item" href="?download_pdf&id={booking_id}">Download booking PDF</a>
</div>
</div>
Some code just like this.
But in case I have about 1000 bookings listed in a single screen. This would generate such a load of HTML that it would work against me in loading time. And it would probably increase browser memory usage.
Now I would like to have this dropdown menu to be dynamically added.
For example adding a single button with this feature
<tr>
<td>ticket : 293823098</td>
<td>price : $59,-</td>
<td>name : Donald Trump</td>
<td><i class="fas fa-cog booking-action" data-id="238232"></i></td>
</tr>
Then when clicking on the .booking-action it adds the mentioned above dropdown. Or similar. Not restricted to. Just as a reference. And using the set data-id="238232" / or another tag that contains just this.
My problem is that I seem not to be able to find the code or start required to realise this.
All I am finding are right-click context menu's and that's not what I am after.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle2" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Material Type
</a>
<div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
<a class="dropdown-item">Mud</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cloth</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Thread</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Jute</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cotton</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cane</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Bamboo</a>
</div>
</li>
Can I get the value from the menu after selecting like following?
var email=document.getElementById('signUpEmail').value;
So that I can use this variable in ajax.
Edit
As #Timir suggest to use select then the menu is look like
<li class="nav-item">
<select class="custom-select custom-select-lg mb-3" id="mydropdown">
<option selected>Material Type</option>
<option value="Mud">Mud</option>
<option value="Cloth">Cloth</option>
<option value="Thread">Thread</option>
<option value="Jute">Jute</option>
<option value="Cotton">Cotton</option>
<option value="Can">Can</option>
<option value="Bamboo">Bamboo</option>
</select>
</li>
Can I get the value from the menu after selecting like following?
No, there are no input to retrieve their value.
but you can get the text inside the link like
$('.menu2 a.dropdown-item').on('click', function(){
$(this).text()
});
Turn it into a select, give it an id, then say:
$(“#mydropdown option:selected”).val();
There are workarounds for basically everything in JavaScript. Including this. Without using JQuery, you could add an event listener, or you could make an onlick within each option or anchor tag.
When you click on the drop down and set the option, it calls the function which sets the variable. So even though there is no input box... you are just setting a global variable. And then you utilize that variable as a part of a form or however you plan on using it.
I have a dynamically created set of bootstrap-select widgets I'm making with a dropdown. My issue is that to have the select not close the dropdown I have to put a 'event.stopPropagation()' on the dropdown itself.
When I do this the bootstrap select doesn't open when clicked, but a normal select will work. Is there a way to get the bootstrap select to work within a bootstrap dropdown where stopPropagation() is called on the dropdown click event?
Edit:
Example JsFiddle Test App
https://jsfiddle.net/ChaseRLewisAlamode/r4k5cy9s/1/
HTML
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Manage Statuses <span class="caret"></span>
</button>
<ul class="status-dropdown dropdown-menu" role='menu'>
<li role='presentation'>
<div class='status-item'>
<div class='status-text'>My Status</div>
<select class='selectpicker'>
<option value='active' selected>Active</option>
<option value='pending'>Pending</option>
<option value='sold'>Sold</option>
<option value='inactive'>Inactive</option>
</select>
</div>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Always Visible <span class="caret"></span>
</button>
<ul class="visible-dropdown dropdown-menu" role='menu' style="display: block;">
<li role='presentation'>
<div class='status-item'>
<div class='status-text'>My Status</div>
<select class='selectpicker'>
<option value='active' selected>Active</option>
<option value='pending'>Pending</option>
<option value='sold'>Sold</option>
<option value='inactive'>Inactive</option>
</select>
</div>
</li>
</ul>
</div>
javascript
$(".status-dropdown").on('click',function(e){
e.stopPropagation();
});
I'd recommend reading this question that is very similar.
Angular js stop propagation from Bootstrap "dropdown-toggle" event
Since you didn't post any code, I'm assuming that your problem is fairly similar. If my answer is way off base, you could help me refine it by posting in-code examples of the phenomenon you're curious about.
For your benefit, I'll try paraphrasing it here:
When you click select, I predict that two things happen.
First is that it opens Bootstrap dropdown menu. Second, the event propagates to the parent element and also triggers something like 'showDetails = !showDetails'.
The obvious solution is to try to stop event propagation with $event.stopPropagation() on the td level, so that event doesn't bubble up the DOM tree and never triggers parent ngClick. Unfortunately, it will not work because Bootstrap sets up click event listener on the document element to benefit from bubbling, so you can't stop propagation.
Assuming that's what's happening, I'd recommend that you check this example out:
Javascript:
$("#orgchart").jOrgChart({ chartElement: '#chart' });
$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
e.stopPropagation();
$(.'dropdown-menu').toggle();
});
HTML:
<div id="chart">
</div>
<ul id="orgchart" style="display:none;">
<li>Test
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu" style="text-align:left;">
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<ul>
<li>Test1.1</li>
<li>Test1.2</li>
</ul>
</li>
</ul>
I'm currently working on an ordering system that allows the user to choose a specified vendor from a dropdown-menu and comfirm their selection by clicking a seperate button.
A perfect example would be the Fallout 4 store page, where the "Order"-button is disabled until an item has actually been selected from the dropdown menu. (In my case there is only one dropdown menu).
I've got the following HTML:
<div class="col-md-12">
<div class="productRow">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="dropdownPositionLeft">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Choose your platform!
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<!-- List of vendors -->
<li><a tabindex="-1">Item I</a></li>
<li><a tabindex="-1">Item II</a></li>
<li><a tabindex="-1">Item III</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="dropdownPositionRight">
<!-- This is the button that confirms the selection and takes the user to the specified vendor from the dropdown menu -->
Order now!
</div>
</div>
</div>
</div>
And the following javascript that replaces the label of the dropdown-button:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));}
I want the "Ordner now"-button to be able to receive an external link to a vendor based on the dropdown menu. Meaning I would need to pass a variable to the button from the dropdown menu - So far I haven't managed to succeed in this.
I'm very new to both bootstrap and javascript and was hoping someone here might point me in the right direction as to how I should handle this.
I'm assuming I should be able to store an href-value with the items in the dropdown-menu and pass them on to the order-button when selected, but I've had no luck in trying to figure this out while at the same time not pointing the player directly to the vendor through the dropwdown-menu.
I've also experimented with forms without the desired effect. Obviously I'm doing something wrong, but not sure as to what it is.
Check out the information for using bootstrap buttons here: http://v4-alpha.getbootstrap.com/components/buttons/
I usually take the button and then wrap it in the tag like this:
<button type="button" class="btn btn-primary" disabled>Primary</button>
Notice how I made the button disabled by default, then you can use javascript/jquery to remove the disabled attribute when a certain action is performed on the page.
As far as setting it based on a different box being selected, you can also set the href="" attribute using jquery if you want it to live update without reloading the page, or if you're not worried about the page needing to be reloaded, you could use inside the href quotes.
I have some html
<select id="dropd" class="search-type" data-toggle="dropdown">
<option value="">All</option>
<option value="standards-and-publications">Standards</option>
<option value="sedl-digital-library">Library</option>
</select>
and this small js function which I am using to attempt to select this drop down menu and apply a key listener to. However I am having trouble getting this code below
$('.search-type').on('show.bs.dropdown', function () {
alert("I FINALLY FOUND YOU");
});
to run when the drop down is shown (clicked in this case). Do I need to wrap in this in an event listener listening for clicks? I have actually already tried this method but still could not get it to display this message or react in any way when the user clicked on the drop down. Based on what I have seen when I ran through this in the debugger, It never resolves the class selector, but this is just a guess. Is there something glaringly obvious I am missing or some weird bootstrap rule when using selectors?
Also I apologize if I am not giving enough info I am relatively new to this and am unsure of what is going on entirely.
See here for an answer: Process for using show.bs.dropdown in Bootstrap
Basically, the event is handled by the parent of the drop-down, not the drop-down itself. Also, BootStrap dropdowns are usually <ul>s. Here's an example of a standard drop-down with a handler:
HTML
<div class="btn-group" id="ddlWrap">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
JS
$('ddlWrap').on('show.bs.dropdown', function () {
alert('Found the dropdown wrapper!');
});
I think the events fire on the parent.So it should be the element above the .dropdown.So your code should be
<div class="btn-group" id="myDropdown">
<select id="dropd" class="search-type" data-toggle="dropdown">
<option value="">All</option>
<option value="standards-and-publications">Standards</option>
<option value="sedl-digital-library">Library</option>
</select>
</div>