Issue
Hello guys i try to implement in html table cell dropdown button to print files related to current row and for that i chose bootstrap button. That button on last position in row and when i click on dropdown btn result is not showed in full width and sometimes when list is bigger list is hiden like on screenshot.
I try manualy to set width:100% on li and also i try 100% on ul but not work.
I just want to show list names to be shown in full with not like on screenshot.
Output:
<td class="text-center">
<div class="btn-group">
<button type="button" onclick="return getProductFiles(54)" data-product-id="54" class="btn btn-secondaryr dropdown-toggle show" data-bs-toggle="dropdown" aria-expanded="true">
<i class="fa fa-print"></i> Izaberi
</button>
<ul class="dropdown-menu show" id="product_files_dropdown" style="width: 100%; position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(-32px, 40px);" data-popper-placement="bottom-start">
<li style="width:100%;"><a href="" >1667211114_Uputstvo za upotrebu Pm2012 sa pecatom.PDF</a></li>
<li style="width:100%;"><a href="" >1667211114_Uputstvo za upotrebu pm2012 slikovno bez pecata.pdf</a></li>
</ul>
</div>
</td>
I populate list with ajax when user click on button
function getProductFiles(product_id) {
var self = product_id;
$.ajax({
type: "GET",
url: '/admin/proizvod/ajax?product_files=' + self,
success: function(result) {
// $(".testn").html(result);
console.log(JSON.parse(result));
var json = JSON.parse(result);
$('#product_files_dropdown').empty('');
for (var i in json) {
var li = $('<li style="width:100%; border-bottom: 1px solid #333">');
li.append($('<a href="" id=' + json[i].Id + '>').html(json[i].name));
$('</li>');
$("#product_files_dropdown").append(li);
}
},
error: function(xhr, status, err) {
alert(err.toString(), 'Error - LoadListItemsHelper');
},
complete: function(result, jqXHR, status) {
$(".loader").fadeOut();
}
});
}
Does anyone have idea how to do this? Thanks
Solution
The dropdown appears to work correctly by simply following the Bootstrap examples. The custom styles applied over Bootstrap are causing the problem.
function getProductFiles(n) {
// placeholder
}
<div class="row">
<div class="col">
<table class="table table-sm table-bordered">
<thead><tr><th>A</th><th>Opcije</th><th>Stampanje</th></tr></thead>
<tbody>
<tr>
<td>X</td>
<td>X</td>
<td>
<div class="dropdown">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Izaberi
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<a class="dropdown-item" href="#">1667211114_Uputstvo za upotrebu Pm2012 sa pecatom.PDF</a>
<a class="dropdown-item" href="#">1667211114_Uputstvo za upotrebu pm2012 slikovno bez pecata.pdf</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<div class="alert alert-success" style="min-height:10rem;">
Some other text here
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Answered By - Yogi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.