<div class="container-fluid">
<div class="row">
<div clas="col-sm-4">
<div class="checks">
<span class="title">Appointment</span>
</div>
</div>
<div clas="col-sm-8">
<div class="doctor">
<span class="title">Dr Yogesh Sharma</span><br/>
Speciality: Heart, Brain, ENT<br/>
Experience: 11 years<br/>
Rating: <span>★★★★☆</span> 4/5<br/>
Consultation fee: ₹400 (In-clinic),₹200 (Online)<br/>
<button class="btn btn-success" ">Show Clinic Details</button><br/>
<details>
<summary>More Info... </summary>
Gender: Male
Education: MBBS
</details>
<hr/>
</div>
</div>
</div>
</div>
I have declared container-fluid and row before trying to partiton but it doesnt work. It did the same thing above
<div class="container-fluid">
<div class="form-group row">
<form id="searchbox" action="">
<div class="col-sm-3">
<input class="form-control" id="search" type="text" placeholder="Type here">
</div>
<div class="col-sm-3">
<select class="form-control" id="locality">
<option>Locality</option>
<option>Rohini</option>
<option>Noida</option>
<option>Gurugram</option>
</select>
</div>
<div class="col-sm-3">
<select class="form-control" id="speciality">
<option>Speciality</option>
<option>Dentist</option>
<option>Physician</option>
<option>Surgeon</option>
</select>
</div>
<div class="col-sm-3">
<input class="form-control btn-primary btn" id="submit" type="submit" value="Search">
</div>
</form>
</div>
</div>
and this works
Related
I have this .cshtml page where I am just adding in a functionality. Based on a radio button selection the cards should collapse. So basically if Existing user selected then collapseone opens, if New user selected collapsetwo opens. I even want to see how can i align both the cards horizontally. Let me add snippets & images.
<div class="login-box align-content-center">
<div class="login-logo">
<b>Registration</b>
</div>
<div class="card" style="width: 600px">
<div class="card-body login-card-body">
<p class="login-box-msg"></p>
<div class="card-header">
<h3 class="card-title">Select User Type</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary1" name="r1" checked>
<label for="radioPrimary1">
Existing User
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary2" name="r1">
<label for="radioPrimary2">
New User
</label>
</div>
</div>
</div>
</div>
</div>
<form action="~/Home/Index" method="post">
<section class="content">
<div class="row">
<div class="col-sm-6">
<div class="card card-primary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Existing Company</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="form-group">
<label for="inputCompanyList">Company List</label>
<select id="inputCompanyList" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Company1</option>
<option>Company2</option>
<option>Company3</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
<div class="card card-secondary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Register</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="form-group">
<label for="inputName">Company Name</label>
<input type="text" id="inputName" class="form-control">
</div>
<div class="form-group">
<label for="inputDescription">Zip</label>
<input type="text" id="inputZip" class="form-control">
</div>
<div class="form-group">
<label for="inputCountry">Country</label>
<select id="inputCountry" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>India</option>
<option>Malaysia</option>
<option>Germany</option>
</select>
</div>
<div class="form-group">
<label for="inputCity">City</label>
<select id="inputCity" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Bangalore</option>
<option>Delhi</option>
<option>Mumbai</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Search</button>
</div>
<!-- /.card-body -->
</div>
</div>
</div>
</section>
</form>
</div>
</div>
<!--Register Card-->
</div>
Some snaps:
current output:
Expected output:
Collapsing based on the radio button selection. Thanks for your help !!
You can try to add <div class="col-sm-6"> separately outside card1 and card2 so that you can align both the cards horizontally.And you can use js to open collapses.Here is a demo:
html:
<div class="login-box align-content-center">
<div class="login-logo">
<b>Registration</b>
</div>
<div class="card" style="width: 600px">
<div class="card-body login-card-body">
<p class="login-box-msg"></p>
<div class="card-header">
<h3 class="card-title">Select User Type</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary1" name="r1" checked onchange="show(this)">
<label for="radioPrimary1">
Existing User
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary2" name="r1" onchange="show(this)">
<label for="radioPrimary2">
New User
</label>
</div>
</div>
</div>
</div>
</div>
<form action="~/Home/Index" method="post">
<section class="content">
<div class="row">
<div class="col-sm-6">
<div class="card card-primary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Existing Company</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body collapse show" id="collapse1">
<div class="form-group">
<label for="inputCompanyList">Company List</label>
<select id="inputCompanyList" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Company1</option>
<option>Company2</option>
<option>Company3</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
<!-- /.card-body -->
</div>
</div>
<div class="col-sm-6">
<!-- /.card -->
<div class="card card-secondary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Register</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body collapse" id="collapse2">
<div class="form-group">
<label for="inputName">Company Name</label>
<input type="text" id="inputName" class="form-control">
</div>
<div class="form-group">
<label for="inputDescription">Zip</label>
<input type="text" id="inputZip" class="form-control">
</div>
<div class="form-group">
<label for="inputCountry">Country</label>
<select id="inputCountry" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>India</option>
<option>Malaysia</option>
<option>Germany</option>
</select>
</div>
<div class="form-group">
<label for="inputCity">City</label>
<select id="inputCity" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Bangalore</option>
<option>Delhi</option>
<option>Mumbai</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Search</button>
</div>
<!-- /.card-body -->
</div>
</div>
</div>
</section>
</form>
</div>
</div>
<!--Register Card-->
</div>
js:
<script>
function show(radio) {
if ($(radio).is(':checked')) {
if ($(radio).attr("id") == "radioPrimary1") {
$("#collapse1").addClass("show");
$("#collapse2").removeClass("show");
} else {
$("#collapse1").removeClass("show");
$("#collapse2").addClass("show");
}
}
}
</script>
result:
this button is affecting everything that is in the same line with it, how do i make it fixed without having it affect the things on the same line with it. the fields are affected by the save button. if the save button is is the same line as the form field, it affects the form field
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input type="hidden" asp-for="EmployeeCode" value="#EmpCode" />
</div>
<div class="form-group">
<label asp-for="IndustryId" class="control-label"></label>
<select asp-for="IndustryId" class="form-control" asp-items="ViewBag.IndustryId"></select>
</div>
<div class="form-group">
<label asp-for="SubIndustryId" class="control-label"></label>
<select asp-for="SubIndustryId" class="form-control" asp-items="ViewBag.SubIndustryId">
<option selected> - None - </option>
</select>
</div>
<div class="form-group">
<label asp-for="YearsExp" class="control-label"></label>
<input asp-for="YearsExp" class="form-control" />
<span asp-validation-for="YearsExp" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Proficiency" class="control-label"></label>
<input asp-for="Proficiency" class="form-control" />
<span asp-validation-for="Proficiency" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="BusinessArea" class="control-label"></label>
<input asp-for="BusinessArea" class="form-control" />
<span asp-validation-for="BusinessArea" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Feature" class="control-label"></label>
<input asp-for="Feature" class="form-control" />
<span asp-validation-for="Feature" class="text-danger"></span>
</div>
<div class="fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-right" style="margin-bottom:20px;">
<input type="submit" value="Save Changes" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-right" style="margin-bottom:20px;">
<input type="submit" value="Save Changes" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
I've created a preview here: https://www.bootply.com/eItE7SJoQb
Maybe if you were to place the 'things on the same line' that you don't want it to affect..?
I have this html:
<div id="table_filter" class="dataTables_filter">
<label>
<div id="datatable-search-input-container">
<div class="col-sm-3">
<input type="search" class="datatable-search" placeholder=" Search" aria-controls="table" id="datatable-search-input">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search Name">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search UserName">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search Email">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search Phone Number">
</div>
</div>
<div class="col-sm-12 clearfix" id="datatable-controls">
<div class="pull-right">
<span class="datatable-control-item">
<button type="button" class="btn btn-primary" id="searchButton">Search</button>
</span>
<span class="datatable-control-item">
<button type="button" class="btn btn-outline-secondary" id="resetButton">Reset</button>
</span>
</div>
</div>
</label>
</div>
It generates an a search function like this:
If you take a look at the image, for some reason, my col-sm-3 columns take up an entire row instead of going inline. I have checked the css and nothing is overwriting the widths.
You would need to wrap your col-sm classes in a row one.
Like this
<div id="table_filter" class="dataTables_filter">
<label>
<div id="datatable-search-input-container" class="row">
<div class="col-sm-3">
<input type="search" class="datatable-search" placeholder=" Search" aria-controls="table" id="datatable-search-input">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search Name">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search UserName">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search Email">
</div>
<div class="col-sm-3">
<input type="text" placeholder="Search Phone Number">
</div>
</div>
<div class="row">
<div class="col-sm-12 clearfix" id="datatable-controls">
<div class="pull-right">
<span class="datatable-control-item">
<button type="button" class="btn btn-primary" id="searchButton">Search</button>
</span>
<span class="datatable-control-item">
<button type="button" class="btn btn-outline-secondary" id="resetButton">Reset</button>
</span>
</div>
</div>
</div>
</label>
</div>
If you use Bootstrap 4 (as it seems you are) and you want all the columns to have the same size you also don't need to specify the number, so you could just use col-sm.
I have only one form group. A submit button will only enable if all the form inputs are valid. Yet the submit button already enables halfway through completion. When I try to declare another form tag with the same id, the other half works but the previous half don't. I don't know the proper position of form tags plus I use many tags because of the bootstrap grids.
<div class="row">
<div class="col-md-2">
</div>
<!--MAIN PANEL-->
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="pheading">Create</h1>
</div>
<div class="panel-body">
<div class="row">
</div>
<form name="formCreate" novalidate>
<!--NAME-->
<div class="row">
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Name</legend>
<div class="row">
<div class="fields" align="middle">
<input type="text" class="form-control" name="name" placeholder="Enter name" ng-model="ctrl.person.name" ng-minlength="10" required ng-pattern="/^[a-zA-Z ]*$/">
</div>
</div>
</fieldset>
</div>
<!--BDAY-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Birthday</legend>
<div class="fields" align="middle">
<input type="date" class="form-control" name="bday" ng-model="ctrl.person.birthday" required ng-date>
</div>
</fieldset>
</div>
<!--GENDER-->
<div class="col-md-2">
<fieldset class="well">
<legend align="left">Gender</legend>
<div class="row">
<div class="radios" align="middle">
<label class="radio-inline"><input type="radio" name="gender" value="Male" id="male" ng-model="ctrl.person.gender" required><span>Male</span></label>
<label class="radio-inline"><input type="radio" ng-model="ctrl.person.gender" name="gender" value="Female" id="female" required><span>Female</span></label>
</div>
</div>
</fieldset>
</div>
<!--MARITAL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Marital Status</legend>
<div class="row" align="middle">
<div class="fields" align="middle">
<div>
<select name="status" name="status" ng-model="ctrl.person.maritalStatus" required>
<option selected hidden>Select Status</option>
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Divorced">Divorced</option>
<option value="Separated">Separated</option>
<option value="Widowed">Widowed</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<!--ADDRESS-->
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Address</legend>
<div class="fields" align="middle">
<textarea name="address" rows="3" cols="50" form="formCreate" placeholder="Enter address..." align="middle" ng-model="ctrl.person.address" required></textarea>
</div>
</fieldset>
</div>
<!--TEL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Telephone</legend>
<div class="row">
<div class="fields" align="middle">
<input type="text" class="form-control" name="telephone" placeholder="Enter telephone number" align="middle" ng-model="ctrl.person.telephoneNumber" required ng-pattern="/^[0-9]*$/">
</div>
</div>
</fieldset>
</div>
<!--EMAIL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Email</legend>
<div class="fields" align="middle">
<div class="fields" align="middle">
<input type="email" class="form-control" name="email" placeholder="Enter email" ng-model="ctrl.person.emailAddress" required ng-email>
</div>
</div>
</div>
</fieldset>
<div class="col-md-1">
</div>
</div>
</form>
<!--SUBMIT-->
<button ng-click="ctrl.submitPerson()" onClick="showModal()" class="btn btn-primary" id="sbtn" ng-disabled="formCreate.name.$invalid||formCreate.bday.$invalid||formCreate.gender.$invalid||formCreate.status.$invalid||formCreate.address.$invalid||formCreate.telephone.$invalid||formCreate.email.$invalid">Submit</button>
<!--MODAL-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
</div>
</div>
</div>
</div>
</div>
</div>
Do a code walkthrough and check for the following:
Check and remove unused tag
Place the end tags in proper place
This is a edited code, try this, hope it works!
<div class="row">
<div class="col-md-2">
</div>
<!--MAIN PANEL-->
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="pheading">Create</h1>
</div>
<div class="panel-body">
<form name="formCreate" novalidate>
<!--NAME-->
<div class="row">
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Name</legend>
<div class="row">
<div class="fields" align="middle">
<input type="text" class="form-control" name="name" placeholder="Enter name" ng-model="ctrl.person.name" ng-minlength="10" required ng-pattern="/^[a-zA-Z ]*$/">
</div>
</div>
</fieldset>
</div>
<!--BDAY-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Birthday</legend>
<div class="fields" align="middle">
<input type="date" class="form-control" name="bday" ng-model="ctrl.person.birthday" required ng-date>
</div>
</fieldset>
</div>
<!--GENDER-->
<div class="col-md-2">
<fieldset class="well">
<legend align="left">Gender</legend>
<div class="row">
<div class="radios" align="middle">
<label class="radio-inline"><input type="radio" name="gender" value="Male" id="male" ng-model="ctrl.person.gender" required><span>Male</span></label>
<label class="radio-inline"><input type="radio" ng-model="ctrl.person.gender" name="gender" value="Female" id="female" required><span>Female</span></label>
</div>
</div>
</fieldset>
</div>
<!--MARITAL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Marital Status</legend>
<div class="row" align="middle">
<div class="fields" align="middle">
<select name="status" name="status" ng-model="ctrl.person.maritalStatus" required>
<option selected hidden>Select Status</option>
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Divorced">Divorced</option>
<option value="Separated">Separated</option>
<option value="Widowed">Widowed</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
</form>
</div>
<form name="formCreate" novalidate>
<div class="row">
<div class="col-md-1">
</div>
<!--ADDRESS-->
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Address</legend>
<div class="fields" align="middle">
<textarea name="address" rows="3" cols="50" form="formCreate" placeholder="Enter address..." align="middle" ng-model="ctrl.person.address" required></textarea>
</div>
</fieldset>
</div>
<!--TEL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Telephone</legend>
<div class="row">
<div class="fields" align="middle">
<input type="text" class="form-control" name="telephone" placeholder="Enter telephone number" align="middle" ng-model="ctrl.person.telephoneNumber" required ng-pattern="/^[0-9]*$/">
</div>
</div>
</fieldset>
</div>
<!--EMAIL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Email</legend>
<div class="fields" align="middle">
<div class="fields" align="middle">
<input type="email" class="form-control"
name="email" placeholder="Enter email" ng-model="ctrl.person.emailAddress" required ng-email>
</div>
</div>
</fieldset>
</div>
<div class="col-md-1">
</div>
</div>
</form>
<!--SUBMIT-->
<button ng-click="ctrl.submitPerson()" onClick="showModal()" class="btn btn-primary" id="sbtn" ng-disabled="formCreate.name.$invalid||formCreate.bday.$invalid||formCreate.gender.$invalid||formCreate.status.$invalid||formCreate.address.$invalid||formCreate.telephone.$invalid||formCreate.email.$invalid">Submit</button>
<!--MODAL-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The solution in my problem is simple. just contain the contents of the form in a "div" first and enclose it in the "form" tag
<form>
<div class="form container">
<!-- form elements -->
</div>
</form>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<div class="center-block text-center">
<form asp-controller="Account" asp-action="Login" asp-route-returnurl="#ViewData["ReturnUrl"]" method="post" class="form-horizontal" role="form">
<div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>
<div class="form-group">
<div class="col-md-10">
<input asp-for="Email" placeholder="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input asp-for="Password" placeholder="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<button type="submit" class="btn btn-block">Sign in</button>
</div>
</div>
</form>
<p>
<a asp-controller="Home" asp-action="Register">Sign up</a>
</p>
<p>
<a asp-action="ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-controller="Home" asp-action="Index">Return</a>
</p>
</div>
</div>
<div class="col-md-4">
</div>
</div>
The text is centered, but the form has a width 10/12(83%). You should change the col-md-10 to col-md-12.
<div class="form-group">
<div class="col-md-12">
<input asp-for="Email" placeholder="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input asp-for="Password" placeholder="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-block">Sign in</button>
</div>
</div>
I think that it will be the best to remove the col-md-10 class:
<div class="form-group">
<div class="">
<input asp-for="Email" placeholder="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="">
<input asp-for="Password" placeholder="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-block">Sign in</button>
</div>
</div>