I have the following code:
if ( $value['customized'] == true) {
echo("<td><span class='glyphicon glyphicon-ok' aria-hidden='true'></span> </td>");
} else{
echo("<td> </td>");
} //end if
which renders this html:
<table class="table table-striped">
<thead>
<tr>
<th>PStatus</th>
<th>Customized</th>
<th>DS</th>
<th>T Name</th>
<th>Audit Date</th>
<th>ObjectID</th>
</tr>
</thead>
<tbody>
<tr>
<td><button type="button" class="btn btn-success"></button></td>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
<td>ll-ci1</td>
<td>ll-ci1</td>
<td>July 29 2016 13:54:12</td>
<td>579b994a3747106e60a089e1</td>
</tr>
<tr>
<td><button type="button" class="btn btn-danger"></button></td>
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
<td>lw1</td>
<td>lw1</td>
<td>July 29 2016 14:09:51</td>
<td>579b9ab63747106e60a089e2</td>
</tr>
</tbody>
</table>
In IE, the glyphicon-ok icon doesn't show up.
Instead I get an error message that says I have an unmatched end tag.
The line it's complaining about is this one:
<td><button type="button" class="btn btn-success"></button></td>
And it's got the "" item highlighted.
i can't see where i've gone wrong...
I think I need another set of eyes, if anyone wants to take a look.
Thanks.
EDIT 1
For now, I've changed this:
<td><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></td>
to this:
<td><span class='badge'>Yes</span></td>
Related
This is my HTML code for my table to display list of users:
<table class="table m-table m-table--head-bg-metal">
<thead>
<tr>
<th>
Nom
</th>
<th>
Prénom
</th>
<th>
Email
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Jhon
</td>
<td>
Stone
</td>
<td>
jhonStone#gmail.com
</td>
<td>
<button class="btn btn-outline-danger m-btn m-btn--icon btn-sm m-btn--icon-only m-btn--pill m-btn--air" (click)="onDisableUser()">
<i class="fa fa-close"></i>
</button>
</td>
</tr>
</tbody>
This is typescript method:
onDisableUser(){
//this is the method to disable the table row..
}
What I want is when I click () on the action button, the table row will be disabled.
Thanks in advance.
What do you mean with disable?
If you want to remove the list item do this on the html :
<table class="table m-table m-table--head-bg-metal">
<thead>
<tr>
<th>
Nom
</th>
<th>
Prénom
</th>
<th>
Email
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr *ngIf="!isDisable">
<td>
Jhon
</td>
<td>
Stone
</td>
<td>
jhonStone#gmail.com
</td>
<td>
<button class="btn btn-outline-danger m-btn m-btn--icon btn-sm m-btn--icon-only m-btn--pill m-btn--air" (click)="onDisableUser()">
<i class="fa fa-close"></i>
</button>
</td>
</tr>
</tbody>
</table>
And on the typescript:
isDisable = false;
onDisableUser(){
this.isDisable = true;
}
If you want to disable it with css use this in html:
<tr [ngClass]="{'disabled': isDisable}>
You can use the css method to disable the table row.
Set the disabled to true when clicked and set the class to the <tr> if disabled=true
.disable{
cursor: not-allowed;
}
<table>
<tr class="disable">
<td> akjsd </td>
</tr>
<tr >
<td> akjsd </td>
</tr>
</table>
isDisable = false;
onDisableUser(){
this.isDisable = true;
}
I'm attempting to return two tr elements from a single component v-design-row. I know vue requires the template elements to be wrapped in a div, but I cannot wrap them in a div because of the tag structure html tables require. When I add the second tr in the v-design-row component then vue doesn't render anything.
Can anyone suggest the best method for accomplishing this?
main.vue
<table class="table">
<thead>
<th>Image</th>
<th>Name</th>
<th>Description</th>
<th>Status</th>
<th>Order</th>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody v-for="catagory in catagories">
<v-catagory-row :catagory="catagory"></v-catagory-row>
<v-design-row v-for="design in catagory.designs" :design="design"></v-design-row>
</tbody>
</table>
v-design-row.vue
<template>
<tr>
<td><img :src="design.image_directory" :alt="design.name"></td>
<td>{{ design.name }}</td>
<td>
<button class="btn btn-secondary" type="button" data-toggle="collapse" :data-target="'#' + design.identifier" aria-expanded="false" :aria-controls="design.identifier">
<i class="fa fa-plus" aria-hidden="true"></i> Show
</button>
</td>
<td>
<div class="switch">
<input :id="'active'+design.id" v-model="design.active" class="btn-toggle btn-toggle-round-flat" type="checkbox">
<label :for="'active'+design.id"></label>
</div>
</td>
<td>
<button class="btn btn-secondary" type="button">
<i class="fa fa-caret-up" aria-hidden="true"></i>
</button>
<button class="btn btn-secondary" type="button">
<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
{{ design.sort_order }}
</td>
<td>
<button class="btn btn-secondary" type="button">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
</td>
<td>
<button class="btn btn-secondary" type="button">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</td>
</tr>
<tr>
<td class="p-0" colspan="7">
<div class="collapse" :id="design.identifier">
<div class="p-3">
{{ design.description }}
</div>
</div>
</td>
</tr>
</template>
You are allowed to group row using multiple <tbody> sections like this:
<table>
<thead>
<tr> ... </tr>
</thead>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
</table>
You can use this in templates by using a <tbody> as the root element:
<template>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
</template>
Since second tr in your v-design-row contains description of design, I'd suggest that this is whole element and it should occupy one row and have its own layout.
Alternatively, you can have a description separately and all other data in component.
Also, statement
vue requires the template elements to be wrapped in a div
is not quite correct. Template can have any root element while it is a single element. So you can have
<template>
<tr>
</tr>
</template>
or even
<template>
<tr v-if="condition == 1">
</tr>
<tr v-else-if="condition == 2">
</tr>
<tr v-else>
</tr>
</template>
You can use vue-fragment library. It allows you to have wrapper that wont actually be rendered.
https://www.npmjs.com/package/vue-fragment
I'm currently making a template with Bootstrap 4. I have a table with four rows, here is the link to the said site: here.
Now with the CSS I have here for just the links:
a {
color: #F0FFFF;
}
a:visited {
color: #00FFFF;
}
a:hover {
text-decoration: none;
}
But at the fourth row, the fourth link does not follow the said CSS rules. My question is did I make a mistake on the CSS? Or does BootStrap 4 have a limit on Tables? With the BootStrap documentation, it shows examples of three rows only. Take a look here.
Here is the table HTML:
<table class="table table-striped table-inverse">
<thead>
<tr>
<th>Date</th>
<th>Area</th>
<th>Venue</th>
<th>Tickets</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">June 16, 2017</th>
<td>Auburn Hills, MI</td>
<td>Palace Of Auburn Hills</td>
<td><a href="#">
<button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
Tickets!!
</button></a>
</td>
</tr>
<tr>
<th scope="row">June 19, 2017</th>
<td>Los Angeles, CA</td>
<td>Los Angeles Memorial Coliseum </td>
<td><button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
Tickets!!
</button></a>
</td>
</tr>
<tr>
<th scope="row">June 23, 2017</th>
<td>Toyko, Japan</td>
<td>Nippon Budokan</td>
<td><button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
Tickets!!
</button></a>
</td>
</tr>
<tr>
<th scope="row">June 26, 2017</th>
<td>Hong Kong</td>
<td>Hong Kong Festival</td>
<td><button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
Hey!
</button></a>
</td>
</tr>
</tbody>
</table>
I am trying to make table in which there are two show/hide buttons for two columns say A and B.. button a and b separately are functioning properly but If i use both in table ... only one of them functions properly other doesn't do anything.. pls hlp me i am new to this
<table datatable="ng" class="row-border hover table table-condensed no-margin">
<thead>
<tr>
<th>#</th>
<th>Username</th>>
<th>Profile</th>
<th>Points</th>
<th>Forcasts Won/Lost</th>
<th>Invites</th>
<th>Referrals</th>
<th>Activity</th>
<th>Most Used Redeemption Gateway</th>
<th>Most Read FAQ</th>
<th>Promo Codes used</th>
<th>Suspend/Unsuspend</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="person in showCase.persons">
<td>{{person.id}}</td>
<td>{{person.uname}}</td>
<td>
<button type="button" class="btn btn-primary" ng-if="person.Profexpanded" ng-click="person.Profexpanded = false;person.Invexpanded=false">Hide</button>
<button type="button" class="btn btn-primary" ng-if="!person.Profexpanded" ng-click="person.Profexpanded = true;person.Invexpanded=false">Show</button>
</td>
<td>{{person.points}}</td>
<td>{{person.forcasts}}</td>
<td style="padding:5px">
<table><tbody>
<tr><td><b>sent: </b></td> <td>{{person.invites[0].sent}}</td></tr>
<tr><td><b>accepted:</b></td> <td>{{person.invites[0].accepted}}</td></tr>
</tbody></table>
</td>
<td>{{person.referrals}}</td>
<td>
<button type="button" class="btn btn-primary" ng-if="person.Invexpanded" ng-click="person.Invexpanded = false;person.Profexpanded = false">Hide</button>
<button type="button" class="btn btn-primary" ng-if="!person.Invexpanded" ng-click="person.Invexpanded = true;person.Profexpanded = false">Show</button>
</td>
<td>{{person.muredempt}}</td>
<td>{{person.mfaq}}</td>
<td>{{person.promocodes}}</td>
<td>{{person.isSuspended}}</td>
</tr>
<tr ng-if="person.Profexpanded" ng-repeat-end="">
<td class = "profile" colspan="5">
Hello A
</td>
</tr>
<tr ng-if="person.Invexpanded" ng-repeat-end="">
<td>Hello B</td>
</tr>
</tbody>
</table>
<!--end .card-body -->
</div>`
Maybe try ng-show instead ng-if <tr ng-show="person.Invexpanded" ng-repeat-end="">
Use
<tr ng-if="person.Profexpanded">
instead of
<tr ng-if="person.Profexpanded" ng-repeat-end="">
I have this HTML rows:
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>Type Object</th>
<th style="width: 100px;text-align: left">
<a class="btn btn-primary btn-sm">
<i class="glyphicon glyphicon-plus"></i>
</a>
</th>
</tr>
</thead>
<tbody ng-repeat="object in objects track by object.Id">
<tr>
<td ng-bind="object.Name"></td>
<td>
<a class="btn btn-default btn-xs" ng-click="object.showPhoto = !object.showPhoto; $event.stopPropagation();"><i class="glyphicon glyphicon-camera"></i></a>
<a class="btn btn-default btn-xs" ui-sref="objects.view({regionId:region.Id, objectId:object.Id})" ng-click="$event.stopPropagation();"><i class="glyphicon glyphicon-info-sign"></i></a>
<a class="btn btn-default btn-xs" ng-click="zoomObject(object); $event.stopPropagation();"><i class="glyphicon glyphicon-screenshot"></i></a>
<a class="btn btn-default btn-xs" ng-click="object.showReview = object.showReview;"><i class="glyphicon glyphicon-list-alt"></i></a>
</td>
</tr>
<tr ng-if="object.showPhoto">
<td colspan="2"><img ng-src="{{getPhotoUrl(object)}}" style="max-width: 100%;" alt="Image Object" /></td>
</tr>
<tr ng-if="object.showReview">
<td colspan="2">nnn!!!</td>
<list-of-insp></list-of-insp>
</tr>
</tbody>
</table>
Here how it's looks in view:
My question is how can I make all elements to be in one row?
<th style="width: 100px;text-align: left">
Change it to something like 200px.
Second thing - your table is not responsive, in Bootstrap you have to create another div above the table with class table-responsive.
Float each element left and wrap them in an element/div with a minimum width of at least the size of all 4 elements