This is my code:
<div class="row">
<div class="col-xs-4">
<h2>Some header text</h2>
</div>
<div id="div1" class="col-xs-8">
<div class="pull-right">
#using (Html.BeginForm("ChangePageSizeAction", "myController"))
{
#Html.AntiForgeryToken()
<small>Page Size</small>
#Html.DropDownList("pageSize", null, htmlAttributes: new { #class = "form-control", onchange = "this.form.submit();" })
}
</div>
<div id="div2" class="pull-right" style="padding-right:10px">
#Html.PagedListPager(Model, page => Url.Action("Index", new { page }),
new PagedListRenderOptions()
{
MaximumPageNumbersToDisplay = 3,
DisplayPageCountAndCurrentLocation = true,
PageCountAndCurrentLocationFormat = "Page {0} of {1}",
})
</div>
</div>
</div>
This is the output:
I want to align the PagedListPager to bottom beside the DropDownList like this:
I tried to set div1 style to position:relative and div2 style to position:absolute; bottom:0 but didn´t work.
After Morpheus comment I looked for the difference in his jsfiddle example and mine, so I found an error (margin:0) in my css classes.
So, sorry for the wrong question.
Related
I am trying to have the Label name on one row and textbox for that name in the second row, meaning, the textbox should be below the label for input.
I can achieve this using Bootstrap with a 3 column labels and 2 column textboxes in the fullscreen, but when i resize the screen, all my labels group up and then the corresponding textboxes below my labels.
My bootstrap code:
<div class="container">
<div class="row">
<div class="col-md-4" >
<strong>Patient’s Last name</strong> <span class="required">*</span>
</div>
<div class="col-md-4" >
#Html.TextBoxFor(m => m.Patient_Lastname, new { #class = "text-primary", required = "required" })
</div>
<div class="col-md-4">
<strong>Patient’s First name</strong> <span class="required">*</span>
</div>
<div class="col-md-4">
#Html.TextBoxFor(m => m.Patient_Firstname, new { #class = "text-primary", required = "required" })
</div>
<div class="col-md-4" >
<strong>Age</strong> <span class="required">*</span>
</div>
<div class="col-md-4" >
#Html.DropDownListFor(m => m.Age, new List<SelectListItem>
{
new SelectListItem{ Text="Under 18", Value = "Under 18"},
new SelectListItem{ Text="18-21", Value = "18-21"},
new SelectListItem{ Text="22-30", Value = "22-30"},
}, "--Select Age--", new { #class = "form-control", required = "required", style = "width: 250px; height:30px;" })
</div>
</div>
</div>
My output as whole screen is, which is perfect:
When I shrink the screensize, it looks like this:
But, the desired output should look like, when screen is resized to minimal :
Any thoughts on the html code ?
Thanks
You should be defining the label and input in the same column:
<div class="col-md-4" >
<strong>Patient’s Last name</strong> <span class="required">*</span>
#Html.TextBoxFor(m => m.Patient_Lastname, new { #class = "text-primary", required = "required" })
</div>
<div class="col-md-4">
<strong>Patient’s First name</strong> <span class="required">*</span>
#Html.TextBoxFor(m => m.Patient_Firstname, new { #class = "text-primary", required = "required" })
</div>
I want to use label as used "Static Control" label on that page. However, although I use the same Bootstrap version, I cannot aligned my form controls like that (I want the label is right float, data fields is left float -side by side - and there is a ":" sign between them. Howwver, the result is as shown on the image below. Could you please have a look at my code and inform what is wrong?
The code on that page:
<div class="form-group">
<label class="col-md-3 control-label">Static Control</label>
<div class="col-md-9">
<p class="form-control-static"> email#example.com </p>
</div>
</div>
The code I use on my Razor page:
<div class="form-group">
#Html.LabelFor(m => m.Name, new { #class = "col-md-3 control-label" }):
<div class="col-md-9">
#Html.DisplayFor(m => m.Name, new { #class = "form-control-static" })
</div>
</div>
<br />
<div class="form-group">
#Html.LabelFor(m => m.Surname, new { #class = "col-md-3 control-label" }):
<div class="col-md-9">
#Html.DisplayFor(m => m.Surname, new { #class = "form-control-static" })
</div>
</div>
You have two elements which equal 100% width plus the colon, so it pushes the value down a line. You'll need to just code the label instead of using an HtmlHelper to add the colon. Change it to this:
<div class="form-group">
<label class="col-md-3 control-label">#Model.Name:</label>
<div class="col-md-9">
#Html.DisplayFor(m => m.Name, new { #class = "form-control-static" })
</div>
</div>
Here is the final solution fixed the problem. Thanks a lot for all of your helps...
<style>
.col-sm-3 .control-label {
float: right !important;
margin-top: 0 !important;
}
/*Add colon ( : ) to the end of labels */
.col-sm-3 > label:after {
content: " :";
}
</style>
<div class="form-group">
<div class="col-sm-3">
#Html.LabelFor(m => m.Name, new { #class = "control-label" })
</div>
<div class="col-sm-9">
#Html.DisplayFor(m => m.Name)
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-3">
#Html.LabelFor(m => m.Surname, new { #class = "control-label" })
</div>
<div class="col-sm-9">
#Html.DisplayFor(m => m.Surname)
</div>
</div>
<br />
I have a view (refer below code) , but the datetimepicker is stretching , now to removed the stretching. May be this is due to the bootstrap table . Need some guide to display the datetimepicker in the elegant way.
<div class="container">
<div class="clearfix"></div>
#using (Html.BeginForm("Create", "DoctorPayment"))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
#*<legend>DoctorPayment</legend>*#
<div class="panel">
<div class="panel-body">
...
<div class="row">
<div class="col-lg-3 pull-left">
<div class="editor-label">
#Html.LabelFor(model => model.PaymentDate)
</div>
</div>
<div class="col-lg-9">
<div class="editor-field">
#Html.EditorFor(model => model.PaymentDate)
#Html.ValidationMessageFor(model => model.PaymentDate)
</div>
</div>
<div class="col-lg-1">
</div>
</div>
<div style="margin-top: 5px"></div>
....
</div>
<p>
<input type="submit" value="Create" />
</p>
</div>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
....
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Styles.Render("~/Content/boostrap")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/cssjqryUi")
<script type="text/javascript">
$(document).ready(function () {
$('input[type=datetime]').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});
});
$('#PaymentDate').datepicker({
showButtonPanel: false,
beforeShow: function () {
$(".ui-datepicker").css('font-size', 12)
}
});
$("#PaymentDate").click(function () {
$("#ui-datepicker-div")
// BTW, min-width is better:
.css("min-width", $(this).outerWidth() + "px");
});
</script>
}
}
</div>
I have included bootstrap to it.
I believe that you might have overwritten something in css, or added some atributes.
Try this and see if it works.
$("#dropdown").closest("span.k-dropdown").width(400);
If it does, try to add a custom class to the datepicker so that you don't edit all dropdowns.
Also, changing the font size will change the size of the datepicker.
$('#PaymentDate').datepicker({
showButtonPanel: false,
beforeShow: function () {
$(".ui-datepicker").css('font-size', 12)
}
});
$("#PaymentDate").click(function () {
$("#ui-datepicker-div")
.css("max-width", $(this).outerWidth() + "px");
});
I am using ajax.beginform to make an ajax login popup.
Everything works fine the first time, but when I submit a second time (after an error message from model validation) it no longer updates my div with the content but refreshes the page and shows the partial view in a blank page. It's not doing the ajax anymore.
I have included all javascripts needed.
My partial view:
#using (Ajax.BeginForm("Login", "Account", null, new AjaxOptions
{
UpdateTargetId = "login-partial-update",
HttpMethod = "POST",
OnSuccess = "loginSuccess"
}, new { id = "js-form-login" }))
{
<div class="fluid-row-margin">
<div class="cell12">
#Html.TextBoxFor(x => x.Email, new { placeholder = "Email address" })
<div class="errormessage">
#Html.ValidationMessageFor(x => x.Email)
</div>
</div>
</div>
<div class="fluid-row-margin">
<div class="cell12">
#Html.PasswordFor(x => x.Password, new { placeholder = "Password" })
<div class="cell12 errormessage">
#Html.ValidationMessageFor(x => x.Password)
</div>
</div>
</div>
<div class="fluid-row-margin">
<div class="cell1">
#Html.CheckBoxFor(x=>x.RememberMe)
</div>
<div class="cell11">Remember me</div>
</div>
<div class=" errormessage">
#if (Model.HasErrors)
{
<br />#Model.ErrorMessages
}
</div>
}
<script type="text/javascript">
$.validator.unobtrusive.parse("#js-form-login");
</script>
My parent view includes this partial
<div id="login-partial-update">
#Html.Partial("Widgets/Login/_LoginInput", new LoginInputModel())
</div>
All this is happening inside a javascript modal dialog
I have the following code :-
#foreach (var item in Model)
{
<div class="comment-box">
<div class="comment-head">
<div class="comment-name">
#item.FromUser
</div>
<div class="comment-date">
#item.DaysAgo
</div>
</div>
<div class="comment-content">
#item.Message
</div>
</div>
}
I want to show this by webgrid. But problem is webgrid shows the data in columns, how to do it in div structure.
This is my new code for using webgrid :-
#{
var grid = new WebGrid(Model);
}
<div>
#grid.GetHtml()
</div>
The following thing worked for me :-
#{
var grid = new WebGrid(Model);
}
<div>
#grid.GetHtml(tableStyle: "table-comment",
columns: grid.Columns(
grid.Column("", "", #<text><div class="comment-box">
<div class="comment-head">
<div class="comment-name">
#item.FromUser
</div>
<div class="comment-date">
#item.DaysAgo
</div>
</div>
<div class="comment-content">
#item.Message
</div>
</div></text>)))
</div>