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
Related
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 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>
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 found a solution on how to fixed a table with scroll bar by creating another class .tablecontainer, but in this case I need to add a drop-down list on one column so my table adjusted its height according to the drop-down cell column, I need to adjust all rows, according to drop-down cell's height.
A screenshot of the state is:
This is my code:
<head>
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
vertical-align: central;
}
.tablecontainer {
width: 1000px;
overflow: hidden;
}
tr {
display: block;
}
th, td {
width: 500 px;
}
tbody {
display: block;
height: 400px;
overflow: auto;
}
.table tbody > tr > td.vert-align {
vertical-align: middle;
}
</style>
</head>
<body>
and HTML:
<div class="container" style="padding: 70px">
<h3 style="font-family:'Century Gothic'"></h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style= "column-width:100px; text-align:center">Employee No.</th>
<th style= "column-width:200px; text-align:center">Employee Name</th>
<th style= "column-width:100px; text-align:center"">Status</th>
<th style= "column-width:100px; text-align:center"">Training Title</th>
<th style= "column-width:100px; text-align:center"">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td style= "column-width:100px; celltext-align:center">12345</td>
<td style= "column-width:200px; text-align:center">Lardino, Bryan S.</td>
<td style= "column-width:100px; text-align:center">For Approval</td>
<td style= "column-width:100px; text-align:center">Wave Training</td>
<td style= "column-width:100px; text-align:center"><div class="btn-group">
<button type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Approved</li>
<li>Disapproved</li>
</ul>
</div></td>
</tr>
<tr>
<td style= "column-width:100px; text-align:center">12345</td>
<td style= "column-width:200px; text-align:center">Lardino, Bryan S.</td>
<td style= "column-width:100px; text-align:center">For Approval</td>
<td style= "column-width:100px; text-align:center">Wave Training</td>
<td style= "column-width:100px; text-align:center"><div class="btn-group">
<button type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Approved</li>
<li>Disapproved</li>
</ul>
</div></td>
</tr>
</tbody>
</table>
<div class="row" style="height: 50px">
<a class="btn btn-primary btn-default pull-right" href="#")>Submit</a>
</div>
</div>
</body>