I have jquery datatble have multiple rows and every row have button have dropdown but css not working proply.
Whwn iI click on first row button dropdown is opned in side.
Firsts Row Image
when I click on secon row button Its dropdown opened in first row.
Second Row Image
when I click on third row button Its dropdown opened in second row.
Third Row Image
->editColumn('order_status', function ($q) {
$status = '<div class="btn-group dropright">
<button type="button" id="dropdown-'.$q->id.'" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu" aria-labelledby="dropdown-'.$q->id.'">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>';
return $status;
})
I want when I click on which button dropdown should be open in his button right side.
Related
I am not able to get my button to fully cover the bootstrap table cell.
I tried other posts on how to make buttons fit inside table cells but none on them seem to work with the bootstrap ones.
<tbody>
<tr>
<td>Airport / Railway Station Drops and Pick-Ups</td>
<td>Arunachaleeshwarar Temple, Adi Thiruvarangam Temple</td>
<td>
<div class="dropdown">
<button style="height: 122px; width:159px;" class="btn btn-
secondary dropdown-toggle" type="button" id="dropdownMenu2" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Beaches
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another
action</button>
<button class="dropdown-item" type="button">Something else
here</button>
</div>
</div>
</td>
I tried to increase the size of the button to fit the cell, but this only increases the size of the cell and not how much of the cell the button covers. I ideally want it to completely cover the cell.
The issue is you have inline styling overriding the buttons properties.
style="height: 122px; width:159px;" is explicitly setting your deminsions for the button, therefor not allowing it to change once it's set. If you want it to fill the entire td you can remove that markup and replace it with a class, just for example, setting the width to 100%.
#dropdownMenu2 {
width: 100%;
height: 100%;
}
<tbody>
<tr>
<td>Airport / Railway Station Drops and Pick-Ups</td>
<td>Arunachaleeshwarar Temple, Adi Thiruvarangam Temple</td>
<td>
<div class="dropdown">
<button class="btn btn-
secondary dropdown-toggle" type="button" id="dropdownMenu2" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Beaches
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another
action</button>
<button class="dropdown-item" type="button">Something else
here</button>
</div>
</div>
</td>
</tr>
</tbody>
I have been using the bootstrap dropdown code as a template and it has been working until now. I have made sure every thing is up to date and now all my dropdowns are not working.
I have tried pasting the bootstrap code directly on my site and it still doesnt work. I updated my theme and now its broken.
It was working for weeks and now has stopped working.
<button class="btn btn-secondary dropdown mb-4" type="button" id="modelDropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="float-left" id="current-model">Finish</span>
<span class="float-right"><i class="fas fa-sort-down"></i></span>
</button>
<div class="model-filter dropdown-menu" aria-labelledby="modelDropdownMenuButton">
<a class="dropdown-item all-models" href="#">Finish</a>
<a class="dropdown-item" href="#">Paint</a>
<a class="dropdown-item" href="#">Stain</a>
</div>
I want the dropdown to open when clicked
It was an issue with the popper.js. I just had to add the popper.js line before closing the body.
Does anyone know why this would have been effected on an update?
We're using bootstrap in our project, and when we use dropdown we are asked to change our menu items from <a href="#" .. to <button> instead. Even tho the documentation for bootstraps use <a href ..
https://getbootstrap.com/docs/4.0/components/dropdowns/
I've asked the UX designer, and it has some issues with focus tabbing, like. when you tab through elements.
Is there any other compelling reason to use <button> over <a href="# ..
You can easily use buttons in a dropdown, too:
<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">
<button class="dropdown-item">Action</button>
<button class="dropdown-item">Another action</button>
<button class="dropdown-item">Something else here</button>
</div>
</div>
Working example: https://www.bootply.com/NTH6FzGx4A
So I have what should be an easy task that I just can't seem to find the answer to. The issue, of course, is somewhere in the CSS adjustment.
I have a bootstrap button group when includes a button dropdown. The group is pulled right inside a panel.
Here is a link to the Fiddle
my button group looks like:
<div class="btn-toolbar pull-right" role="toolbar" aria-label="Toolbar with button groups">
<div class="dropdown">
<div class="btn-group-sm" role="group" aria-label="First group">
Favorite
<button href="#" class="btn btn-secondary dsbtnsec dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Graph Race <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Bar Chart</li>
<li>Pie Chart</li>
</ul>
County View
Explore Map
Export Race <span class="glyphicon glyphicon-export"></span>
</div>
</div>
</div>
The Graph Race drop-down works but isn't positioned under the button properly. I can't seem to figure out where the CSS issue is occurring. Can anyone point me in the right direction?
The issue happens with the default Bootstrap CSS so it's not something that I think I introduced.
I think your problem is the btn-toolbar class : <div class="btn-toolbar pull-right" role="toolbar" aria-label="Toolbar with button groups">
try this :
<div class="pull-right" role="toolbar" aria-label="Toolbar with button groups">
It's work for me : https://jsfiddle.net/4tgyu9u0/
With the Bootstrap dropdown-toggle buttons is there any way to show the value that has just been selected?
<form action="/output/" name="InputCacheCheck" method="post">
{% csrf_token %}
<div class="input-prepend input-append">
<div class="btn-group">
<button class="btn dropdown-toggle" name="recordinput" data-toggle="dropdown">
Record
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>A</li>
<li>CNAME</li>
<li>MX</li>
<li>PTR</li>
</ul>
<input class=".input-large" name="hostnameinput" id="appendedInputButton" type="text">
<button class="btn" type="submit">Lookup</button>
</div>
</div>
</form>
Also the name recordinput isn't being supplied within the forms POST data.
Any ideas?
You should be able to change the dropdown text like this..
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});
Demo http://www.bootply.com/64302
How is the form being 'POST'ed?
Or you can do it likes this...
Using (documemt).on seems to work more consistently than targeting the click event from the element class. Also, by giving the button element an ID helps with assigning your dropdown selection in this case.
$(document).on('click', '.dropdown-menu li a', function () {
var selText = $(this).text();
$('#dLabel').html(selText + '<span class="caret"</span>');
});
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#">
Lists
<span class="caret"></span>
</button>
<ul id="drpdn_List" runat="server" class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
</ul>
</div>
In this case you should not use Bootstrap dropdown toggle. This is useful to show one or more hyperlinks when user click / hover on a button.
if you want style dropdown, you can use some other plugins like selectfx which acts/returns value like a dropdown.