Dropdown is getting cropped out when using the ui-scroll directive - css

When I go to the last row (no. 25) and click edit you will see that the dropdown it's cropped out. Can you figure out how to solve this issue?
https://plnkr.co/edit/22e9bo?p=preview
<div ui-scroll-viewport class="col-md-12" style="height: 500px; border: dashed 1px #ddd;">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>id</th>
<th>source</th>
<th>destination</th>
</tr>
</thead>
<tbody>
<tr ui-scroll="item in datasource">
<td>{{item.id}} <a ng-click="showDropdown(item.id)">edit</a></td>
<td>{{item.source}}</td>
<td ng-if="dropdowns.active !== item.id">{{item.destination}}</td>
<td ng-if="dropdowns.active === item.id">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{item.destination}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>10.0.0.0</li>
<li>10.255.255.255</li>
<li>172.16.0.0</li>
<li>172.31.255.255</li>
<li>192.168.255.255</li>
<li role="separator" class="divider"></li>
<li>192.168.0.0</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>

Generally, this is not the ui-scroll issue, this is how the Bootstrap hosts it's dropdown menu in DOM. If the hoster element has overflow-y: scroll, then you'll get the situation you described in your question. As an angular-way solution I would suggest to use angular-ui wrapper for the Bootstrap: https://angular-ui.github.io/bootstrap/.
They have Dropdown directive which has dropdown-append-to and dropdown-append-to-body settings which allow you to append your Bootstrap dropdown to any element. This will solve the issue.

Related

The anchor element doesn't recognized on specify positions with tag helpers .Net core 6

I'm working with .Net Core 6 and currently I have problems to make it works the elements with tag helpers.
<div class="container p-3">
<div class="row pt-4">
<div class="col-6">
<h2 class="text-primary">Category List</h2>
</div>
<div class="col-6 text-end">
<a asp-controller="Category" asp-action="Create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Create new category
</a>
</div>
</div>
<br /><br />
<table class="table table-bordered table-striped" style="width: 100%;">
<thead>
<tr class="table-primary" ">
<th scope="row">Category Name</th>
<th scope="row">Display Order</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var category in Model)
{
<tr>
<td width="50%">#category.Name</td>
<td width="30%">#category.DisplayOrder</td>
<td>
<div class="w-75 btn-group" role="group">
<a asp-controller="Category" asp-action="Edit" asp-route-id="#category.Id" class="btn btn-primary mx-2">
<i class="bi bi-pencil-square"></i> Edit
</a>
</div>
</td>
</tr>
}
</tbody>
</table>
Here the first anchor works perfectly,
<a asp-controller="Category" asp-action="Create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Create new category
</a>
But when I'm using the next one, and I run the application, the navigator does not recognize the tag and does not create automatically the sintax to add the href tag.
<a asp-controller="Category" asp-action="Edit" asp-route-id="#category.Id" class="btn btn-primary mx-2">
<i class="bi bi-pencil-square"></i> Edit
</a>
After testing, I finally found the reason.
The problem is with this line of code:
<tr class="table-primary" ">
It has one more ".
Remove it, the href will be displayed normally.
<tr class="table-primary">

How to add scroll bars to a dynamic table with multiple tbodys

