table doesn't fit on the screen. tried with most of the combination but doesn't work.
amateur, help needed.
i don't know whats going wrong maybe some silly mistake and wasn't able to find any mistake
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Generate</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header" >
<a class="navbar-brand" href="index.html"> <img alt="Brand" src="slideshow/img.png" style="height: 40px; display: inline-block; margin-top: -5px"> </a>
</div>
<ul class="nav navbar-nav" >
<li class="active">Home</li>
<li>Generate POR</li>
<li>Update POR</li>
<li>Help</li>
<li>Contact us</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group" id="demo">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<form class="navbar-form navbar-right">
<div class="form-group" id="txt1" style="color: aliceblue; margin-top: -5px" >
</div>
</form>
</div>
</nav>
<div class="col-md-8 col-md-offset-2">
<div class="row">
<form>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 form-group">
<label>P O Date</label>
<input type="date" class="form-control">
</div>
<div class="col-sm-6 form-group">
<label>Category</label>
<select class="form-control" >
<option>Technology</option>
<option>Business</option>
<option>Development</option>
<option>Process</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 form-group">
<label>Location</label>
<select class="form-control" >
<option>Bengaluru</option>
<option>Mumbai</option>
<option>Pune</option>
</select>
</div>
<div class="col-sm-3 form-group">
<label>Type of training</label>
<select class="form-control" >
<option>RBI</option>
<option>PST</option>
<option>Org needs</option>
</select>
</div>
<div class="col-sm-3 form-group">
<label>Venue Details</label>
<select class="form-control" >
<option>Mumbai</option>
<option>Bengluru</option>
<option>Pune</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6 form-group">
<div class="form-group">
<label>Vendor Address</label>
<textarea placeholder="Vendor Address Here.." rows="3" class="form-control"></textarea>
</div>
</div>
<div class="col-sm-6 form-group">
<div class="form-group">
<label>Billing Address</label>
<br>
Billing Address :<br>
Quinnox Consultancy Services Ltd.;<br>
Unit 170,SDF VI, SEEPZ SEZ,<br>
Andheri(East), Mumbai-400096<br>
</div>
</div>
</div>
</div>
Display of tables isnt good below part is the problemtable doest fit on the screen
<div class="col-sm-12">
<div class="row">
<table class="table table-condensed table-striped table-hover" align="center">
<thead class="thead-inverse">
<tr>
<div class="form-group">
<th>Subject</th>
<th>Faculty</th>
<th colspan="2" align="center">Date</th>
<th>Days</th>
<th>Batch Size</th>
<th>Rate per day</th>
<th>Approx Expected value(INR)</th>
</div>
</tr>
</thead>
<tbody>
<tr>
<div class="form-group">
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="date"/></td>
<td><input type="date"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
you need to wrap the table in div with a class table-responsive and dont wrap it directly to row class
here is demo
If you want to fit the table on the screen keep the table code out of the div which has class "col-md-8 col-md-offset-2"
and if the table is overflowing the screen you can use class table-responsive as parent of table.
What size screen doesn't it fit on? Bootstrap 3 has a .table-responsive class that can be added to the table allows horizontal scrolling on devices smaller than 768px wide. The docs for that are here.
Related
Using Bootstrap3, I have a "toolbar" above a table. The toolbar has a series of input fields and buttons. I need the left/right ends of the toolbar to align with the ends of the table.
I tried to use Bootstrap's column classes to position the various toolbar elements. The positioning seems to be correct when viewed in full screen mode on a typical large (or greater) display.
I am able to align the fields and buttons to the end of the table if I remove the left and right padding from the first and last divs respectively. This is what I'm currently doing and it works. But I was hoping to achieve this without overriding the default styles. I suspect there is a simpler way of doing this that I am missing.
This is a little different than I'm used to since there are several different types of elements in the toolbar.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="btn-toolbar">
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Start Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">End Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">
Get Data
</button>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div>
<label class="control-label">Search</label>
<input type="search" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-1">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">
Search
</button>
</div>
</div>
<div class="col-sm-3">
<div class="pull-right">
<label class="control-label"> </label>
<div class="btn-toolbar">
<button type="button" class="btn btn-success">Create
</button>
<button type="button" class="btn btn-danger">
Close
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Any suggestions would be appreciated.
Two elements are extra in your code. One of them is the .btn-toolbar (the one in between .row and Bootstrap grid columns) while the second is .row around the table element.
Wrapping .row around the table is excess because you are not using any columns inside this row. Further remove .btn-toolbar element as well because you have set some custom margin-left here which is causing some misalignment from the left side.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Start Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">End Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Get Data</button>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div>
<label class="control-label">Search</label>
<input type="search" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-1">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Search</button>
</div>
</div>
<div class="col-sm-3">
<div class="pull-right">
<label class="control-label"> </label>
<div class="btn-toolbar">
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-danger">Close</button>
</div>
</div>
</div>
</div>
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
I am trying to put my 2nd div on the right side of the page.
So apparently the 2nd div should be on the right side of the 1st div . At the moment is right under the 1st div and i want to put it on the right side of the first div and should remain responsive
I am trying to put my 2nd div on the right side of the page.
So apparently the 2nd div should be on the right side of the 1st div . At the moment is right under the 1st div and i want to put it on the right side of the first div and should remain responsive
How can i get this done with css.
<div class="container col-md-12 col-md-offset-0">
<div class="well well bs-component">
<form class="form-horizontal" method="post">
{!! csrf_field() !!}
<--1st div -->
<div class="form-group">
<label for="name" class="col-lg-1 control-label">Phone</label>
<div class="col-lg-8">
<input type="text" class="typeahead form-control" id="phone" placeholder=" Customer Phone Number" name="phone" required>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-1 control-label"> Name</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="name" placeholder=" Customer Name" name="name" required>
</div>
</div>
<--End of 1st div -->
<--2nd div -->
<div class="panel">
<div class="panel_1">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
</table>
</div>
</div>
<--End of 2nd div -->
<--3rd div -->
<div class="row">
<div class="col-md-9">
<div class="nav-tabs-custom" id="tabs">
<ul class="nav nav-tabs">
#foreach($countries as $country)
<li><a href="#tab_{{ $country->id }}" data-toggle="tab" >{!!$category->name!!}</a></li>
#endforeach
</ul>
<div class="tab-content">
#foreach($countries as $key => $country)
<div class="tab-pane" id="tab_{{ $country->id }}">
<table class="table" id="tables">
<thead>
<tr>
<th></th>
<th colspan="5"></th>
<th></th>
</tr>
</thead>
<tbody id="food_list">
#foreach($country->teams as $team)
<tr>
</tr>
#endforeach
</tbody>
</table>
</div>
#endforeach
</div>
</div>
</div>
</div>
<--End of 3rd div -->
</form>
</div>
</div>
<div class="container col-md-12 col-md-offset-0">
<div class="well well bs-component">
<form class="form-horizontal" method="post">
{!! csrf_field() !!}
<!--1st div --><div class="col-xs-12 col-sm-6">
<div class="form-group">
<label for="name" class="col-lg-1 control-label">Phone</label>
<div class="col-lg-8">
<input type="text" class="typeahead form-control" id="phone" placeholder=" Customer Phone Number" name="phone" required>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-1 control-label"> Name</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="name" placeholder=" Customer Name" name="name" required>
</div>
</div></div>
<!--End of 1st div -->
<!--2nd div --><div class="col-xs-12 col-sm-6">
<div class="panel">
<div class="panel_1">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
</table>
</div>
</div></div>
<!--End of 2nd div -->
<!--3rd div -->
<div class="row">
<div class="col-md-9">
<div class="nav-tabs-custom" id="tabs">
<ul class="nav nav-tabs">
#foreach($countries as $country)
<li><a href="#tab_{{ $country->id }}" data-toggle="tab" >{!!$category->name!!}</a></li>
#endforeach
</ul>
<div class="tab-content">
#foreach($countries as $key => $country)
<div class="tab-pane" id="tab_{{ $country->id }}">
<table class="table" id="tables">
<thead>
<tr>
<th></th>
<th colspan="5"></th>
<th></th>
</tr>
</thead>
<tbody id="food_list">
#foreach($country->teams as $team)
<tr>
</tr>
#endforeach
</tbody>
</table>
</div>
#endforeach
</div>
</div>
</div>
</div>
<!--End of 3rd div -->
</form>
</div>
</div>
Few changes that you have to make:
You have used col-md in some rows while for others you have used col-lg..? Either give each of your columns all size support by mentioning col-lg, col-md, col-sm like I have changed below.
The columns which you need on the same row need to be wrapped inside one class="row" in bootstrap. That's why I have made two columns with size col-8 and col-4 for your first and second div and wrapped them in row instead of the forms.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container col-lg-12 col-md-12 col-sm-12 col-12 col-lg-offset-0 col-md-offset-0 col-sm-offset-0 col-offset-0">
<div class="well well bs-component">
<form class="form-horizontal" method="post">
{!! csrf_field() !!}
<!--1st div -->
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-8">
<div class="form-group">
<label for="name" class="col-lg-1 col-md-1 col-sm-1 col-1 control-label">Phone</label>
<div class="">
<input type="text" class="typeahead form-control" id="phone" placeholder=" Customer Phone Number" name="phone" required>
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-1 col-md-1 col-sm-1 col-1 control-label"> Name</label>
<div class="">
<input type="text" class="form-control" id="name" placeholder=" Customer Name" name="name" required>
</div>
</div>
</div>
<!--End of 1st div -->
<!--2nd div -->
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="panel">
<div class="panel_1">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<!--End of 2nd div -->
<!--3rd div -->
<div class="row">
<div class="col-md-9 col-sm-9 col-lg-9 col-9">
<div class="nav-tabs-custom" id="tabs">
<ul class="nav nav-tabs">
#foreach($countries as $country)
<li>{!!$category->name!!}</li>
#endforeach
</ul>
<div class="tab-content">
#foreach($countries as $key => $country)
<div class="tab-pane" id="tab_{{ $country->id }}">
<table class="table" id="tables">
<thead>
<tr>
<th></th>
<th colspan="5"></th>
<th></th>
</tr>
</thead>
<tbody id="food_list">
#foreach($country->teams as $team)
<tr>
</tr>
#endforeach
</tbody>
</table>
</div>
#endforeach
</div>
</div>
</div>
</div>
<!--End of 3rd div -->
</form>
</div>
</div>
I am using some panel in my form. Its working fine in maximum panel but two panel is not working . The image will be given below . i write a panel code for these 4 checkbox (payment, deposit Voucher, cash, bank) and in the bottom finish button.
but this two panel didn't working.
How can i solve this problem ?
Code of my full form is given below :
<!-- 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>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Payment Deposit Voucher</title>
</head>
<body>
<div class="panel panel-default">
<div style="padding:25px; ">
<div class="container center_div">
<form action="" method="post" class="form">
<div class="col-sm-10">
<div class="form-group">
<div class="col-sm-12 panel panel-heading panel-success">PAYMENT DEPOSIT VOUCHER <span style="color:green">[DAFFODIL INTERNATIONAL UNIVERSITY]</span>
</div>
</div>
<div class="form-group">
<div class="panel panel-default">
<div class="col-sm-6" style="padding-bottom:5px;">
<input type="radio" name="voucher" value="payment_voucher">Payment Voucher
<input type="radio" name="voucher" value="deposit_voucher">Payment Voucher
</div>
<div class="col-sm-3"style="padding-bottom:5px;"></div>
<div class="col-sm-3" style="padding-bottom:5px;">
<input type="radio" name="transaction" value="cash">Cash
<input type="radio" name="transaction" value="bank">Bank
</div></div></div>
<div class="panel panel-default">
<div class="panel panel-body">
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Voucher ID:</label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="voucherid" id="voucherid"></div></div>
<div class="form-group">
<div class="col-sm-2"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Date :</label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="date" id="date">
</div></div><br>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Project : </label></div>
<div class="col-sm-10" style="padding-top:5px"><input type="text" class="form-control" name="project" id="project"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Department : </label></div>
<div class="col-sm-3" style="padding-top:5px"><select name="department" class="form-control">
<option value="Select">Select...</option>
<option value="SWE">SWE</option>
<option value="CSE">CSE</option>
<option value="EEE">EEE</option>
</select>
</div></div>
<div class="col-sm-2"></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Cash in Hand : </label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="cashinhand" id="cashinhand"> </div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Bank Account :</label></div>
<div class="col-sm-10" style="padding-top:5px"><input type="text" class="form-control" name="bankacc" id="bankacc"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Cheque No: </label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="chequeno" id="chequeno"></div></div>
<div class="form-group">
<div class="col-sm-2"></div>
<div class="col-sm-2" style="padding-top:5px"><label>MR. No :</label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="mrno" id="mrno"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Control Head : </label></div>
<div class="col-sm-10" style="padding-top:5px"><input type="text" class="form-control" name="controllhead" id="controllhead"></div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Client :</label></div>
<div class="col-sm-10" style="padding-top:5px"><select name="client" class="form-control">
<option value="Select">Select...</option>
<option value="SWE">SWE</option>
<option value="CSE">CSE</option>
<option value="EEE">EEE</option>
</select> </div></div>
<div class="form-group">
<div class="col-sm-2" style="padding-top:5px"><label>Debit: </label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="debit" id="debit"></div></div>
<div class="form-group">
<div class="col-sm-2" ></div>
<div class="col-sm-2" style="padding-top:5px"><label>Credit : </label></div>
<div class="col-sm-3" style="padding-top:5px"><input type="text" class="form-control" name="credit" id="credit"></div></div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-10">
<div class="panel panel-default">
<div class="showtable">
<table class="table">
<tr>
<th>ACCOUNT HEAD</th>
<th>DEBIT</th>
<th>CREDIT</th>
<th>CHEQUE</th>
<th>PROJECT NAME</th>
<th>MR. NO</th>
<th>DEPT NAME</th>
<th>CLIENT NAME</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-10">
<div class="panel panel-default">
<div class="col-sm-10"></div>
<div class="col-sm-2" style="padding-bottom:5px">
<input type="submit" class="btn btn-lg btn-success" name="finish" value="FINISH" id="finish"></div>
</div>
</div>
</body>
</html>
It is not entirely clear what you are trying to achieve and what is exactly the issue. If your issue is that you are not reliably getting a panel border around the areas you mention, This can be resolved by wrapping the radio buttons and finish buttons (individually) with
<div class="panel-body">
....
</div>
This jsfiddle demonstrates how this can be used https://jsfiddle.net/2qut3hx7/.
I have a bootstrap template html code:
<section id="main-content">
<section class="wrapper">
<h3><i class="fa fa-angle-right"></i>Create New Space Marine Chapter</h3>
<div class="row mt" >
<div class="col-md-12" >
<div class="content-panel" >
<form class="form-inline" action="add.php" method="POST">
<div class="row">
<div class="form-group col-lg-5" style='float:initial;width:680px;height:240px'>
<div class="form-group col-lg-4">
<label for="id">ID:</label>
<input class="form-control" type="text" name="ID" required="required" />
</div>
<div class="form-group col-lg-4">
<label for="name">Name:</label>
<input class="form-control" type="text" name="Name" required="required"/>
</div>
<div class="form-group col-lg-4">
<label for="founding">Founding:</label>
<input class="form-control" type="text" name="Founding" required="required"/>
</div>
<div class="form-group col-lg-4">
<label for="successor_of">Successor Of:</label>
<input class="form-control" type="text" name="Successor_Of" required="required"/>
</div>
<div class="form-group col-lg-4">
<label for="successor_chapters">Successor Chapters:</label>
<input class="form-control" type="text" name="Successor_Chapters" required="required"/>
</div>
<div class="form-group col-lg-4">
<label for="number">Number:</label>
<input class="form-control" type="text" name="Number" required="required"/>
</div>
<div class="form-group col-lg-4">
<label for="primarch">Primarch:</label>
<input class="form-control" type="text" name="Primarch" required="required"/>
</div>
<div class="form-group col-lg-4">
<label for="chapter_master">Chapter Master:</label>
<input class="form-control" type="text" name="Chapter_Master" required="required"/>
</div>
<div class="form-group col-lg-4">
<label for="homeworld">Homeworld:</label>
<input class="form-control" type="text" name="Homeworld" required="required"/>
</div>
<div class="form-group col-lg-4">
<label for="allegiance">Allegiance:</label>
<input class="form-control" type="text" name="Allegiance" required="required"/>
</div>
<div class="form-group col-lg-4">
<label for="colors">Colors:</label>
<input class="form-control" type="text" name="Colors" required="required"/>
</div>
</div>
</div>
<br>
<div class="form-group col-md-1 ">
<button onclick="showAddRecordDiv()" type="submit" class="btn btn-default">Create</button>
</div>
</form>
<form action="javascript:getLastRecord();" method="GET">
<div class="form-group col-md-2">
<button type="submit" class="btn btn-default">Show Last Created</button>
</div>
</form>
<form action="javascript:getAllRecords();" method="GET">
<div class="form-group col-lg-1">
<button type="submit" class="btn btn-default">Show All</button>
</div>
</form>
<table id="advanced-table" class="table table-striped table-advance table-hover">
<thead>
<tr>
<th style="text-align:center" width="50">ID</th>
<th style="text-align:center" width="100">Name</th>
<th style="text-align:center" >Founding</th>
<th style="text-align:center" width="150">Successor Of</th>
<th style="text-align:center" width="200" >Successor Chapters</th>
<th style="text-align:center" >Number</th>
<th style="text-align:center" >Primarch</th>
<th style="text-align:center" width="200" >Chapter Master</th>
<th style="text-align:center" >Homeworld</th>
<th style="text-align:center" >Allegiance</th>
<th style="text-align:center" >Colors</th>
<th style="text-align:center" width="100" >Input Date</th>
<th style="text-align:center" >Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="alert-div" class="alert alert-danger" hidden="hidden">
<strong>RECORD DELETED</strong>
</div>
<div id="add-record-div" class="alert alert-success" hidden="hidden">
<strong>CHAPTER CREATED</strong>
</div>
</div><!-- /content-panel -->
</div><!-- /col-md-12 -->
</div><!-- /row -->
</section><! --/wrapper -->
</section><!-- /MAIN CONTENT -->
My problem is when I zoom in or out the page, all divs' positions changes and page's layout brakes. Here is some examples:
Page with size of 33%:
Page with size of 100%:
Page with size of 175%:
I searched over internet and saw that I must set divs' sizes fixed/static. I did something with float and width-height but it didn't help. What can I do for not to break page's layout?
Hi I have an AngularJS aplication created using Grunt bower and yeoman.
I am trying do grunt serve:dist on the application. While minifying some HTML shows error and doesn't minifying even if I do --force
I have some HTML pages in my views.
application.html
<!-- build:js scripts/applicationctrl.js -->
<script src="scripts/controllers/appln.js"></script>
<!-- endbuild -->
<div ng-if="view" id="application"
class="tab-pane active">
<div class="box-header blue-background">
<div class="title">
<div class="icon-edit"></div>
Application Information
</div>
</div>
<form class="form form-horizontal " id="appForm" name="appForm"
ng-submit="saveapplication()" ng-if="update"
style="margin-top: 1%">
<div ng-if="statusMessage!=null"
class="alert {{alertType}} alert-dismissable">
<a class="close" data-dismiss="alert" href="">× </a> <i
class="{{statusIcon}}"></i> {{statusMessage}}
</div>
<div class="groupedColumns"
ng-if="allowed">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4 " for="applicationName">Application
: <span class="required">*</span>
</label>
<div class="col-xs-7 controls">
<input class="form-control input-sm inline-block"
data-rule-required="true" ng-model="application.name"
placeholder="Application Name" required="required" />
</div>
<div class="availability-result">
<i id="loading" class="{{spinnerClass}}"></i> <span
class="{{msgClass}}"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4 " for="applicationID">Application
ID : </label>
<div class="col-xs-7 controls">
<input class="form-control input-sm"
ng-model="application.applicationId" id="applicationID"
name="applicationID" placeholder="Application ID" />
</div>
</div>
</div>
</div>
</div>
</div>
I have another file in the same views folder.
info.html
<!-- build:js scripts/infoctrl.js -->
<script src="scripts/controllers/info.js"></script>
<!-- endbuild -->
<div class="box bordered-box" ng-if="tabpage.enable">
<div class="box-content box-no-padding">
<div class="responsive-table">
<div class="box-header">
<div class="title icon-truck">Summary</div>
</div>
<div class="form-group col-sm-6 no-margin-bottom">
<label
class="control-label col-sm-5 col-xs-12 input-sm-attr no-padding">Active
: </label>
<div>
<input class"no-padding" type="checkbox" ng-model="info.isActive"
ng-change="enablesave()">
</div>
</div>
<div class="col-xs-2 actions">
<button type="submit" id="infoSaveID"
ng-disabled="savebutton.enable" value="Save"
ng-click="saveInfo()"
class="btn btn-primary icon-ok icon-white">Save</button>
</div>
<div class="scrollable-area" style="padding-top: 5px;">
<table class="table-condensed table table-bordered table-hover">
<thead>
<tr>
<th class="col-size-reduce"
ng-repeat="(key ,value) in infoStatus[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in infoStatus">
<td class="col-size-reduce" ng-repeat="(key, value) in row">
{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
And I have many files too like this.
When I do grunt serve:dist it minifies the first html page. While it shows error while minifying the info.html page
Warning: dist/views/info.html
Parse Error: <input class"no-padding" type="checkbox" ng-model="info.isActive"
ng-change="enablesave()">
</div>
</div>
<div class="col-xs-2 actions">
<button type="submit" id="infoSaveID"
ng-disabled="savebutton.enable" value="Save"
ng-click="saveInfo()"
class="btn btn-primary icon-ok icon-white">Save</button>
</div>
<div class="scrollable-area" style="padding-top: 5px;">
<table class="table-condensed table table-bordered table-hover">
<thead>
<tr>
<th class="col-size-reduce"
ng-repeat="(key ,value) in infoStatus[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in infoStatus">
<td class="col-size-reduce" ng-repeat="(key, value) in row">
{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> Used --force, continuing.
Warning: Cannot read property 'length' of undefined Used --force, continuing.
Why the first one is working fine and the second one shows error? How to solve it?
There is an error in your HTML syntax. At the first line, replace
<input class"no-padding" type="checkbox" ng-model="info.isActive"
ng-change="enablesave()">
By
<input class="no-padding" type="checkbox" ng-model="info.isActive"
ng-change="enablesave()">
And htmlmin will work properly.