Reputation: 199
I have li
items how to display horizontally or format neatly
below is my html
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="script.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
strong {
cursor: pointer;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>RSC Acquirer Agent Messages</h1>
</div>
</div>
<!-- /.row -->
</div>
<div ng-controller="ExampleController">
<ul class="list-unstyled" class="list-group">
<li ng-repeat="t in data.transactions">
<ul class="list-unstyled" style="border: none">
<li ng-repeat="(key, value) in t" ng-if="key!='__opened'"
class="list-group" style="border: none"><span
class="glyphicon glyphicon-plus-sign"></span> <strong
ng-click="t.__opened=!t.__opened">{{key}} </strong>
<ul ng-if="t.__opened" class="list-unstyled">
<li><strong
ng-click="value.request.__opened=!value.request.__opened"
class="list-group-item list-group-item-info"
style="border: none"> <span
class="glyphicon glyphicon-plus-sign"></span>Request
</strong>
<ul ng-if="value.request.__opened" class="list-unstyled">
**<li ng-repeat="re in value.request""list-group-item">
{{re.Field}} {{re.length}} {{re.value}}</li>**
</ul></li>
<li><strong
ng-click="value.response.__opened=!value.response.__opened"
class="list-group-item list-group-item-info"
style="border: none"><span
class="glyphicon glyphicon-plus-sign"></span>Response</strong>
<ul ng-if="value.response.__opened" class="list-unstyled"
class="list-group-item">
<li ng-repeat="re in value.response""list-group-item" >
{{re.Field}} {{re.length}} {{re.value}}</li>
</ul></li>
</ul></li>
</ul>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
the li
and the result are as below
**<li ng-repeat="re in value.request""list-group-item">
{{re.Field}} {{re.length}} {{re.value}}</li>**
</ul></li>
DE-000 004 0110
DE-001 008 00110010 00111010 00000000 00000000 00001110 11000001 10000000 00000010
DE-003 006 003000
DE-004 012 000000004100
DE-007 010 0807063032
DE-011 006 010424
DE-012 006 163032
DE-013 004 0807
DE-015 004 0719
DE-037 012 321916010424
I want to format so the display is properly aligned like below so each field can be separated and nicely display.
DE-000 004 0110
DE-001 008 00110010 00111010 00000000 00000000 00001110 11000001
10000000 00000010
DE-003 006 003000
How can I achieve this I tried to use table to format but for each loop the columns are not aligned properly. Instead of displaying in table prefer without table.
Upvotes: 1
Views: 582
Reputation: 520
Since you don't know in advance the maximum width of an element, a table is actually the correct way to do this. Tables are designed to display tabular data, and that is in fact what you have. I don't know why you had problems, but using the modern display characteristics gives you full control over your table display.
Let's say that rather than using conventional table markup, you use the following. (I don't use Angular, so my syntax may not be correct)
<div id=fields>
**<p ng-repeat="re in value.request""list-group-item">
<span>{{re.Field}}</span>
<span>{{re.length}}</span>
<span>{{re.value}}</span></p>**
</div>
Now try the following CSS:
#fields {
display: table;
width:100%;
}
#fields p {
display: table-row;
}
#fields p span {
display: table-cell;
margin-right: 20px;
}
You can modify as needed to change the space distribution of the columns.
Upvotes: 0
Reputation: 4755
You can simply do it like this:
.list-unstyled{
list-style: none;
}
.list-unstyled li span{
display: inline-block;
margin-right: 40px;
}
.list-unstyled li span:last-child{
margin-right: 0;
}
<ul class="list-unstyled">
<li>
<span>DE-000</span>
<span>004</span>
<span>0110</span>
</li>
<li>
<span>DE-000</span>
<span>004</span>
<span>0110</span>
</li>
<li>
<span>DE-000</span>
<span>004</span>
<span>0110</span>
</li>
<li>
<span>DE-000</span>
<span>004</span>
<span>0110</span>
</li>
</ul>
Upvotes: 2