I have created a form using Ionic Creator.
https://creator.ionic.io/share/fdd3f4198103
I am unable to see the borders of select as you can see in my image below.
Source code is :
<script src="http://code.ionicframework.com/1.3.1/js/ionic-angular.js"></script>
<script src="http://code.ionicframework.com/1.3.1/js/ionic.js"></script>
<link href="http://code.ionicframework.com/1.3.1/css/ionic.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<ion-view title="Credentials" id="page9" class=" ">
<ion-content padding="true" class="has-header">
<form id="credentials-form11" class="list ">
<label class="item item-select " id="credentials-select5">
<span class="input-label">Select Router</span>
<select>
<option>HData</option>
<option>Ajay</option>
<option>Test</option>
</select>
</label>
<ion-checkbox>Create Hotspot</ion-checkbox>
<label class="item item-input item-stacked-label " id="credentials-input13">
<span class="input-label">Password</span>
<input type="password" placeholder="sample">
</label>
<ion-checkbox>Show Password</ion-checkbox>
</form>
<div class="list card " id="credentials-card21">
<ion-item class="item-icon-left dark " id="credentials-list-item7">
<i class="icon ion-stats-bars"></i>Progress</ion-item>
<div style="margin: 0px; line-height: 250px; text-align: center; background-color: rgb(232, 235, 239);">
<i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i>
</div>
<div class="item item-body " id="credentials-list-item-container1">
<p id="credentials-null" style="margin-top:0px;color:#000000;" class=" ">Some friendly
<strong>markdown</strong>
</p>
</div>
</div>
<div id="credentials-button-bar4" class=" button-bar ">
<button id="credentials-button7" class=" button button-positive button-block ">Clear</button>
<button id="credentials-button8" class=" button button-positive button-block ">Continue</button>
</div>
</ion-content>
</ion-view>
My output in application is as below.
If anyone could help with the problem of border would be really helpful.
I also applied class for border .itemborder{
border: 1px solid #4a87ee;
border-radius: 3px;
margin:10px;
} but its not working.
Related
Hi I am trying to align the label tag, text and submit input types to the left and align the 17 total orders to the right side of the page aligned vertically with the Date label and horizontally right aligned with the end of the paragraph tag "Shipping List is Finalized Everyday at 5pm EST".
So far I have gotten the label tag and two input tags aligned where I would like them, but the span tag is not aligning completely to the right side. I am using bootstrap 4.1.1.
Here is my code:
.main {
margin: 15px 0;
}
.btn-appear {
color: #000000;
background-color: #e6e6e6;
border: 3px solid #b3b3b3;
}
.btn-appear:focus {
box-shadow: 0 0 0 .1em rgba(186, 208, 226, .5);
}
.btn-appear:active {
color: #ffffff;
background-color: #4d4d4d;
border-color: #bad0e2;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row main" style="background-color: #ffffff">
<div class="col-12">
<h3>Shipping / Loading List</h3>
<div class="">
<p class="float-left">Select Shipping / Loading Date</p>
<p class="float-right">Shipping List is Finalized Everyday at 5pm EST.</p>
</div>
<!-- Form code begins -->
<div class="row container justify-content-between">
<div class="col-4 row" style="background-color: antiquewhite">
<form method="post">
<div class="form-group">
<!-- Date input -->
<label class="control-label d-block" for="date">Date:</label>
<div class="form-inline d-inline-block">
<input class="form-control" id="date" name="date" size="10" placeholder="MM/DD/YYYY" type="text" />
<input class="btn btn-appear" name="submit" type="submit" value="Search">
</div>
</div>
</form>
</div>
<span class="col-4 text-right" style="background-color: aliceblue">
17 Total Orders for <span id="demo"></span>
</span>
</div>
</div>
</div>
.main{
margin-top: 15px;
}
.btn-appear{
color: #000000;
background-color: #e6e6e6;
border: 3px solid #b3b3b3;
}
.btn-appear:focus{
box-shadow:0 0 0 .1em rgba(186,208,226,.5);
}
.btn-appear:active{
color:#ffffff;
background-color: #4d4d4d;
border-color: #bad0e2;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row main" style="background-color: #ffffff">
<div class="col-12">
<h3>Shipping / Loading List</h3>
<p class="float-left">Select Shipping / Loading Date</p>
<p class="float-right">Shipping List is Finalized Everyday at 5pm EST.</p>
</div>
</div>
<div class="row justify-content-between">
<div class="col-4" style="background-color: antiquewhite">
<form method="post">
<div class="form-group">
<label class="control-label d-block" for="date">Date:</label>
<div class="form-inline d-inline-block">
<input class="form-control" id="date" name="date" size="12" placeholder="MM/DD/YYYY" type="text"/>
<input class="btn btn-appear" name="submit" type="submit" value="Search">
</div>
</div>
</form>
</div>
<span class="col-4 text-right" style="background-color: aliceblue">
17 Total Orders for <span id="demo"></span>
</span>
</div>
</div>
Sorry it took me so long to respond with my solution. I actually changed a lot of it. Here is my solution:
.main{
margin: 15px 0;
}
.btn-appear{
color: #000000;
background-color: #e6e6e6;
border: 3px solid #b3b3b3;
}
.btn-appear:focus{
box-shadow:0 0 0 .1em rgba(186,208,226,.5);
}
.btn-appear:active{
color:#ffffff;
background-color: #4d4d4d;
border-color: #bad0e2;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row main">
<div class="col-12">
<h3>Shipping / Loading List</h3>
<p class="float-left">Select Shipping / Loading Date</p>
<p class="float-right">Shipping List is Finalized Everyday at 5pm EST.</p>
</div>
</div>
<!-- Form code begins -->
<div class="row main justify-content-between">
<div class="col-4">
<form method="post">
<div class="form-group">
<label class="control-label d-block" for="date">Date:</label>
<div class="form-inline d-inline-block">
<input name="date" class="form-control" id="date" type="text" size="12" placeholder="MM/DD/YYYY">
<input name="submit" class="btn btn-appear" type="submit" value="Search">
</div>
</div>
</form>
</div>
<div class="col-4 text-right">
17 Total Orders for <span id="demo">Wed Aug 29 2018</span>
</div>
</div>
</div>
I wonder what's the best way to vertically align an input field and a button without Bootstrap.
Here's how it looks right know:
Some code:
<!doctype html>
<title>Postnummer</title>
<div class="container-fluid">
<div class="divider"></div>
<div class="row">
<div class="col-md-12">
<form class="navbar-form">
<div class="input-group">
<input style="height:50px; color: black; border-radius: 0px;" type="number" id="searchZipCode"class="form-control" placeholder="Sök postnummer">
<div class="input-group-btn">
<a id="submitBtn">
<button style="height:50px; border-radius: 0px" type="button" click="submitZipCode()" class="btn btn-default"><i class="fa fa-search fa-2x"></i></button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/5mxzu4m5/
I want the the icon on the right side of the input field. Really grateful for all the answers! :)
Use the below code (just added display:inline-block & vertical-align:top on textbox and .input-group-btn, increased button height)
<div class="container-fluid">
<div class="divider"></div>
<div class="row">
<div class="col-md-12">
<form class="navbar-form">
<div class="input-group" style="text-align: center">
<input style="height:50px; color: black; border-radius: 0px; display: inline-block; vertical-align:top; margin-right:-4px; " type="number" id="searchZipCode"class="form-control" placeholder="Sök postnummer">
<div class="input-group-btn" style="display: inline-block; vertical-align:top">
<a id="submitBtn">
<button style="height:56px; border-radius: 0px;" type="button" click="submitZipCode()" class="btn btn-default"><i class="fa fa-search fa-2x"></i></button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
Simple and Sleek Solution:
Replace src="..." with your link
HTML
<div>
<input type="text" id="text1">
<br>
<img src="http://findicons.com/files/icons/1264/clearblack/128/find.png" height="50px" width="50px">
</div>
CSS
img{
float:right;
}
div{
width:90px;
}
Try this CSS
.input-group{
display:table;
}
.form-control,.input-group-btn
{
display:table-cell;
vertical-align:middle;
}
Link For Reference
style your button accordingly
hope this helps..
Inside container div i have two columns. Column 1 height is dynamic, I want column 2 height to match according with column 1. I tried using display: table property but it's not working. How can i achieve it using css? I get this problem when column 1 displays errors and it's height increases. How do i set both column same height using css?
HTML
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10 col-lg-offset-2 col-lg-8">
<div class="row">
<div class="col-md-7 pr-0">
<section class="tile new-su-tile1">
<!-- tile body -->
<div class="tile-body p-40">
<form name="signupForm" role="form" ng-submit="userSignupMethod(signupForm)" novalidate>
<div class="row">
<div class="col-sm-offset-1 col-sm-10">
<div class="form-group">
<input type="text" class="form-control" name="firstname" ng-model="userSignup.firstname"
ng-pattern="/^[a-zA-Z\s]*$/" required autocomplete="off" placeholder="Your Name" id="firstname" >
<span ng-messages="((signupForm.firstname.$touched && signupForm.firstname.$error) || (signupForm.$submitted && signupForm.firstname.$error))"
role="alert">
<span class="error_msg" ng-message="required">Please complete this mandatory field.</span>
<span class="error_msg" ng-message="pattern">Please enter valid name.</span>
</span>
</div>
</div>
<div class="col-sm-offset-1 col-sm-10">
<div class="form-group">
<input type="text" class="form-control" name="lastname" ng-model="userSignup.lastname"
ng-pattern="/^[a-zA-Z\s]*$/"
required autocomplete="off" placeholder="Your Last Name" id="lastname" >
<span ng-messages="((signupForm.lastname.$touched && signupForm.lastname.$error) || (signupForm.$submitted && signupForm.lastname.$error))"
role="alert">
<span class="error_msg" ng-message="required">Please complete this mandatory field.</span>
<span class="error_msg" ng-message="pattern">Please enter valid name.</span>
</span>
</div>
</div>
<div class="col-sm-offset-1 col-sm-10">
<div class="form-group">
<input type="text" class="form-control" name="email" ng-model="userSignup.email"
ng-pattern="/^[a-zA-Z0-9._]+[a-zA-Z0-9._]+#[a-z-A-Z.]{2,50}$/" required autocomplete="off" id="email" placeholder="Your Email ID">
<span ng-messages="((signupForm.email.$touched && signupForm.email.$error) || (signupForm.$submitted && signupForm.email.$error))"
role="alert">
<span class="error_msg" ng-message="required">Please complete this mandatory field.</span>
<span class="error_msg" ng-message="pattern">Please enter valid email.</span>
</span>
</div>
</div>
<div class="col-sm-offset-1 col-sm-10">
<div class="form-group">
<input type="text" class="form-control" name="contactnumber" ng-model="userSignup.contactnumber"
ng-pattern="/^[0-9]{10,15}$/" autocomplete="off" id="contactnumber" placeholder="Mobile Number" minlength="10" maxlength="15">
<span ng-messages="((signupForm.contactnumber.$touched && signupForm.contactnumber.$error) || (signupForm.$submitted && signupForm.contactnumber.$error))"
role="alert">
<span class="error_msg" ng-message="pattern">Please enter valid contact number.</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<button class="btn btn-block btn-login b-0 br-2 mr-5" analytics-event="click" analytics-category="sign up">Sign Up</button>
</div>
</div>
<!-- Modal HTML ng-disabled="enquiryForm.$invalid "-->
<div id="successSignUp" class="modal fade modal-md thank-you">
<div id="loadingImag" ng-if="loadingImag" class="content-center">
<a href="" class="myIcon icon-info icon-ef-6 icon-color">
<i class="fa fa-refresh fa-spin fa-3x"></i>
</a>
</div>
<div id="messageBox" ng-if="messageBox" class="modal-dialog modal-sm">
<div class="modal-content content-center modal-md ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">x
</button>
<h2 class="modal-title">Thank You</h2>
</div>
<div class="modal-body">
<div class="ng-scope ng-binding" ng-class="messageColor ? 'text-success' : 'text-lightred'" data-ng-repeat="alert in alerts">
{{alert.message}} <br>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default btn-sm btn-ef btn-ef-3"
ng-click="redirecttoSinup()">OK
</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- /tile body -->
<!-- tile footer -->
<div class="tile-footer new-tile-footer text-center ">
<!-- SUBMIT BUTTON -->
<p class="pt-5">Already a user?
<a ui-sref="login" class="login-link">Log in to your account</a></p>
</div>
<!-- /tile footer -->
</section>
<!-- /tile -->
</div>
<div class="col-md-5 pl-0">
<section class="tile new-su-tile2">
<div class="ysu-heading pt-36">Why Sign Up?</div>
<ul class="pl-0">
<li class="ysu-subheading"><i class="fa fa-check pr-8 pt-2 ysu-icon"></i>Apply & Manage your Visa Applications with Ease</li>
<li class="ysu-subheading"><i class="fa fa-check pr-8 pt-2 ysu-icon"></i>Store all Visa related documents in one secure vault for easy future reference </li>
<li class="ysu-subheading"><i class="fa fa-check pr-8 pt-2 ysu-icon"></i>Access your Visa related documents anytime, anywhere all ine one place</li>
<li class="ysu-subheading"><i class="fa fa-check pr-8 pt-2 ysu-icon"></i>All your data is stored making re-applying easier and faster</li>
<li class="ysu-subheading"><i class="fa fa-check pr-8 pt-2 ysu-icon"></i>Automatically fills in your Visa form next time you need to travel</li>
<li class="ysu-subheading"><i class="fa fa-check pr-8 pt-2 ysu-icon"></i>Tag your family as applicants</li>
</ul>
</section>
</div>
</div>
</div>
</div>
<div ng-include="'components/navbar/quick-links.html'"></div>
</div>
CSS (less format)
.new-su-tile1 {
& .form-control {
height: 38px;
border: 1px solid #acacac;
font-style: normal;
}
& .error_msg {
font-size: 10px;
}
& .btn-login {
background: #32a9de;
}
}
.new-su-main-tile2 {
margin-left: -1px;
& .new-su-tile2 {
min-height: 308px;
#media ( max-width:#screen-xs-max) {
border-left: 1px solid #acacac;
margin-left: 15px;
margin-right: -15px;
}
#media ( max-width:#screen-sm-max) {
border-left: 1px solid #acacac;
margin-left: 15px;
margin-right: -15px;
}
& .ysu-heading {
color: #86c049;
text-align: center;
}
& .ysu-subheading {
list-style: none;
color: #333333;
list-style: none;
display: inline-flex;
font-size: 12px;
text-align: left !important;
padding: 8px 0;
&:first-child {
padding-top: 25px;
}
/*&:last-child {
padding-bottom: 29px;
}*/
& .ysu-icon {
font-size: 10px;
}
}
}
}
.new-tile-footer {
background: #fff;
color: #333333;
font-size: 12px;
& .login-link {
color: #32a9de !important;
}
}
#user6371206 Please check following example. i hope you are expecting the same.
var elements = document.getElementsByClassName('features');
var elementHeights = Array.prototype.map.call(elements, (el) => {
return el.clientHeight;
});
var maxHeight = Math.max(...elementHeights)
Array.prototype.forEach.call(elements, (el) => el.style.height = `${maxHeight}px`);
.a { height: 30px; background-color: red; }
.b { height: 220px; background-color: aqua; }
.c { height: 50px; background-color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="features a"></div>
<div class="features b"></div>
<div class="features c"></div>
I am using django-allauth, bootstrap, font awesome and bootstrap-social for the social media login buttons in my login form. I can't figure out how to center the social buttons within my login-well below. It appears to be aligning to the right of the login well instead of centered. What should I be doing?
jsfiddle
html:
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="well login-well">
<div class="socialaccount_ballot col-md-11">
<ul class="socialaccount_providers">
<li>
<a title="Google" class="btn btn-block btn-social btn-md socialaccount_provider btn-google" href="/accounts/google/login/?process=+login+">
<i class="fa fa-google"></i>Log in with Google
</a>
</li>
<li>
<a title="Facebook" class="btn btn-block btn-social btn-md socialaccount_provider btn-facebook" href="/accounts/facebook/login/?process=+login+">
<i class="fa fa-facebook"></i>Log in with Facebook
</a>
</li>
<li>
<a title="Twitter" class="btn btn-block btn-social btn-md socialaccount_provider btn-twitter" href="/accounts/twitter/login/?process=+login+">
<i class="fa fa-twitter"></i>Log in with Twitter
</a>
</li>
</ul>
</div>
<div class="col-md-12">
<hr>
<form class="login" method="POST" action="/login/">
<div class="form-group"><label class="control-label" for="id_login">Username</label><input autofocus="autofocus" class="form-control" id="id_login" maxlength="30" name="login" placeholder="Username" required="required" title="" type="text" /></div>
<div class="form-group"><label class="control-label" for="id_password">Password</label><input class="form-control" id="id_password" name="password" placeholder="Password" required="required" title="" type="password" /></div>
<div class="form-group"><div class="checkbox"><label for="id_remember"><input class="" id="id_remember" name="remember" type="checkbox" /> Remember Me</label></div></div>
<div class="form-group pull-center">
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</div>
</form>
<hr>
</div>
<div class="form-group">
<small><a class="text-muted" href="/password_reset/">Forgot Password?</a></small>
<br>
<small><a class="text-muted" href="/signup/">Sign up</a></small>
</div>
</div>
</div>
</div>
</div>
css:
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
.socialaccount_providers li a.socialaccount_provider {
rem-border: 1px solid #ddd;
border-radius: 2px;
rem-box-shadow: 2px 2px 8px rgba(0,0,0,.7);
-padding: 10px;
margin-bottom: 6px;
display: block;
width: 100%;
overflow: hidden;
rem-font-size: 1.2em;
}
.socialaccount_providers li a.socialaccount_provider:hover {
text-decoration: none;
box-shadow: 1px 1px 2px rgba(0,0,0,.7);
}
.socialaccount_providers li a.socialaccount_provider.facebook {
background: #4B67A3;
color: #fff;
}
.socialaccount_providers li a.socialaccount_provider.facebook:before {
font-family: FontAwesome;
font-size: 1.9em;
content: "\f082";
display: inline-block;
padding-left: 8px;
padding-right: 8px;
}
What I want it to look like when social buttons are centered:
The ul.socialaccount_providers has a inexplicit padding-left = 40px;
Just throwing in .socialaccount_providers {padding-left:0;} fixes it.
Is there a way to cut-off using elements in my design or it is good enough? I use Boostrap CSS library.
1) CSS:
body {
border: 3px solid black;
min-width: 1800px;
}
#search_box {
border: 3px solid red;
background-color: white;
color: black;
text-align: left;
margin-bottom: 15px;
width: 40%;
}
#search_filter_border {
border: 3px solid green;
/*border: 1px outset gray;*/
float: left;
padding: 10px;
}
#search_categories_filter {
border: 3px solid blue;
line-height: 20px;
height: 420px;
width: 250px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#search_additional_filters {
border: 3px solid brown;
width: 700px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#top20 {
border: 3px solid gray;
width: 650px;
padding: 5px;
margin: 5px 5px 5px 50px;
float: left;
}
2) HTML:
<div id="search_box">
<h2>Поиск мероприятий:</h2>
<div id="searchKeyword" class="input-group">
<i class="glyphicon glyphicon-search input-group-addon"></i>
<input type="text" class="form-control" placeholder="Часть названия мероприятия" ng-model="actionsQuery.searchText" on-enter="queryResult()">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-click="queryResult()">Найти мероприятия</button>
</span>
</div>
</div>
<div id="search_filter_border">
<div id="search_categories_filter">
<label>Типы мероприятий:</label><br/>
<button class="btn btn-link btn-mini" ng-click="UpdateCheckBoxes()">
<span ng-show="checkBoxesState">Выбрать все</span>
<span ng-hide="checkBoxesState">Снять выделение</span>
</button>
<div class="row-fluid" ng-repeat="at in actionsQuery.actionTypes">
<div class="checkbox">
<label><input type="checkbox" ng-model="at.checked">{{at.Description}}</label>
</div>
</div>
</div>
<div id="search_additional_filters">
<label tooltip-popup-delay='400' tooltip-placement="right" tooltip="Минимальная дата - текущая, Максимальная - текущая плю год">Дата сеансов:</label>
<div class="form-inline row" role="form">
<div class="col-sm-4">
<div class="input-group">
<label class="input-group-addon"> с</label>
<input datepicker-popup class="form-control col-md-4" type="text" ng-model="actionsQuery.fromDate" is-open="fromDateOpen"/>
<i class="glyphicon glyphicon-calendar input-group-addon" ng-click="toogleDatepicker($event, 'fromDateOpen')"></i>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<label class="input-group-addon"> по </label>
<input datepicker-popup class="form-control col-md-4" type="text" ng-model="actionsQuery.toDate" is-open="toDateOpen"/>
<i class="glyphicon glyphicon-calendar input-group-addon" ng-click="toogleDatepicker($event, 'toDateOpen')"></i>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" ng-model="actionsQuery.isOpenDatesIncluded"></span>
<label class="form-control col-md-3">+ открытая дата</label>
</div>
</div>
</div>
<br/>
<!--города, площадки-->
<div class="row">
<div class="form-group col-sm-8">
<label>Город:</label>
<div class="input-group">
<i class="glyphicon glyphicon-filter input-group-addon"></i>
<select class="form-control" ng-model="actionsQuery.city" ng-options="c as c.Name for c in cities"></select>
</div>
<br/>
<label>Площадка мероприятия:</label>
<div class="input-group">
<i class="glyphicon glyphicon-filter input-group-addon"> </i>
<select class="form-control" ng-model="actionsQuery.actionPlace" ng-options="ap as ap.Name for ap in actionPlaces"></select>
</div>
</div>
</div>
</div>
<!--Строка данных-->
<div class="row-fluid offset1">
<table class="table table-striped table-condensed table-hover" style="float: left"><!--float: left нужен для корректного отображения в Mozilla -->
<tr ng-repeat="action in actionList">
<td><img ng-src="{{action.ActionLogoUrl?action.ActionLogoUrl:'/img/no_image.gif'}}" /></td>
<td>
<div>
<strong>{{action.Artist}}</strong>
<span class="pull-right"><a class="btn btn-link" ng-click="showSeances(action)" ng-hide="action.seances">Показать сеансы</a></span>
<span class="pull-right"><a class="btn btn-link" ng-click="hideSeances(action)" ng-show="action.seances">Скрыть сеансы</a></span>
</div>
<div class="text-success">
{{action.ActionPlaceName}}
<span ng-show="action.ETicketEnabled>0" class="label label-success">ET</span>
</div>
<!--Таблица сеансов-->
<table class="table table-striped" ng-show="action.seances" style="margin-bottom: 3px; margin-top: 10px;">
<tr ng-class="getSeanceClasses(seance)" ng-repeat="seance in action.seances">
<td>
<h5 class="checkbox">{{seance.title}}</h5>
</td>
<td>
<span ng-show="seance.IsClosed">закрыт</span>
<span class="text-warning" ng-show="seance.IsPaymentsReceived">оплачен</span>
</td>
<td>
{{seance.ActionInfo}}
</td>
<td>
<a class="btn btn-link" ng-href="/Order.aspx?ActionID={{action.Id}}&ActionDate={{seance.ActionDate}}" target="_blank">Заказать</a>
</td>
</tr>
</table>
<span><a class="btn btn-link" ng-show="action.seances.length>seancesLimit" ng-click="seancesLimit=seancesLimit+7">Показать еще...</a></span>
</td>
<td>{{action.BeginActionDate | date:'dd.MM.yyyy HH:mm'}}</td>
</tr>
</table>
<input type="button" class="btn" value="Еще" ng-click="queryNext()" ng-hide="isLastPage" style="float: left"/><!--float: left нужен для корректного отображения в Mozilla -->
</div>
</div>
<div id="top20" class="col-md-4 row-fluid" ng-if="top20 && top20.length!=0">
<label style="text-decoration: underline;">Тоp 20:</label>
<p ng-repeat="t in top20">
<a class="btn-link" ng-href="/Order.aspx?ActionID={{t.ActionID}}" target="_blank">{{t.Artist}}</a>
</p>
</div>
This is how it looks like:
You might wish to use ngInclude for some code reuse.
You don't need to place small templates in separate files. Just include them in main html using script tag with type="text/ng-template":
<script type="text/ng-template" id="foo.html">
<!-- few divs here -->
</script>
UPDATE:
You can package the templates in a separate library.
See $templateCache