I am using a login page in my application. Each time when I am opening the login page through my main navigation page the login page is displayed on the left corner. I am using a bootstrap css. Here is the fiddle ["https://jsfiddle.net/vkcc1c20/"]
<div class="container">
<div class="row">
<div id="login-page-wrapper">
<form name="form" ng-submit="vm.login()" role="form">
<div class="row" ng-show="login_banner_msg">
<div class="col-md-4"> </div>
<div class="col-md-4">
<div class="row">
<div class="col-md-1 col-xs-3">
</div>
<div class="col-md-10 col-xs-6">
<div class="frm-banner frm-banner-red">
{{login_banner_msg}}
</div>
</div>
<div class="col-md-1 col-xs-3">
</div>
</div>
</div>
<div class="col-md-4"> </div>
</div>
<div ng-controller="mainController">
<div class="col-md-4 login-div">
<div class="panel panel-default">
<div class="panel-heading">
<strong class="">Login</strong>
</div>
<div class="panel-body">
<form id="form-login_v2" ng-submit="vm.login()" class="form-horizontal">
<input type="hidden" name="login" value="yes">
<div class="row">
<div class="clearfix"></div>
<div class="col-md-10 col-sm-10 col-xs-12">
<label for="email">User ID</label>
<div class="form-group ">
<div class="input-group ">
<div class="input-group-addon"> <i class="glyphicon glyphicon-envelope"></i> </div>
<input class="form-control" id="email"
name="email"
type="text"
data-validation="[EMAIL]" ng-model="userData.userid" tabindex="0">
</div>
</div>
</div>
<div class="col-md-10 col-sm-10 col-xs-12">
<label for="password" style="display:block;">Password <strong class="pull-right">Forgot Password ? </strong></label>
<div class="form-group ">
<div class="input-group col-md-12 col-xs-12 col-sm-12">
<div class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></div>
<input class="form-control" id="password"
name="password"
type="password"
data-validation="[NOTEMPTY]" ng-model="userData.password" tabindex="0">
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group " style="margin-bottom:5px;padding-left:126px;">
<button type="submit" class="btn btn-primary custButton" ng-click="login_click()">Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Hi I added a new id cont to center it so it could be :
#cont{
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="cont" class="container">
<div class="row">
<div id="login-page-wrapper">
<div ng-controller="mainController">
<div class="col-md-4 login-div">
<div class="panel panel-default">
<div class="panel-heading">
<strong class="">Login</strong>
</div>
<div class="panel-body">
<form id="form-login_v2" ng-submit="vm.login()" class="form-horizontal">
<input type="hidden" name="login" value="yes">
<div class="row">
<div class="clearfix"></div>
<div class="col-md-10 col-sm-10 col-xs-12">
<label for="email">User ID</label>
<div class="form-group ">
<div class="input-group ">
<div class="input-group-addon"> <i class="glyphicon glyphicon-envelope"></i> </div>
<input class="form-control" id="email"
name="email"
type="text"
data-validation="[EMAIL]" ng-model="userData.userid" tabindex="0">
</div>
</div>
</div>
<div class="col-md-10 col-sm-10 col-xs-12">
<label for="password" style="display:block;">Password <strong class="pull-right">Forgot Password ? </strong></label>
<div class="form-group ">
<div class="input-group col-md-12 col-xs-12 col-sm-12">
<div class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></div>
<input class="form-control" id="password"
name="password"
type="password"
data-validation="[NOTEMPTY]" ng-model="userData.password" tabindex="0">
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group " style="margin-bottom:5px;padding-left:126px;">
<button type="submit" class="btn btn-primary custButton" ng-click="login_click()">Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
class="col-xs-4 col-xs-offset-4"
will do the trick for you. Add this to your div like this:
<div class="col-xs-4 col-xs-offset-4 login-div">
//remaining structure
</div>
Related
I've created a Bootstrap 4 form with this layout
And the Razor page code to generate it is:
#page
#model HighStreetLeads3.Pages.Leads.EditModel
#{
ViewData["Title"] = "Edit";
Layout = "~/Pages/Shared/_Layout.cshtml";
}
<h1>Edit</h1>
<h4>Lead</h4>
<hr />
<form class="form-inline col-lg-12" method="post">
<div>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Lead.Id" />
</div>
<div class="row col-12">
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.Name" class="control-label float-left">Name</label>
</div>
<div class="col-9">
<input asp-for="Lead.Name" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.Name" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.PhoneNumber" class="control-label float-left">Number</label>
</div>
<div class="col-9">
<input asp-for="Lead.PhoneNumber" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.PhoneNumber" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row col-12">
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.Status" class="control-label float-left"></label>
</div>
<div class="col-9">
<input asp-for="Lead.Status" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.Status" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.NextAction" class="control-label float-left">Next Action</label>
</div>
<div class="col-9">
<input asp-for="Lead.NextAction" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.NextAction" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row col-12">
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.WebAddress" class="control-label float-left">URL</label>
</div>
<div class="col-9">
<input asp-for="Lead.WebAddress" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.WebAddress" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<div class="col-3">
<label asp-for="Lead.ContactName" class="control-label float-left">Contact</label>
</div>
<div class="col-9">
<input asp-for="Lead.ContactName" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.ContactName" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row col-12">
<div class="col-6">
<div class="form-group text-left">
<div class="col-3">
<label asp-for="Lead.Where" class="control-label float-left">Address</label>
</div>
<div class="col-9">
<input asp-for="Lead.Where" class="form-control mb-2" style="width:100%" />
<span asp-validation-for="Lead.Where" class="text-danger"></span>
</div>
</div>
</div>
</div>
<div class="row col-12">
<div class="col-12">
<div class="form-group">
<div class="col-1 mr-0 pr-0">
<label asp-for="Lead.Notes" class="control-label col-3 float-left"></label>
</div>
<div class="col-8">
<input asp-for="Lead.Notes" class="form-control mb-2 ml-5" style="width:100%" />
<span asp-validation-for="Lead.Notes" class="text-danger"></span>
</div>
<div class="col-2 ml-5 float-right">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
</div>
#*<div class="form-group col-1 offset-11">
<input type="submit" value="Save" class="btn btn-primary" />
</div>*#
I can add the page model in if anyone needs it, but I don't think it's relevant, and the css is the standard bootstrap.
So..... as you can see, the majority of the form is in two columns, but the last field (Notes) takes up more of the screen width. Because of this, I can't get the label or the entry field for Notes to line up with the previous fields. I've tried fiddling about with margins and padding, but I can't get an exact line up. It feels like I need to be able to ask Bootstrap for a width of a fractional column.
Is there a way of getting this last field laid out so it aligns with the previous ones?
Any input gratefully received.
Nick
You use col-3 in <div class="col-6">,so you need to set col-1.5 in <div class="col-12">,but there is no col-1.5,so you can only try to set the css and make it close to col-1.5:
<div class="row col-12">
<div class="col-12">
<div class="form-group">
<div class="col-md-1" style="flex: 0 0 12.15%;max-width: 12.15%;">
<label asp-for="Lead.Notes" class="control-label float-left"></label>
</div>
<div class="col-8">
<input asp-for="Lead.Notes" class="form-control mb-2 ml-5" style="width:100%" />
<span asp-validation-for="Lead.Notes" class="text-danger"></span>
</div>
<div class="col-2 ml-5 float-right">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
</div>
result:
I am trying to make a Sign-UP form in html and CSS with notepad++ but whenever I try to run it on chrome, it loads very slowly. Is it a configuration error or something? What am I doing wrong? Is there a plugin needed? This is my entire code:
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add the bootstrap and jQuery plugins.
In HTML page link the external files properly.
In head section add the external links.
Maintain the folder structure neat so that linking extrnal files is easy.
If everything is correct go to this link to set up Chrome: https://www.webnots.com/fix-slow-page-loading-issue-in-google-chrome/
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Register</div>
<div class="card-body">
<div class="form-group row">
<label for="full_name" class="col-md-4 ">Full Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="full-name">
</div>
</div>
<div class="form-group row">
<label for="email_address" class="col-md-4 ">E-Mail Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email-address">
</div>
</div>
<div class="form-group row">
<label for="user_name" class="col-md-4 ">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 ">Password</label>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="col-md-6 stylish" offset-md-4>
<button type="submit" class="btn btn-primary"">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have two forms that need to be side by side. I can get them to float left but the button gets disabled when I use float left. I have tried display-inline and that doesnt work. I have tried span and that doesnt work. No idea why the button stops woeking. Here is a sample form
<div style="float:left;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div style="display:incline;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Will this work as a start?
I changed this (which had a type, should be inline) style="display:incline;... to style="float:left;...
<div style="float:left;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div style="float:left;border:1px solid blue; width:200px;">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
but may I suggest to use style="display: inline-block;... on both your form containers, here using CSS styles (preferable) instead of inline style.
.formwrapper {
display:inline-block;
border:1px solid blue;
width:200px;
}
<div class="formwrapper">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="formwrapper">
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
LastName
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I don't think I quite understand how bootstrap works with the grid. I want the name and actual field to match up unless the screen size is xs so every field is its own row. For each row, I want the text boxes always aligned.
Here's what I've tried.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="width:80vw">
<form role="form">
<div class="row top-buffer">
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputLabel3" class="col-sm-3 control-label">Date:</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="inputLabel3" placeholder="date">
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputname" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-8 ">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">Initials:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputInitials" placeholder="Initials">
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Title:</label>
<div class="col-sm-10 ">
<input type="text" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-5">
<div class="form-group">
<label for="inputLabel3" class="col-sm-2 control-label">Expected:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Actual" class="col-sm-2 control-label">Actual:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Description:</label>
<div class="col-sm-10 ">
<textarea id="descript" class="col-sm-10 "></textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</div
Bonus points for someone who can also help me make the description field larger - enough height for at least 20 new lines.
this includes the extra 20 spaces in despcription
Add this to your .css
.col-sm-4 {
display: inline-block;
vertical-align: middle;
float: none;
}
<div class="container" style="width:80vw">
<form role="form">
<div class="row top-buffer">
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputLabel3" class="col-sm-3 control-label">Date:</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="inputLabel3" placeholder="date">
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="form-group">
<label for="inputname" class="col-sm-4 control-label">Name:</label>
<div class="col-sm-8 ">
<input type="text" class="form-control" id="name" placeholder="name">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">Initials:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputInitials" placeholder="Initials">
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Title:</label>
<div class="col-sm-10 ">
<input type="text" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-5">
<div class="form-group">
<label for="inputLabel3" class="col-sm-2 control-label">Expected:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="Actual" class="col-sm-2 control-label">Actual:</label>
<div class="col-sm-10 ">
<input type="number" class="form-control" id="inputLabel3" placeholder="title">
</div>
</div>
</div>
</div>
</div>
<div class = "row top-buffer">
<div class="col-sm-12">
<div class="form-group">
<label for="inputLabel3" class="col-sm-1 control-label">Description:</label>
<div class="col-sm-10 ">
<textarea id="descript" class="col-sm-10" rows="20"></textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end container -->
</div
I need a help in aligning the content inside the modal window. Here is the html
<div>
<form name="_form" class="form-horizontal" ng-submit="submit(_form)">
<div class="modal-header">
<button type="button" class="close" ng-click="dismiss()" aria-hidden="true">×</button>
<h3>Chart Settings</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group" >
<label class="control-label col-lg-6 col-md-6">Title</label>
<div class="col-lg-6 col-md-6">
<input name="sizeX" ng-model="chartConfig.title.text"class="form-control" />
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label class="control-label col-lg-6 col-md-6">Subtitle</label>
<div class="col-lg-6 col-md-6">
<input name="sizeY"ng-model="chartConfig.subtitle.text"class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group" >
<label class="control-label col-lg-6 col-md-6">Width</label>
<div class="col-lg-6 col-md-6">
<input name="sizeX" ng-model="chartConfig.size.width"class="form-control" />
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label class="control-label col-lg-6 col-md-6">Height</label>
<div class="col-lg-6 col-md-6">
<input name="sizeY"ng-model="chartConfig.size.height"class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group" >
<label class="control-label col-lg-6 col-md-6">reflow</label>
<div class="col-lg-6 col-md-6">
<button ng-click="reflow()" class="form-control">reflow</button>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label class="control-label col-lg-6 col-md-6">Default Type</label>
<div class="col-lg-6 col-md-6">
<select ng-model="chartConfig.options.chart.type" ng-options="t.id as t.title for t in chartTypes"></select>
</div>
</div>
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Series</span>
<div class="col-md-6">
<div class="form-group row" ng-repeat="ser in chartSeries">
<div class="row-fluid">Title <input ng-model="ser.name"></div>
<div class="row-fluid">Type <select ng-model="ser.type" ng-options="t.id as t.title for t in chartTypes"></select></div>
<div class="row-fluid">Color <input ng-model="ser.color"></div>
<div class="row-fluid">Width <input ng-model="ser.lineWidth"></div>
<div class="row-fluid">Dash Style <select ng-model="ser.dashStyle" ng-options="ds.id as ds.title for ds in dashStyles"></select></div>
<div class="row-fluid"><label><input type="checkbox" ng-model="ser.connectNulls"> interpolate</label></div>
<div class="row-fluid"><button ng-click="removeSeries($index)">Delete</button></div>
</div>
</div>
</div>
<div class="row">
<div class="row"><button ng-click="addSeries()">Add Series</button></div>
<div class="row"><button ng-click="addPoints()">Add Points to Random Series</button></div>
<div class="row"><button ng-click="removeRandomSeries()">Remove Random Series</div>
<div class="row"><button ng-click="toggleHighCharts()">HighChart/HighStock</div>
<div class="row"><button ng-click="replaceAllSeries()">Replace all series</button></div>
<div class="row">Min: <input type="number" ng-model="chartConfig.xAxis.currentMin"></div>
<div class="row">Max: <input type="number" ng-model="chartConfig.xAxis.currentMax"></div>
</div>
</div>
<div class="modal-footer">
<button ng-click="dismiss()" class="btn btn-danger pull-left" tabindex="-1"><i class="glyphicon glyphicon-remove"></i>Cancel</button>
<button type="submit" class="btn btn-danger pull-left" ><i class="glyphicon glyphicon-ok"></i>Save</button>
</div>
</form>
</div>
Output:
I need to align the buttons in the same line as how the input boxes are aligned. how can i do that?
Use ul li instead of div row. Like,
<div class="row">
<ul class="liInline">
<li>
<button ng-click="addSeries()">
Add Series</button></li>
<li>
<button ng-click="addPoints()">
Add Points to Random Series</button></li>
<li>
<button ng-click="removeRandomSeries()">
Remove Random Series</button></li>
<li>
<button ng-click="toggleHighCharts()">
HighChart/HighStock</button></li>
<li>
<button ng-click="replaceAllSeries()">
Replace all series</button></li>
</ul>
</div>
Add CSS to your page for buttons display in one line.
<style type="text/css">
.liInline li
{
display: inline;
margin: 0 5px;
list-style: none;
}
</style>