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

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;
}

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 make css columns into primeng?

I'm working with primeng. I have this code to display my data.
My Html:
<p-table #table [columns]="cols" [value]="list" [paginator]="true" responsive="false">
<!---------------- Header of datatable event ------------------>
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" [ngStyle]="{'width' : col.width}">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{ col.header | translate}}
</th>
</tr>
</ng-template>
<!---------------- Body of datatable event ------------------>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
<tr [pSelectableRow]="rowData">
<td *ngFor="let col of columns" [ngStyle]="{'width': col.width }">
<div *ngIf="col.field !== 'idOption'">
{{rowData[col.field]}}
</div>
<div *ngIf="col.field === 'idOption'">
{{rowData[col.field]}}
<span *ngIf="rowData.activeOpt">
<em class="fa fa-lg fa-check-circle" style="color: green; padding-left: 50%"></em>
</span>
<span *ngIf="!rowData.activeOpt">
<em class="fa fa-lg fa-check-circle" style="color: red; padding-left: 40%"></em>
</span>
</div>
</td>
</tr>
</ng-template>
</p-table>
I get this result:
I want that the green fa-check-circle will be in the same line, really i spent many time without any solution. Thanks for any help.
The reason why icons are not aligned is because icon is placed just after the text & the length of text will vary based on the Garantie values.
So in order to keep our icons aligned irrespective of the text length, we can fix the alignment to always right [float:right] (not after the text ends).
Please change your active & inactive icon code line with below.
Active icon (green):
<em class="fa fa-lg fa-check-circle" style="color: green; float:right"></em>
Inactive icon (red):
<em class="fa fa-lg fa-check-circle" style="color: red; float:right"></em>

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

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.

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/

Page level masking with bootstrap and css style on button

I am not good at css, but here is what I want and what i have tried.
<div>
<div id="propertiesTable" style="padding: 20px 20px 20px 20px;" ng-cloak >
<table class="table table-striped table-bordered">
<tbody>
<tr data-ng-repeat="(k,v) in properties">
<td>{{ k }}</td>
<td>{{ v }}</td>
</tr>
</tbody>
</table>
</div>
<div style="padding-left: 20px;">
<button type="submit" class="btn btn-primary btn-sm"
title="Refresh for updated properties"
ng-click="onRefreshButtonClick()">
<span class="glyphicon glyphicon-refresh">Refresh</span>
</button>
</span>
</div>
</div>
So, I have this cluttered button glyphicon glyphicon-refresh inside a class="btn btn-primary btn-sm"
I need some space between these two. When I tried padding style it did not work. padding is getting applied to the entire button obviously!
How can I achieve padding between glyphicon glyphicon-refresh and class="btn btn-primary btn-sm" ?
When I click on Refresh, I want the id:propertiesTable to be masked(meaning light dimness for this part). Is this achievable?
Sorry about this question. Not good at CSS.
Thank you Stackoverflow!
You can just add a non-breaking space: http://jsfiddle.net/mm6ck3dc/9/
<span class="glyphicon glyphicon-refresh"> Refresh</span>

Resources