I am writing an app that uses Boostrap 3.3. It also uses open source material design framework. My app has a table that lists users. Each row in the table has a picture, a person name, an email address, and an action menu. Here is my current code:
<table class="table table-striped table-hover ">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Email address</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><div><i class="material-icons">person</i></div></td>
<td>John Doe</td>
<td>john.doe#example.com</td>
<td>
<div class="dropdown">
<i class="material-icons">more_vert</i><div class="ripple-container"></div>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
The action menu opens left-aligned against the menu icon. However, I'm trying to make it right-aligned so that the content opens to the left. The behavior of the right "Dropdown" link in the Navbar section of the example is what I'm trying to reproduce. Yet, I'm not having any luck. I added a float:right on the ul without any luck. What am I missing?
In Bootstrap there is a class called dropdown-menu-right. If you add this to your dropdown menu, the menu will appears on the right side instead off on the left (by default).
Simply replace this:
<li class="dropdown-menu">
With:
<li class="dropdown-menu dropdown-menu-right">
See reference: http://getbootstrap.com/components/#dropdowns
Note: the .pull-right is now deprecated to dropdown menus in bootstrap V3.1.0.
Related
<td>
<strong>Modality</strong>
<ul class="field-items list-plain">
<li class="field-item">Loan</li>
</ul>
</td>
<td>
<strong>Sector</strong>
<ul class="field-items list-plain">
<li class="field-item">Agriculture, natural resources and rural development</li>
</ul>
</td>
I want to use a CSS selector to select the only li that is a direct child of a TD tag and its parent td tag has Sector text in it. Basically, I want my second li should be selected.
Because there are two <ul> elements with the class field-items and the <li> elements are nested inside the <ul> you will need to select the correct parent <ul> element and then select the <li> from there. You can use the nth-of-type(n) selector in order to achieve that in this case, if you know that you want to select the 2nd <li>.
.field-items:nth-of-type(2) .field-item {
color: red;
}
<td>
<strong>Modality</strong>
<ul class="field-items list-plain">
<li class="field-item">Loan</li>
</ul>
</td>
<td>
<strong>Sector</strong>
<ul class="field-items list-plain">
<li class="field-item">Agriculture, natural resources and rural development</li>
</ul>
</td>
However, you cannot retrieve a specific element basing on it's text content using plain CSS, you will need to have some Javascript code that does that for you. Like this:
document.querySelectorAll("strong").forEach((el) => {
if (el.textContent === "Sector") {
el.closest("td").querySelector(".field-item").style.color = 'red';
}
});
<table>
<td>
<strong>Modality</strong>
<ul class="field-items list-plain">
<li class="field-item">Loan</li>
</ul>
</td>
<td>
<strong>Sector</strong>
<ul class="field-items list-plain">
<li class="field-item">Agriculture, natural resources and rural development</li>
</ul>
</td>
</table>
I'm trying to add a Materialize dropdown inside a table generate with *ngFor and the dropdown didn't show.
If I put the dropdown code outside the table it works.
<p>Users enabled in this node: {{usersEnabled}}</p>
<p>Users in this node: {{users.length}}</p>
<table>
<thead>
<th>
Email
</th>
<th>
Enabled
</th>
<th>
Actions
</th>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>
{{user.username}}
</td>
<td class="isLink cursorIcon" (click)="enableDisableUser(user.apiKey)">
{{user.enabled}}
</td>
<td>
<!-- Dropdown Structure -->
<!-- <button class="btn" (click)="resetPassword(user)">Reset password</button> -->
<a class='dropdown-trigger btn' data-target='dropdown{{user.apiKey}}'>Drop Me!</a>
<ul id='dropdown{{user.apiKey}}' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
</td>
</tr>
</tbody>
</table>
Typescript important methods
ngOnInit() {
this.getUsers();
}
private getUsers(): void {
this.userService.getUsersByNodeApiKey(this.nodeKey).subscribe(
res => {
this.usersEnabled = res.filter((user: User) => user.enabled).length;
this.users = res.sort((a, b) => a.enabled < b.enabled ? 1 : -1);
M.AutoInit();
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems, {autoTrigger: true});
},
err => console.error(err)
);
}
I'm using Angular 8 and Materialize CSS 1.0
For that you need to add [innerHTML] which enables generated html inside your table like this
[innerHTML]="user.dropdown"
Where as user.dropdown may be an empty string defined in your .ts file or some value which you want to use in drop-down.
May be in your case user.apiKey can also be used.
Try rendering the table / row in the view once users scope has it's data by add a
<ng-container *ngIf="users.length">
<tr *ngFor="let user of users">
.
.
.
</tr>
</ng-container>
Hope this helps!
Hey #Marc Serret i Garcia... I have found a work around. Try if my provided solution works:-
<tbody>
<tr *ngFor="let user of users">
<td>
{{user.username}}
</td>
<td class="isLink cursorIcon" (click)="enableDisableUser(user.apiKey)">
{{user.enabled}}
</td>
<td>
<!-- Dropdown Structure -->
<!-- <button class="btn" (click)="resetPassword(user)">Reset password</button> -->
<a class='dropdown-trigger btn' [attr.data-target]='user.apiKey'>Drop Me!</a>
<ul [id]='user.apiKey' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
</td>
</tr>
</tbody>
Look for the changes that I have made -
<a class='dropdown-trigger btn' [attr.data-target]='user.apiKey'>Drop Me!</a>
And the other for the id of dropdown - <ul [id]='user.apiKey' class='dropdown-content'>. It worked for me. Hope this helps.
Please look at my stackblitz:- https://stackblitz.com/edit/multipledropdown
I'm trying to add the Gentelella template to my ASP.NET Core project.
The main problem is that the content of my current pages (any index page) is not merged with the template:
Expected Value:
Current Value:
The problem:
I'm trying to figure out how to show these components (index view inside and layout) together, as shown in picture 1.
For this, I found the code inside the _Layout that encapsulates the Plain Page section:
Should I make the call of my index view in that section? How?
PartialView rings a bell.
Calling the Controllers and actions:
<li>
<a><i class="fa fa-edit"></i> Tiendas <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a asp-area="" asp-controller="Stores" asp-action="Index">Nueva Tienda</a></li>
<li>Editar Tiendas</li>
</ul>
</li>
Section inside the Template where the Index should show:
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Plain Page</h2>
<ul class="nav navbar-right panel_toolbox">
<li>
<a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>
Settings 1
</li>
<li>
Settings 2
</li>
</ul>
</li>
<li>
<a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
Add content to the page ...
</div>
</div>
</div>
</div>
Example of Index View:
#model IEnumerable<Application.Models.Tienda>
#using Application.Models
#{
ViewData["Title"] = "Index";
}
#Html.Partial("_NavBar")
<h2>Tiendas</h2>
#*data-toggle tells bootstrap what to do*#
#*data-target tells bootstrap which element is going to open*#
<div class="btn-group" id="modalbutton">
<a id="createEditStoreModal" data-toggle="modal" asp-action="Create" data-target="#modal-action-store"
class="btn btn-primary">
<i class="glyphicon glyphicon-plus"></i> Nueva Tienda
</a>
</div>
<p></p>
<table id="stores" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>
Provincia
</th>
<th>
Marca Comercial
</th>
<th>
Cadena
</th>
<th>
Tienda
</th>
<th>Editar</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Districts.Provincias.provincia_nombre)
</td>
<td>
#Html.DisplayFor(modelItem => item.tienda_marca)
</td>
<td>
#Html.DisplayFor(modelItem => item.tienda_cadena)
</td>
<td>
#Html.DisplayFor(modelItem => item.tienda_nombre)
</td>
<td>
<div class="btn-group" id="modalbuttonedit">
<a id="editStoreModal" data-toggle="modal" asp-action="Create"
data-target="#modal-action-store" asp-route-id="#item.tienda_id" class="btn btn-info">Edit</a>
</div>
</td>
</tr>}
</tbody>
</table>
Solved it.
The proper way to position your Index view inside the _Layout is using the #RenderBody() wherever you want to load your view information.
In this case, it was where I indicated it in the question.
There is also the option to render your scripts, if any. #RenderSection("Scripts", required: false)
We have to be careful with that since the script might run locally but not once the project is in production because of bad placement.
The final picture is this:
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.
Ok so I have a few tables on a page and one of them is giving me trouble. It is the second table on the page The left column is how I want it, the other appears to be centering the data within the table row. I don't understand why, I don't think its CSS from the WordPress template because if I launch it as a raw HTML file in my browser it is doing the same thing. Here is the link to the resulting page with the tables (second table down): http://titanpropertymanagement.co/residents/utility-info/
I know this issue is probably super simple but I am still learning to code so I'm sure it's just missing a simple style tag. Thanks for any help you can provide :)
Here is the code for the second table giving me issues
<h2 style="text-align: center;">Water & Trash Service</h2>
<table width="100%">
<tbody>
<tr>
<td width="50%">
<h4>Water/Trash for Lafayette</h4>
<h5><span style="text-decoration: underline">Lafayette Utility Dept.</span> - (765) 807-1100</h5>
<ul>
<li><span style="text-decoration: underline">Download Application Here
</span>
</li>
</ul>
<h5>Lafayette Sanitation - (765) 807-1411</h5>
<ul>
<li><span style="text-decoration: underline">Request Trash/Recycle Bin</span>
</li>
</ul>
<h5>Waste Management - (800) 443-5646</h5>
<ul>
<li><span style="text-decoration: underline">Request Service Online</span>
</li>
</ul>
</td>
<td width="50%">
<h4>Water/Trash For West Lafayette</h4>
<h5><span style="text-decoration: underline">American Water</span> - (800) 492-8373</h5>
<ul>
<li>Request New Service Online
</li>
</ul>
<h5>W. Lafayette Sanitation - (765) 775-5242</h5>
<ul>
<li>Request Service Online
</li>
</ul>
</td>
</tr>
</tbody>
</table>
Add
tbody {
vertical-align: top;
}
to your stylesheet. This will override the browser's default styling of tbody, which is to vertically align the tbody to the middle (at least in Chrome).