If I use 2 different instances of TempusDominus Bootstrap4 with different configurations, the result is a mixed UNEXPECTED new configuration for both instances
This is an examples code:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<label for="Periodo" class="control-label labelFiltro">Periodo</label>
<div class="input-group date" id="Periodo" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#Periodo" />
<div class="input-group-append" data-target="#Periodo" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
$(function() {
$('#datetimepicker1').datetimepicker({ useCurrent: false, format: 'MMMM YYYY'});
$('#Periodo').datetimepicker({ useCurrent: false, format: 'L'});
});
See this link for fiddle
I expect that first instance shows me a month calendar and second instance shows me a day calendar.
It seems it's a bug...
Related
I'm currently creating a web app using Razor Pages. I scaffolded the "Project" Model by clicking on "Razor Pages using Entity Framework (CRUD)" which automatically created a "Create", "Edit", "Delete", and "Details" page for my model. However, on my "Create" page it displays like this:
Create Fields Displaying Vertically:
I have a many properties, so this page gets very long and requires a lot of scrolling. Is there a way to make the fields display horizontally something like this:
Create Fields Displaying Horizontally:
I saw a few examples of how to edit the HTML file to achieve this, but I'm new to HTML and because of the automatically generated code I don't know what I need to change. Here's a snippet of the code:
<div class="row">
<div class="col-md-4">
<form method="post">
<b>General:</b>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Project.projectID" class="control-label"></label>
<input asp-for="Project.projectID" class="form-control" />
<span asp-validation-for="Project.projectID" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Project.projectName" class="control-label"></label>
<input asp-for="Project.projectName" class="form-control" />
<span asp-validation-for="Project.projectName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Project.projectManager" class="control-label"></label>
<input asp-for="Project.projectManager" class="form-control" />
<span asp-validation-for="Project.projectManager" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Project.projectClient" class="control-label"></label>
<input asp-for="Project.projectClient" class="form-control" />
<span asp-validation-for="Project.projectClient" class="text-danger"></span>
</div>
</form>
</div>
</div>
Any ideas of how to change the code so my input fields display horizontally?
By default the Asp.net core Application using Bootstrap style, so, you could try to change the code as below:
<h4>General:</h4>
<hr />
<div class="row">
<div class="col-md-12">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Project.projectID" class="control-label col-md-3"></label>
<input asp-for="Project.projectID" class="form-control col-md-9" />
<span asp-validation-for="Project.projectID" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Project.projectName" class="control-label col-md-3"></label>
<input asp-for="Project.projectName" class="form-control col-md-9" />
<span asp-validation-for="Project.projectName" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Project.projectManager" class="control-label col-md-3"></label>
<input asp-for="Project.projectManager" class="form-control col-md-9" />
<span asp-validation-for="Project.projectManager" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label asp-for="Project.projectClient" class="control-label col-md-3"></label>
<input asp-for="Project.projectClient" class="form-control col-md-9" />
<span asp-validation-for="Project.projectClient" class="text-danger"></span>
</div>
</div>
</div>
</form>
</div>
</div>
Then the output as below:
More detail information about Bootstrap style, check Bootstrap 4 Grid System.
I have got this page but for some reason, I see a line in my page.
Here is the code
<div class="tab-pane" id="advanced" ng-hide="sync model">
<div class="col-md-2">
<div class="form-group">
<div class="col-md-12">
<div class="" *ngFor="let options of syncOptionsList">
<div class="col-md-12">
<div class="checkbox abc-checkbox abc-checkbox-info">
<input type="checkbox" name="{{options.value}}" formControlName="{{options.value}}" [value]="options.value" (change)="options.value == 'inplace' ? inplaceCheckBoxHandler($event) : ''"
/>
<label>{{ options.title }}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<p>Include/Exclude Options</p>
<div class="form-group">
<label class="col-md-4 text-right" for="datacopy_file_in">Datacopy File In</label>
<div class="col-md-6">
<input class="form-control" formControlName="datacopy_file_in" placeholder="" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-4 text-right" for="sync_exclude_file">Sync Exclude File</label>
<div class="col-md-6">
<input class="form-control" formControlName="sync_exclude_file" placeholder="" type="text">
</div>
</div>
</div>
</div>
What can I do to make the line go away? I am taking the options using ngfor I used legend and fieldset but its of no avail.
I have two datepickers with different Id's and only one is working with
<div class="form-group">
<label class="col-sm-3 control-label">From</label>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" name="peak_start_date_from" value="" id="start_datepicker" required>
</div>
</div>
Not working
<div class="form-group">
<label class="col-sm-3 control-label">From</label>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" name="peak_start_date_from" value="" id="peak_start_date_from" required>
</div>
</div>
$(document).ready(function() {
$('#peak_start_date_from').datepicker();
});
I have two fieldsets in first div and then im using panel but my panel is covering from above div, Please see the below screen shots
1.) With Filedsets and details
2.) After adding panel, Panel-heading to page it covers the whole content
<div class="container">
<div class="enquiry">
<fieldset class="col-md-12">
<legend><h3>Nag</h3></legend>
<div class="row form-group">
<div class="col-md-4">
<h4>DOB: <span>22-April-2001, Male</span> </h4>
<h4>Enquired: <span>07 </span> </h4>
<h4>Academic Year: <span>2017-2018</span></h4>
</div>
<div class="col-md-4">
<h4>Nagarjuna (Father)</h4>
<h4><i class="fa fa-phone"></i> 9635821471</h4>
<h4><i class="fa fa-envelope"></i> <span class="enq-parent-email">nag.akki#gmail.com</span> </h4>
</div>
<div class="col-md-4">
<h4>
<i class="fa fa-home fa-2x"></i>
</h4>
</div>
</div>
</fieldset>
<fieldset class="col-md-12 margin-bottom">
<legend><h3>Overview</h3></legend>
<div class="row form-group margin-bottom">
<div class="col-md-4">
<label>Current Name: </label>
<input type="text" class="form-control" readonly="" value="Name">
</div>
<div class="col-md-4">
<label>Current Loasdaf Name: </label>
<input type="text" class="form-control" readonly="" value="asdfaiwewrw">
</div>
<div class="col-md-4">
<label>fasdaskdlfa;skdljfa;skldf</label><br>
<input type="radio" name="transport" readonly="" checked=""> Yes
<input type="radio" name="transport" readonly=""> no
</div>
</div>
<div class="row form-group margin-bottom">
<div class="col-md-4">
<label>Current Address: </label>
<input type="text" class="form-control" readonly="" value="#07, Kondar, Melborne-38">
</div>
<div class="col-md-4">
<label>asdfasdfasdf</label>
<input type="text" class="form-control" readonly="" value="asdfasd">
</div>
<div class="col-md-4">
<label>asdfasdfasdfasd</label><br>
<input type="radio" name="visit" readonly="" checked=""> Yes
<input type="radio" name="visit" readonly=""> no
</div>
</div>
<div class="row form-group margin-bottom">
<div class="col-md-4">
<label>asdfasdfasdfa</label>
<input type="text" class="form-control" readonly="" value="asdfasdf">
</div>
<div class="col-md-4">
<label>asdfasdfasdfasd</label>
<input type="text" class="form-control" readonly="" value="asdfasdf">
</div>
<div class="col-md-4">
<label>asdfasdfasdfas</label><br>
<input type="radio" name="visit" readonly="" checked=""> Yes
<input type="radio" name="visit" readonly=""> no
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Enquiry Status </label>
<select class="form-control">
<option value="">Select Status</option>
<option value="Inprogress">Inprogress</option>
<option value="ConvertedtoApplication">Converted to Application</option>
<option value="Cloased, Not Interested"></option>
</select>
</div>
<div class="col-md-8">
<label>Questions ?</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
</fieldset>
</div>
<br>
</div>
This is very strange for me because i never seen such kind of issues.
Waiting for some response, Thanks in Advance!!
You can use row class in bootstrap.try this
<div class="container">
<div class="row">
<div class="enquiry">
<fieldset class="col-md-12">
.................................
</fieldset>
<fieldset class="col-md-12 margin-bottom">
........................................
</fieldset>
</div>
</div>
<div class="row">
<h1>
Add Here your content
</h1>
</div>
</div>
I'm creating a form on my event management system website to allow you to create events. The page is using Bootstrap on the Admin-LTE template.
I have split part of the form into two columns. On the right column is a section to enter the number of spaces on the event and on the left is a section to enter the start and end date and time of the event. I wrote the HTML code for the right side first and am now trying to do the left side, however for some reason the space between the bootstrap rows on the page has changed despite the only different between each side is changing the check box to a number input (I will eventually add a datepicker drop down to this, however the same issue occurred when I tried it previously) and a few others changes in the naming of inputs.
Any suggestions to fix it would be very appreciated!
<div class="box box-primary">
<div class="box-body">
<div class="input-group">
<span class="input-group-addon">Event Title</span>
<input type="text" class="form-control" placeholder="Event Title" id="txtEventTitle">
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Start Date</span>
<input type="number" class="form-control" placeholder="Start Date" id="dteEStart">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Start Time</span>
<input type="number" class="form-control" placeholder="Start Time" id="timeEStart">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">End Date</span>
<input type="number" class="form-control" placeholder="End Date" id="dteEEnd">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">End Time</span>
<input type="number" class="form-control" placeholder="End Time" id="timeEEnd">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<span class="input-group-addon">Male Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEMaleS">
</div>
</div>
<div class="col-lg-4">
<div class="checkbox"><label><input type="checkbox" id="cbxEMaleS">Unlimited Spaces</label></div>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<span class="input-group-addon">Female Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEFemaleS">
</div>
</div>
<div class="col-lg-4">
<div class="checkbox"><label><input type="checkbox" id="cbxEFemaleS">Unlimited Spaces</label></div>
</div>
</div>
</div>
</div>
</div>
</div>
I've switched the way my rows and columns are organised, so that each side is assigned into a row before the left or right columns and therefore the height of the checkboxes will also affect the left side of the page. I then decided to re-order them so it made a bit more sense.
<div class="row">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Start Date</span>
<input type="number" class="form-control" placeholder="Start Date" id="dteEStart">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Start Time</span>
<input type="number" class="form-control" placeholder="Start Time" id="timeEStart">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">End Date</span>
<input type="number" class="form-control" placeholder="End Date" id="dteEEnd">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">End Time</span>
<input type="number" class="form-control" placeholder="End Time" id="timeEEnd">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon">Male Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEMaleS">
</div>
</div>
<div class="col-md-2">
<div class="checkbox"><label><input type="checkbox" id="cbxEMaleS">Unlimited Spaces</label></div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon">Female Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEFemaleS">
</div>
</div>
<div class="col-md-2">
<div class="checkbox"><label><input type="checkbox" id="cbxEFemaleS">Unlimited Spaces</label></div>
</div>
</div>