I am facing a complicated table design. I need to create a table with possible multiple tbodys. just like this:
As you can see, each tbody is for a date. and I need to add as many row as I want by clicking '+' icon for EACH date. and also can remove each row by clicking '-' icon. Now this is what I have done, but the new requirement is I need to add scroll bar for EACH tbody! (not for all table) each date(tbody) will show a scroll bar if I create more than 3 rows. as you can see, if I click '+' icon for date 01/08/2016, the scroll will appear on the right side of that tbody(only for this date leave other days alone.) How can I do it.
Here is my html:
<table class="table expensetable">
<thead>
<tr>
<th ng-hide="lodging.roomSameForAllDays">Date</th>
<th>Expense Type</th>
<th>Amount</th>
<th>Reimbursement</th>
<th ng-hide="lodging.sameDescriptionForAll">Description</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="day in lodging.roomData" ng-class="{'scroll-bar':getExpenseLength(day)}">
<tr ng-repeat-start="expense in day" class="ecom-components" ng-repeat-end>
<td ng-show="!lodging.roomSameForAllDays && ($index == 0)"
rowspan="{{day.length + 1}}"
style="vertical-align: top;">{{indexToDate($parent.$index) | date : companyDateFormat}}</td>
<td>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle clearfix" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="dropdown-label pull-left">{{expense.expenseType.expenseTypeName}}</span>
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="exp in roomRateTaxExpenseList | orderBy:'expenseTypeName'"><a href="javascript:void(0)"
ng-click="expense.expenseType = exp">{{exp.expenseTypeName}}</a></li>
<li></li>
</ul>
</div>
</td>
<td><input type="text" ecom-amount ng-model="expense.amount"></td>
<td>
<div class="dropdown" style="width:100%">
<button class="btn btn-default dropdown-toggle clearfix" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="dropdown-label pull-left">{{RNP_STATUSES[expense.rnp]}}</span>
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu">
<li>Yes</li>
<li>No</li>
<li>Personal</li>
<li></li>
</ul>
</div>
</td>
<td ng-hide="lodging.sameDescriptionForAll"><input type="text" ng-model="expense.description"></td>
<td><span class="whitebutton remove" ng-click="deleteRow('roomData', $parent.$index, $index)"></span></td>
</tr>
<tr>
<td colspan="5"><span class="whitebutton add" ng-click="addRow('roomData', $index)"></span></td>
</tr>
</tbody>
</table>
Thanks in advance.
Here is what I have tried to, it is close but still didn't 100% match the requirement:
table.expensetable{
width:100%;
thead{
display:table;
width:100%;
}
tbody {
max-height:240px;
display:block;
tr{
display:table;
width:100%;
}
}
}
post js for more information:
$scope.getExpenseLength = function(day){
var isScroll = false;
if(day.length>3){
isScroll = true;
}else{
isScroll = false;
}
return isScroll;
}
As you can see, I can add scroll-bar to each tbody( which is cool) but the rowspan, doesn't work after scroll-bar appear or disappear. any update I need here?
We have done similar kind of thing in one of our project like below
var abc = $scope.$watch('grid.gridModel.data.data.items.length', function (newValue, oldValue) {
if (newValue > 4) { //grid should show a scrollbar after 3 rows
$scope.grid.gridOptions.autoheight = false;
if ($scope.grid.stateModel.gridObj) {
$($scope.grid.stateModel.gridObj.element).jqxGrid('height', '124px');
$($scope.grid.stateModel.gridObj.element).jqxGrid('refresh');
}
} else {
$scope.grid.gridOptions.autoheight = true;
if ($scope.grid.stateModel.gridObj) {
$($scope.grid.stateModel.gridObj.element).jqxGrid('height', 'auto');
$($scope.grid.stateModel.gridObj.element).jqxGrid('refresh');
}
}
});
Here what we are doing is, we are fixing the height of the grid if it contains more then 3 rows else it is of autoheight.
In your case if you can count number of rows in addRow( & deleteRow( function then you can also set height/max-height of the table. You might need to set overflow-y:auto while fixing the height.
Hope this helps.

Bootstrap table with multiple row

I want a "large" table to be beautiful in both mobile devices and desktop. Without x-scrolling.
One way, I think, is to create a table row which is high (two rows, with rowspan=2).
But is there a smoother and more good-looking way to make this? This example below is okay, but I still think it's possible to make the result more clean and nicer.
One problem is also that I can't use ant filter plugins and pagination, as the scripts think that one row is two rows.
Any ideas?
<div class="container">
<div class="table-responsive">
<table class="table">
<tbody>
<tr class="bg-danger">
<td rowspan=2>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle btn-md" type="button" data-toggle="dropdown" onclick="">+
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Edit</li>
<li class="bg-danger">Delete</li>
</ul>
</div>
</td>
<td>
<div>
<h4>Christian A</h4></div>
</td>
<td>
<h4 class="pull-right">133 €</h4></td>
</tr>
<tr class="bg-danger">
<td colspan=2>
2014-05-05 - Not paid
</td>
</tr>
<tr class="bg-success">
<td rowspan=2>
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle btn-md" type="button" data-toggle="dropdown" onclick="">+
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Edit</li>
<li class="bg-danger">Delete</li>
</ul>
</div>
</td>
<td>
<div>
<h4>Nicolaus S</h4></div>
</td>
<td>
<h4 class="pull-right">122 €</h4></td>
</tr>
<tr class="bg-success">
<td colspan=2>
2014-05-05 - Payed
</td>
</tr>
</tbody>
</table>
</div>
</div>
http://jsfiddle.net/weuf6vb3/

Angular Ui bootstrap dropdown split-button issue with table

I have an angular app , and have integrated angular-ui-bootstrap , my issue is that the dropdown links are are being blocked by table row , using z-index :
<div class="panel panel-default">
<div class="panel-body">
<div class=" pull-right">
<!-- Split button -->
<div class="btn-group invoice_new_item_btn_ul" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger"> Add Item </button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="invoice_new_item_btn_ul uib-dropdown-menu" role="menu" aria-labelledby="split-button">
<li role="menuitem">Action</li>
</ul>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped" >
<thead>
<tr>
<th></th>
<th>Item Name</th>
<th>Type</th>
</tr>
</thead>
<tbody id="search_result">
<tr class="odd gradeX" ng-repeat="u in vm.patient.patient_finance_item">
<td></td>
<td ng-bind="u.item_name"></td>
<td ng-bind="u.item_type"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The css/sass :
.invoice_new_item_btn_ul{
z-index:1000 !important;
}
uib-dropdown-menu only works as an attribute, not a class, which is why your drop down menu is not displaying.
https://github.com/angular-ui/bootstrap/blob/master/src/dropdown/dropdown.js#L285-L287

Do not "line break" the arrow when using btn-group

How to do not allow the arrow to go to another line? This will happens if the screen did not have enough space, see the image:
JSFIDDLE
CODE:
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th class="shrink">COLUMN 1</th>
<th class="shrink">COLUMN 2</th>
<th class="expand">COLUMN 3</th>
<th class="expand">COLUMN 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">Descrition of the item <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 1</li>
</ul>
</div>
</td>
<td>Some info here</td>
<td>Some more here</td>
<td>And here too</td>
</tr>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">Descrition of the i asd adasdasdasdasdtem <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 1</li>
</ul>
</div>
</td>
<td>Some info here</td>
<td>Some more here</td>
<td>And here too</td>
</tr>
<tr>
<td>
<div class="btn-group btn-block">
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left" data-hover="dropdown" data-toggle="dropdown">No item <span class="pull-right"><i class="fa fa-caret-down"></i></span></span>
<ul class="dropdown-menu">
<li><i class="fa fa-caret-right"></i>Option 0</li>
</ul>
</div>
</td>
<td>Some info here again</td>
<td>yay more info here too</td>
<td>ok, enough info now, that is enough</td>
</tr>
</tbody>
</table>
Tried some white-space: nowrap; but could not get the desired result. Any help will be great. The arrow must be in the right side, always.
Instead of floating the carets right, float the text left.
<span class="pull-left">Description... </span> <i class="fa fa-caret-down"></i>
Demo
span.pull-right floats the i.fa-caret-down to the right after your “Description of the item”, which means it’s placed on the next line. Try putting the float before the description. For example:
<span class="btn btn-danger btn-xs btn-block dropdown-toggle text-left"
data-hover="dropdown" data-toggle="dropdown">
<span class="pull-right"><i class="fa fa-caret-down"></i></span>
Description of the item
</span>
Sample, fixing the first caret.
Setting the white-space: nowrap property will not effect the dropdown icon as it's in a different flow due to the float: right; applied to it by the class .pull-right.
What you're describing sounds as though you want to set a position: absolute against the icon. This does fix the issue of the icon not being effected by the text, but it raises a further question of, how do you want to resolve too much text in a button which isn't sufficiently big?
As far as I can see, the only way to resolve this would be to also apply an overflow: hidden property to the buttons, to force the spacing to the right where the icon sits to be empty, and to apply an ellipsis on the text if any overflow does occur. You can see the combination of these selectors in this JSFiddle, I have forced the buttons to be smaller purely to demonstrate how this would work when they are forced to consume a space smaller that you would otherwise like:
.btn {
white-space: no-wrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
.fixed-right {
position: absolute;
right: 5px;
}

Resources