Have a question about the HTML view related to the table.
In my HTML view, I have a table.
This is worked in a responsive way when changing the view.
Here I want to change the view that the responsive view comes with a scroll bar.
I want to change it to fit all columns to the view and wrap the column contents.
Any suggestions to do it?
<div class="col-md-12 col-sm-12 grid-margin stretch-card">
<div class="card shadow-card-l">
<div class="card-body">
<center><h4 class="card-title">Task Related Documents</h4></center>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Document Type</th>
<th>Document Note</th>
<th>File Name</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TaskFilesHistoryViewModel.OrderByDescending(x => x.Id))
{
<tr class="even pointer">
<td>#item.File_Type</td>
<td>#item.Note</td>
<td>#item.File_Name</td>
<td>
<a href="#Url.Action("DownloadTaskImage","Ajax", new { id = item.Id})" target="_blank" rel="publisher tag" class="btn btn-outline-info ti-import" />
<a href="#Url.Action("RetrieveTaskImage","Ajax", new { id = item.Id})" target="_blank" rel="publisher tag" class="btn btn-outline-success fa ti-eye" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
I'm trying to use jquery in order to replicate the styling from another description tab that uses a table.
This is the current code of what I want to apply the script on:
<table class="shop_attributes">
<div class="iconic-cffv-field" data-field-id="iconic_cffv_2599_product_size">
<strong class="iconic-cffv-field__label iconic-cffv-field__label--above">product_size</strong>
<div class="iconic-cffv-field__content"><p>66 x 81 x 77</p></div>
</div>
<div class="iconic-cffv-field" data-field-id="iconic_cffv_2599_product_weight">
<strong class="iconic-cffv-field__label iconic-cffv-field__label--above">product_weight</strong>
<div class="iconic-cffv-field__content"><p>146</p></div>
</div>
</table>
</div> </div>
This is what I'm trying to replicate:
<div class="cPanel cPanel--additional_information cPanel--ord-3">
<div class="cPanel-inner">
<h2>More Details</h2>
<table class="woocommerce-product-attributes shop_attributes">
<tbody><tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--weight">
<th class="woocommerce-product-attributes-item__label">Weight</th>
<td class="woocommerce-product-attributes-item__value" data-o_content="N/A">164 lbs</td>
</tr>
</tbody></table>
</div> </div>
I've tried the following to start off with but can't seem to have any of the tags apply at all
(function($) {
// Wrap attributes into table format
$(".iconic-cffv-field__label.iconic-cffv-field__label--above").wrapAll("<th></th>");
$(".iconic-cffv-field__content").wrapAll("<td></td>");
}
i have an array like so :
TestingTable : [
{TestingType:[
{Id:1,Name:"Functional Testing"},
{Id:2,Name:"Regression Testing"},
{Id:3,Name:"Integration"},
{Id:4,Name:"BVT"}]
},
{EnvironmentTypes:[
{Id:1,Name:"Dev/QE (VCD)"},
{Id:2,Name:"Staging"},
{Id:3,Name:"PPE"},
{Id:4,Name:"01's"}]
}
]
I want to use the above array and create a div table like this :
So far ive tried it this way but its not coming the way i want it to ..
<h3>Testing</h3>
<div class="rTable" ng-if="show" ng-repeat="item in TestingTable">
<div class="rTableRow">
<div class="rTableHead"><strong></strong>
</div>
<div class="rTableHead" ng-repeat="test in item.EnvironmentTypes"><span style="font-weight: bold;">{{test.Name}}</span>
</div>
</div>
<div class="rTableRow" ng-repeat="environ in item.TestingType">
<div class="rTableHead"><span style="font-weight: bold;">{{environ.Name}}</span>
</div>
<div class="rTableCell" ng-repeat="test in item.EnvironmentTypes">
<input type="text" ng-model="result">
</div>
</div>
</div>
How should i use the ng repeat in order to get the two tier table in the picture?
angular.module('app', [])
.controller('ctrl', ['$scope', function($scope) {
$scope.TestingTable = [
{TestingType:[
{Id:1,Name:"Functional Testing"},
{Id:2,Name:"Regression Testing"},
{Id:3,Name:"Integration"},
{Id:4,Name:"BVT"}]
},
{EnvironmentTypes:[
{Id:1,Name:"Dev/QE (VCD)"},
{Id:2,Name:"Staging"},
{Id:3,Name:"PPE"},
{Id:4,Name:"01's"}]
}
];
}])
table, th, td {
border: 1px solid #2b91d6;
border-collapse: collapse;
}
thead tr{
background-color:#97cff5;
text-align:center;
}
td{
width:130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ctrl">
<table>
<thead>
<tr>
<td></td>
<td ng-repeat='item in TestingTable[1].EnvironmentTypes'>{{item.Name}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in TestingTable[0].TestingType'>
<td style='text-align:right'>{{item.Name}}</td>
<td ng-repeat='x in TestingTable[1].EnvironmentTypes'></td>
</tr>
</tbody>
</table>
</div>
See this solution
In your template file
<body ng-controller="MainCtrl">
<table>
<tr>
<th></th>
<th ng-repeat="item in data[1].EnvironmentTypes">{{item.Name}}</th>
</tr>
<tr ng-repeat="item in data[0].TestingType">
<td>{{item.Name}}</td>
<td ng-repeat="item1 in data[1].EnvironmentTypes"></td>
</tr>
</table>
</body>
In your controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [
{TestingType:[
{Id:1,Name:"Functional Testing"},
{Id:2,Name:"Regression Testing"},
{Id:3,Name:"Integration"},
{Id:4,Name:"BVT"}]
},
{EnvironmentTypes:[
{Id:1,Name:"Dev/QE (VCD)"},
{Id:2,Name:"Staging"},
{Id:3,Name:"PPE"},
{Id:4,Name:"01's"}]
}
];
});
I am currently learning asp.net mvc stuffs and multiple trial and error on designing my product page, I am lost on how to arrange my product in row. As currently it stacks vertical 1 after another like
e.g
Product 1
Product 2
Product 3
Product 4
Where instead i wanted to make it like
e.g
Product 1 Product 2 Product 3 Product 4
This is the area which I think I should be changing but I've tried multiple things such as inline-block, float:left but there's no change
Here is my code for the product section, any help on how it can arrange by like 4 by 3 as there are 12 products only as I am currently learning.
Thank you in advance!
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title" style="font-size:24px"><strong>Products</strong></h2>
</div>
<div class="panel-body">
<div class="col-md-4">
<table cellpadding="10" data-bind="foreach: contactLens">
<tr>
<td >
<div class="entire-package">
<img width="255" height="190" data-bind="attr: { src: 'data:image/jpeg;base64,'+ Image }" />
<div class="detail-design">
<strong><span data-bind="text: Name"></span></strong> <br />
Type: <span data-bind="text: Type"></span><br />
Brand: <span data-bind="text: Brand"></span> <br />
Price: <span data-bind="text: Price"></span> <br />
Amount: <span data-bind="text: Amount"></span> <br />
Details
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div>
</div>
Here is an example how it could look like.
<html>
<body>
<table style="width:50%">
<tr>
<th>Product</th>
<th>Brand</th>
<th>Price</th>
<th>Amount</th>
</tr>
<tr>
<td>Name</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
</tr>
</table>
</body>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse; }
th, td {
padding: 5px;
text-align: left; }
</style>
When a field value is too long in my bootstrap table, the table will extend to the length of the parameter even if its past the container. The only way I was able to somewhat prevent this is by using responsive-table, however then a scroll bar shows up on the bottom and you have to scroll all the way to the right to see the table data. How can I make it so when my table reaches the length of the container, the row data will wrap?
Here is an image of what is going on: http://i.stack.imgur.com/Bo1dO.jpg
Here is a portion of my view, the CSS and example can be seen here: https://jsfiddle.net/bsxtpoqd/
<div class="container">
<div class="row tab-content">
<div class="row">
<h3>Assigned Games</h3>
<p>Please enter a search string in the textbox to search for users</p>
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="tableSearch" placeholder="Enter search term...">
</div>
</form>
<div class="table">
<table id="userTable" class="table">
<thead>
<tr>
<th>UserName</th>
<th>Alternate</th>
<th>Email</th>
<th>Assigned Games</th>
<th>Unassigned Games</th>
</tr>
</thead>
<tbody>
#foreach (var user in Model)
{
<tr>
<td>#Html.ActionLink(user.UserName, "_GameAssigner", "Admin", new { insUserId = user.InstitutionUserId }, new { #class = "modal-link" })</td>
<td>
#user.AlternateId
</td>
<td>#user.Email</td>
<td>
#if (user.Assigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="#foreach (var gameName in user.Assigned){<div>#gameName</div>}">
#user.Assigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
<td>
#if (user.Unassigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="#foreach (var gameName in user.Unassigned) {<div>#gameName</div>}">
#user.Unassigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
You need to break up the long word.
<td style="word-break:break-all">
This is you need:
<style>
td
{
word-break: normal;
}
</style>