Hi I am developing MVC4 application. I have one main div inside that I have three div tags. First two div tags are displaying correctly as per my requirement. However my third div tag appears in right middle. I want it in left bottom side. I tried all the ways.
<div id="dialog" class="doc-verification-outer">
<div id="data" style="width:70%;height:inherit;float:left" class="doc-verification"></div>
<div id="details" width="30%" style="float:right;height:50%; width:30%"></div>
<div id="dialog-form" title="Reject Reason">
<div style="height:200px;">
<input type="hidden" value="_upload_id" id="id" />
<br />
<label for="name">Select your reason</label>
<select id="comments">
<option value="1">Incorrect Document</option>
<option value="2">document is not clear</option>
<option value="3">document is not valid</option>
<option value="4">other document</option>
</select>
<input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="float:right;">
</div>
</div>
</div>
Can someone give some insights regarding this? Thank you very much...
You can try this:
<div id="dialog" class="doc-verification-outer">
<div id="data" style="width:70%;height:inherit;float:left" class="doc-verification"></div>
<div id="details" width="30%" style="float:right;height:50%; width:30%"></div>
<div id="dialog-form" title="Reject Reason">
<div>
<input type="hidden" value="_upload_id" id="id" />
<br />
<label for="name">Select your reason</label>
<select id="comments">
<option value="1">Incorrect Document</option>
<option value="2">document is not clear</option>
<option value="3">document is not valid</option>
<option value="4">other document</option>
</select>
</div>
<div style="margin-top:5px;"><input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="margin-left:122px;"></div>
</div>
</div>
I think you also need to split the third div into two parts so the right part should align with your second div
Try this :
<div id="dialog" class="doc-verification-outer">
<div id="data" style="width:70%;height:inherit;float:left" class="doc-verification">First DIV</div>
<div id="details" width="30%" style="float:right;height:50%; width:30%">Second div</div>
<div style="clear:both"></div>
<div id="dialog-form" title="Reject Reason">
<div style="height:200px;">
<div style="width:70%;display:inline-block">
<input type="hidden" value="_upload_id" id="id" />
<br />
<label for="name">Select your reason</label>
<select id="comments">
<option value="1">Incorrect Document</option>
<option value="2">document is not clear</option>
<option value="3">document is not valid</option>
<option value="4">other document</option>
</select>
</div>
<div style="width:29%;display:inline-block">
<input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="float:left;">
</div>
</div>
</div>
</div>
Related
I have tried to place a search form into 2 parent divs. Whether I try the align or justify utility neither of them are able to center the search bar in the middle of the page, where I want it.
<div class="col">
<div class"container-fluid justify-content-center" id="searchform">
<form class="form-floating form-control-sm" id="form">
<div class="row " id="div_main">
<div class="col-auto " id="div_Location">
<label for="Location">Hunt Location</label><br>
<select name="cars" id="Location">
<option value="Gauteng">Gauteng</option>
<option value="Western Cape">Western Cape</option>
<option value="Northern Cape">Northern Cape</option>
<option value="North West">North West</option>
<option value="Limpopo">Limpopo</option>
<option value="Free State">Free State</option>
<option value="Mpumalanga">Mpumalanga</option>
<option value="Eastern cape">Eastern Cape</option>
<option value="Kwa-zulu Natal">kwa-zulu Natal</option>
</select>
</div>
<div class="col-auto" id="div_Animal">
<label for="Animal">Animal</label><br>
<select name="Animals" id="Animal">
<option value="" id="ListAnimal"></option>
</select>
</div>
<div class="col-auto" id="div_Check-in">
<label for="Check-in">Check-in</label>
<input type="date" class="form-control" id="Check-in" placeholder="Check-in" value="">
</div>
<div class="col-auto" id="div_Check-out">
<label for="floatingInputValue">Check-out</label>
<input type="date" class="form-control" id="Check-out" placeholder="Check-out" value="">
</div>
<div class="col-auto" id="div_Hunters">
<label for="Hunters">Hunters</label>
<input type="number" class="form-control" id="Hunters" placeholder="5" value="">
</div>
<div class="col-auto">
<button type="button" class="btn btn-dark d-iline" id="searchbutton"><img src="img/search.png"></img></button>
</div>
</div>
</form>
</div>
</div>
The default behavior of col is to take up 100% of the available space, so justify-content-center won't have any meaningful effect as the column is already at a width of 100% and cannot be centered relative to the parent container.
If we clean up your code the results you expect can be achieved fairly easily (Note: You will need to run this snippet full screen to see it centered).
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-auto" id="search-form">
<form class="form-floating form-control-sm" id="form">
<div class="form-row" id="div_main">
<div class="col-auto" id="div_Location">
<label for="Location">Hunt Location</label><br>
<select name="cars" id="Location" class="custom-select">
<option value="Gauteng">Gauteng</option>
<option value="Western Cape">Western Cape</option>
<option value="Northern Cape">Northern Cape</option>
<option value="North West">North West</option>
<option value="Limpopo">Limpopo</option>
<option value="Free State">Free State</option>
<option value="Mpumalanga">Mpumalanga</option>
<option value="Eastern cape">Eastern Cape</option>
<option value="Kwa-zulu Natal">kwa-zulu Natal</option>
</select>
</div>
<div class="col-auto" id="div_Animal">
<label for="Animal">Animal</label><br>
<select name="Animals" id="Animal" class="custom-select">
<option value="" id="ListAnimal"></option>
</select>
</div>
<div class="col-auto" id="div_Check-in">
<label for="Check-in">Check-in</label>
<input type="date" class="form-control" id="Check-in" placeholder="Check-in" value="">
</div>
<div class="col-auto" id="div_Check-out">
<label for="floatingInputValue">Check-out</label>
<input type="date" class="form-control" id="Check-out" placeholder="Check-out" value="">
</div>
<div class="col-auto" id="div_Hunters">
<label for="Hunters">Hunters</label>
<input type="number" class="form-control" id="Hunters" placeholder="5" value="">
</div>
<div class="col-auto align-self-end">
<button type="button" class="btn btn-dark" id="searchbutton">Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
First I've applied the correct Grid components of container-fluid and row to make sure that everything is lined up as one would expect within Bootstrap. You may have omitted that for brevity but I wanted to make sure it was shown.
Changing .col to .col-auto will allow the form's parent element to take up only as much width as needed, which will allow justify-content-center to center the column when applied to row.
If you don't want to apply that class to the row wrapper, you can apply mx-auto to the col-auto wrapper.
A couple of house-keeping notes:
As isherwood stated in the comments, your original use of an additional container element is not needed, and is in fact frowned upon as it can result in unexpected issues.
The <img> tag is self-closing, meaning you should format it either as <img src="..." /> or without the self-closing slash. </img> does not exist.
This is my code I'm using, can anyone tell me how can I align my caterer and the dropdown menu. I got 5 screens some of them I manage to align but in this screen, I have no idea of how to do it.
<div class="row ">
<div class="col-md-12">
<div class="card m-b-30">
<div class="card-header">
<h5 class="card-title">RESERVATION COMPLETION</h5>
</div>
<div class="card-body">
<form id="form" enctype="multipart/form-data">
<input type="hidden" id="Id" />
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="Category">Caterer</label>
<select class="form-control js-example-basic-single" id="data-packagetypes-caterercombo" style="width:200px;">
<option value="">Golden Crown</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="ReservationNo">Reservation No</label>
<select class="form-control js-example-basic-single" id="data-reservationcompletion-combo" style="width:200px;" required>
<option value="">--Select--</option>
</select>
</div>
</div>
</div>
<button type="submit" id="btnSubmit" class="btn btn-dark">Complete Reservation</button>
<button type="reset" id="btnClear" class="btn btn-dark">Clear</button>
</form>
</div>
</div>
</div>
</div>
In First Line Of code div class="row ". you Can Add align="center" Like This
<div class="row " align="center">
See Example
I am facing this issue again with the alignment which I am unable to rectify. I don't know what I am missing out. Please find the plunkr [https://plnkr.co/edit/UD0YZQhgOjIoJ1nqg7sb?p=preview] .Please maximise the plunkr output for the actual output I am getting. Any help people?
Html code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="headerCtrl">
<div class="container" style="padding-top:20px;">
<div ng-app="TimeSheet" data-ng-controller="headerCtrl" class="container" style="margin-top:60px">
<div ng-show="error" class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<p>{{ error }}</p>
</div>
<!--<p><a data-ng-click="showadd()" href="javascript:;" class="btn btn-primary">Generate Report</a></p>-->
<div class="panel panel-default">
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-horizontal">
<div class="form-group">
<label for="title" class="col-sm-5 control-label">UserID</label>
<div class="col-sm-4">
<select data-ng-model="user.userid" class="form-control" id="title" required>
<option value="" selected="selected">(Select User ID)</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
<option value="user3">user3</option>
<option value="user4">user4</option>
</select>
<!--<input type="text" data-ng-model="user.userid" class="form-control" id="title" placeholder="Enter your User ID" required title="Enter your UserID" />-->
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-5 control-label">Status</label>
<div class="col-sm-4">
Active
<input name="Status" type="radio" data-ng-model="user.ResultStatus" value="Active" required title="Choose status"> In-Active
<input name="Status" type="radio" data-ng-model="user.ResultStatus" value="InActive" required title="Choose status">
</div>
</div>
<div class="form-group">
<label for="startDate" class="col-sm-5 control-label">Date</label>
<div class="col-sm-4">
<input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" required />
<!--<input type="text" data-ng-model="user.projectid" class="form-control" id="title" placeholder="Enter your Project ID" required title="Enter your ProjectID" />-->
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-4">
<span data-ng-hide="editMode">
<input type="submit" value="Generate" ng-disabled="adduserform.$invalid" data-ng-click="add()" class="btn btn-primary" />
</span>
<span data-ng-show="editMode">
<input type="submit" value="Update" ng-disabled="adduserform.$invalid" data-ng-click="update()" class="btn btn-primary" />
</span>
<input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
you can see the alignment issue here in this image below
To make the date input span the whole width, you need the .form-control class on it.
<input name="startDate" data-ng-model="user.date" id="startDate" class="form-control date-picker" required />
Also note that the <input> tag must have a type attribute with it.
You have a container within a container for your timesheet div. Removing the .container class from the timesheet div fixes the alignment issue.
Also, put the <table> in a row and a column:
<div class="row">
<div class="col-md-12">
<!-- Your table here -->
<table class="table table-hover">
...
</table>
</div>
</div>
See it working here.
I have a form on a HTML document with this header
<form target="_blank" action="" id="form-find-your-program">
and I have an input button within it
<input type="submit" id="submit" class="readmore" value="Submit">
and then the closing tag after the input button:
</form>
The problem is that the form is not closing as I assume because I have another form after it, that is submitting with this one.
This is the complete code:
<div class="row">
<find_program_form_home>
<div class="custom form_colors_invert">
<form target="_blank" action="" id="form-find-your-program">
<div class="six columns noleftmargin">
<h5 class="sidebartitle">Find Your Program</h5>
</div>
<div class="four columns">
<select class="custom dropdown" id="findProgramSelectProgram" required="" title="Select a Program">
<option value="">Select a Program</option>
<option value="Undergraduate">Undergraduate</option>
<option value="Graduate">Graduate</option>
</select>
</div>
<div class="four columns">
<select class="custom dropdown" id="AreaOfStudyAll" required="" title="Area of Study">
<option value="">Area of Study</option>
<!--<option class="dd-undergraduate" disabled="disabled" value="">Undergraduate</option> -->
<option class="dd-undergraduate" value="something.html">something</option>
</select>
</div>
<div class="four columns">
<input type="submit" id="submit" class="readmore" value="Submit">
</div>
</form>
</find_program_form_home>
</div>
<div class="six columns noleftmargin">
<h5 class="sidebartitle">Online Course Catalog</h5>
<p>
Search our registration catalog to find upcoming online courses.
</p>
</div>
</div>
Any ideas why?
I'm trying to get the label and input and icon all on the same row in a sidebar widget area. this is what it should look like (edit: not sure why but image shows in chrome but not FF on SO)
This is what I have so far. I can't seem to get the labels and inputs on the save row. they keep wrapping around.
Here's a fiddle
http://jsfiddle.net/#&togetherjs=p6omqsAoyN
Here's the HTML. Can anyone tell me how to get them all on the same row so that it looks like the image above?
<div class="roster-reports module">
<h3>Reports</h3>
<div class="upper" >
<h5 class="strong">Generate Report</h5>
<ul class="row-fluid stat-pending">
<li class="span4">
<label for="inputReportFromDate" class="control-label">From Date</label>
</li>
<li class="span4">
<input type="date" class="form-control" width="2" id="inputReportFromDate">
</li>
<li class="span4">
<i class=" icon-calendar"></i>
</li>
</ul>
<div class="">
<div class="">
<label for="inputReportToDate" class="control-label">To Date</label>
</div>
<div class="">
<input type="date" class="form-control" id="inputReportToDate">
<i class="icon-calendar"></i>
</div>
</div>
<div class="">
<div class="">
<label for="selectReportType" class="control-label">Report Type</label>
</div>
<div class="">
<select id="inputReportType" class="form-control">
<option value="Query History">Query History</option>
<option value="DAS Alerts">DAS Alerts</option>
</select>
</div>
</div>
<div class="">
<div class="">
<label for="selectReportType" class="col-lg-2 control-label">Report Format</label>
</div>
<div class="">
<select id="selectReportFormat" class="form-control">
<option value="PDF">PDF</option>
<option value="CSV">CSV</option>
<option value="XLXS">XLXS</option>
</select>
</div>
</div>
<div class="">
<div class="">
<button id="buttonRosterReportsGenerate" type="submit" class="btn btn-primary">Generate</button>
</div>
</div>
</div>
</div>
I am not sure what you mean exactly by "sidebar widget area", but the common way to achieve what you want in bootstrap is using .form-group elements inside a .form-horizontal <form>. Modified markup :
<div class="roster-reports module">
<h3>Reports</h3>
<div class="upper">
<form class="form-horizontal" role="form">
<div class="form-group">
<h5 class="strong">Generate Report</h5>
</div>
<div class="form-group">
<label for="inputReportFromDate" class="control-label">From Date</label>
<input class="form-control" id="inputReportFromDate" type="date" width="2"/>
<i class=" icon-calendar"></i>
</div>
<div class="form-group">
<label for="inputReportToDate" class="control-label">To Date</label>
<input class="form-control" id="inputReportToDate" type="date"/>
<i class=" icon-calendar"></i>
</div>
<div class="form-group">
<label for="selectReportType" class="control-label">Report Type</label>
<select class="form-control" id="inputReportType">
<option value="Query History">Query History</option>
<option value="DAS Alerts">DAS Alerts</option>
</select>
</div>
<div class="form-group">
<label for="selectReportType" class="control-label">Report Format</label>
<select class="form-control" id="selectReportFormat">
<option value="PDF">PDF</option>
<option value="CSV">CSV</option>
<option value="XLXS">XLXS</option>
</select>
</div>
<div class="form-group">
<label class="control-label"></label>
<button class="btn btn-primary" id="buttonRosterReportsGenerate" type="submit">Generate</button>
</div>
</form>
</div>
</div>
see fiddle -> http://jsfiddle.net/h159f8nw/
As I wrote, I am not sure how you want to use this, the fiddle does not completely fulfill the position of "Generate Report" as in the image, but .form-group and .form-horizontal is defently the way to go.