I'm battling to get a dropdownlist and button on the same line in a bootstrap modal. I've tried using <,span> but it doesn't work.
<div class="col-md-12 hSpacerMob">
<div class="well">
using (Html.BeginForm("AddPlayerSignup", "SignupSheet"))
{
#Html.DropDownList("Member", tournament.SignupSheet.GroupMembers)
<span>
#Html.SubmitButton("Add", true, new { #class = "btn btn-primary" })
</span>
}
#Html.ActionLink("Pause", "ChangeState", "SignupSheet", new { Paused = true }, new { #class = "btn btn-warning" })
</div>
</div>
So I need the dropdown and 'Add' button on the same line next to each other and the pause button below, but as it stands they're just displayed below each other.
edit: I tried using row but that also does not work
<div class="row">
<div class="col-md-6">
#Html.DropDownList("Member", ladder.SignupSheet.GroupMembers, new {label = "Members", #class = "pull-left form-control", #style = "width:200px"})
</div>
<div class="col-md-6">
#Html.SubmitButton("Add member", true, new {#class = "btn btn-primary"})
</div>
</div>
bootstrap has input groups for combining inputs and buttons that you might want to try
<div class="input-group">
#Html.DropDownList("Member", tournament.SignupSheet.GroupMembers)
<div class="input-group-btn">
#Html.SubmitButton("Add", true, new { #class = "btn btn-primary" })
</div>
</div>
I finally figured out the problem! My submit button has a 'true' overload for the 'container' bool, when it should be false. Having it set to true added the 'form actions' styling which adds a margin-top:30px element. So as soon as I set that to false it works.
<div class="row">
<div class="col-md-6">
#Html.DropDownList("Member", ladder.SignupSheet.GroupMembers, new {label = "Members", #class = "pull-left form-control", #style = "width:200px"})
</div>
<div class="col-md-6">
#Html.SubmitButton("Add member", false, new {#class = "btn btn-primary"})
</div>
</div>
Related
i'm new to the ASP.net and i get easilly confused when jquery and Ajax get in the middle of a code.
I have a popup bootstrap Modal that show when i click on a button, the Modal contains an Ajax.form that allows me to create projects, i'm using HTML.validation to check if my form is filled correctly. I have two main problems :
When I enter valid informations in my form and i submit the form, the project is created succesfully but the Modal doesn't close automaticlly.
When i enter non-valid informations when i submit no message error apear, nonetheless when I close the modal and open it again, the errors apear.
I need your help to :
Close the modal once the submit form is valid.
Have the error message show in my modal form.
*This is a part of my main view :
enter code here
<!--validation script -->
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<!-- Button trigger modal -->
<div>
<div>
<a class="btn btn-red ms-auto my-auto h-50"
href="#Url.Action("createProject", "ProjectSelection")" title="Nouveau projet"
data-bs-toggle="modal" data-bs-target="#Modal_NewProject"
ajax-target-id="Body_NewProject" data-bs-loader="Loader_NewProject">
<i class="feather-16" data-feather="plus"></i>
Créer projet
</a>
</div>
</div>
<br />
<!-- Modal View -->
<div class="modal fade" id="Modal_NewProject" tabindex="-1"
aria-labelledby="Label_NewProject" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Label_NewProject">
Créer un Projet</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
#using (Ajax.BeginForm("createProjectPost",
"ProjectSelection", new AjaxOptions { HttpMethod = "POST",
UpdateTargetId = "Body_NewProject" }, new { id = "projectForm" }))
{
<div id="Body_NewProject">
<div class="spinner-border" role="status"
id="Loader_NewProject">
<span class="visually-hidden">Loading...</span>
</div>
<!-- partial view "createProject" -->
</div>
}
</div>
</div>
</div>
<!---->
*And this is my partial view that containts the elements of the form
<div class="modal-body" id="frmProject">
<div class="input-group mb-3" id="">
#Html.DropDownListFor(m => m.Project.Domain,
new SelectList(Model.Domains, "IdDomain", "Name"),"Selectionner un domaine",
new { #class = "w-100", #id = "DomainSelection" })
#Html.ValidationMessageFor(m => m.Project.Domain, null,
new { style = "color: red;" })
</div>
<div class="input-group mb-3 mb-3 " id="teamSelection">
#Html.DropDownListFor(m => m.Project.Teams,
new SelectList(Model.Teams.Select(teamElement => teamElement.Name).ToList()),
"Selectionner une équipe", new { #class = "w-100" })
#Html.ValidationMessageFor(m => m.Project.Teams, null,
new { style = "color: red;" })
</div>
<div class="form-floating mb-3">
<input class="form-control " data-val-required="Le champ Projet est requis."
id="Project.Name" name="Project.Name" type="text" value="">
<label for="Project.Name" class="">Nom du projet</label>
#Html.ValidationMessageFor(m => m.Project.Name, null,
new { style = "color: red;" })
</div>
</div>
<div class="modal-footer mb-0">
<div class="panel-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal"
type="button">Annuler</button>
<button type="submit" form="projectForm"
class="btn btn-red">Valider</button>
<div class="col-xs-10" id="lblstatus"></div>
</div>
</div>
*This is my Controller code
public ActionResult createProject()
{
//initialization code
return PartialView();
}
[HttpPost]
[ValidateAntiForgeryToken]
[HandleError]
public ActionResult createProjectPost(Project project)
{
#region Variable verification
if (!ModelState.IsValid)
{
Session["Error"] = true;
if (project.Domain == null)
{
Session["DomainError"] = true;
}
if (project.Teams == null)
{
Session["TeamError"] = true;
}
if (project.Name == null)
{
Session["NameError"] = true;
}
ViewData["project"] = "create";
//return View("ProjectSelectionPage");
return PartialView(project);
}
#endregion
#region Initialisation
//initilization code
#endregion
#region Check possible copy of the project
if (projectDB.Exist(project.Name))
{
//Check that this project doesn't exist in the database
//Create a session variable that will trigger an error message
Session["Error"] = true;
Session["NameCopy"] = true;
ViewData["project"] = "create";
return PartialView(project);
}
#endregion
#region Project to database and generate name
//Add the project to the database
#endregion
return PartialView();
}
It's been several days since i'm searching for an answer, i either missed one or didn't use it correctly.
enter image description here
Thank you
So I have a form with a couple inputs and their labels in an ASP.NET view, but the labels that are multiple words, get broken into multiple lines in full scale (if it's one very long word it doesn't so the length shouldn't be a problem), and I'd like to have it as one line.
Here's an example:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
<div class="container">
<div class="row ">
<div class="col-lg-4 col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.MyAttr,"MyLabel", htmlAttributes: new { #class = "control-label col-md-1 label-operation" })
<div class="col-md-12">
#Html.EditorFor(model => model.MyAttr, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MyAttr, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.MyAttr2, "My Label Two", htmlAttributes: new { #class = "control-label col-md-1 label-operation" })
<div class="col-md-12">
#Html.EditorFor(model => model.MyAttr2, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MyAttr2, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
</div>
}
(The label-operation CSS class is my own,so far it only has the font-size set in it)
.label-operation {
font-size: 12px;
}
UPDATE
As suggested, I have tried different col-md values before, the next happens:
I have seen your code Maybe this is because you are using the "col-md-1" class in code that makes the width responsive in tabs and other devices but not on a desktop browser.
#Html.LabelFor(model => model.MyAttr2, "My Label Two", htmlAttributes: new { #class = "control-label label-operation" })
So what I ended up doing is get rid of the "col-md-1" entirely and set the left padding in my custom ".label-operation" CSS class to 15px. Now the labels look as intended in both full scale and in responsive cases.
The class .form-group functions in a way the same as a row would. As the form field them selfs are already quite small the class .col-md-1 made sure the label is only 1/12th of that rows width.
As on why the first element doens't display every small, it's because it contains no breaking spaces, so it remains on one line.
To fix this you could change the class .col-md-1 to .col-auto, which would make the column af wide as the content.
HTML Body, Ty For help me.
<div class="bottoms_list">
<div class="One cell">
<button class="active"><span><i class="Picture"></i></span>1</button>
</div>
<div class="Two cell">
<button class=""><span><i class="Picture"></i></span>2</button>
</div>
<div class="three cell">
<button class=""><span><i class="Picture"></i></span>3</button>
</div>
<div class="four cell">
<button class=""><span><i class="Picture"></i></span>4</button>
</div>
</div>
Here button (1) is active.
Let's say I want to activate button (2).
I tried:
Dim spanpic As String = ""
For Each choice As HtmlElement In Form1.WebBrowser1.Document.GetElementsByTagName("div")
If choice.GetAttribute("className").Contains("bottoms_list") AndAlso choice.Id.StartsWith("2") Then
spanpic = choice.Id
For Each elm As HtmlElement In choice.Document.GetElementsByTagName("button")
If elm.GetAttribute("className") = "button" Then
elm.InvokeMember("click")
Exit For
End If
Next
End If
Next
'''''''''''''''''
Threading.Thread.Sleep(100)
Try
For Each elm As HtmlElement In
Form1.WebBrowser1.Document.GetElementById(spanpic).Document.GetElementsByTagName("button")
If elm.GetAttribute("className") = "bottoms_list" Then
If elm.GetAttribute("disabled") = "disabled" Then
Else
Exit For
End If
End If
Next
Catch
End Try
That's all I know, and I don't have good experience with element ids......................................
Try this :
"get collection of all div in the webpage"
For Each divSect As HtmlElement In WebBrowser1.Document.GetElementsByTagName("div")
"get the div which has the tag of Two Cell"
If divSect.OuterHtml.Contains("Two Cell") then
"get the button inside the div which has the tag of Two Cell"
For Each elem as HtmlElement In divSect.children
If elem.GetAttribute("className") = "button" Then
elem.InvokeMember("click")
End if
Next
End if
Next
I hope those code could solve your problem.
look I'm not an expert either, but if you want to set a class "active" to the pressed button, then you should use class binding techniques in most of java-script frameworks.
For me I use VueJs and here's how I would do it:
HTML Body:
<div id="myList">
<div class="bottoms_list">
<div class="One cell">
<button #click="isActive = 1" :class="{active: isActive == 1}"><span><i class="Picture"></i></span>1</button>
</div>
<div class="Two cell">
<button #click="isActive = 2" :class="{active: isActive == 2}"><span><i class="Picture"></i></span>2</button>
</div>
<div class="three cell">
<button #click="isActive = 3" :class="{active: isActive == 3}"><span><i class="Picture"></i></span>3</button>
</div>
<div class="four cell">
<button #click="isActive = 4" :class="{active: isActive == 4}"><span><i class="Picture"></i></span>4</button>
</div>
</div>
</div>
then your Vue instance should look like this :
new Vue({
el: '#myList',
data: {
isActive: 0,
},
});
You can optimize this code to one line using the v-for directive.
Very strange issue is occurring and has to do with my browsers capability to remember passwords. So I have a few login details and have rememberd them upon login. I move to the area of the site where I manage users. There is a field for their initials, and after that is a password field. If I double click in the initials input field I get a list of a all usernames that I login to the site with. If I select one it will autocomplete the below password field with the relevant stored password.
My Question is how can I disable this once logged in? I set the form and both inputs autocomplete attribute to off, still no success. I know it has to do with the fact that the browser (FireFox) see's a password field and "Assumes" the prior field is the username field. This is a extremely huge assumption. If I change the input type to text the autocompleteing does not work. So its all based on the fact that its a password field and the prior text input must be the username. The changing of the fields ids don't change anything
Below Is the form and fields:
<div class="row">
#using (Html.BeginForm("UserCreate", "Account", FormMethod.Post, new { id = "UserCreateForm", autocomplete = "off" }))
{
<div class="col-md-6">
#Html.LabelFor(model => model.Initial, htmlAttributes: new { #class = "col-md-4" })
<div class="col-md-8 popovers" data-container="body" data-trigger="hover"
data-placement="top" data-content="Required">
#Html.EditorFor(model => model.Initial, new { htmlAttributes = new { #class = "form-control", autocomplete = "off" } })
#Html.ValidationMessageFor(model => model.Initial, "", new { #class = "text-danger" })
</div>
</div>
<!--/span-->
<div class="col-md-6">
#Html.LabelFor(model => model.Password, htmlAttributes: new { #class = "col-md-4" })
<div class="col-md-8 popovers" data-container="body" data-trigger="hover"
data-placement="top" data-content="Required">
#Html.EditorFor(model => model.Password, new { htmlAttributes = new { #class = "form-control", autocomplete = "off" } })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<!--/span-->
}
</div>
Thanx for any help!
Sorry I found a workaround. Still not ideal but does the job
<input type="text" style="display:none">
<input type="password" style="display:none">
Pretty much fools the browser.
The standard ASP.NET MVC template in Visual Studio 2013 generates a page Register.cshtml that defines the UI for registering new user into the system. I extended it to add a checkbox for "I accept the terms." Here is the code snippet:
<div class="form-group">
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
#Html.CheckBoxFor(m => m.AcceptTerms, new { #class = "form-control" })
#Html.Label("I accept", new { #class = "control-label" })
</div>
</div>
The idea is that a chexkbox gets displayed below the password editbox. The text must get displayed on the right side of the checkbox.
Here is the partial image of how the output looks:
As you can see, the checkbox is getting center-aligned and "I accept" is flowing to the next line.
How can I keep the checkbox and the label together and also ensure that the checkbox is left-aligned with the editbox above it? Regards.
Do this...
<label>
I accept
#Html.CheckBoxFor(m => m.AcceptTerms)
</label>
Try this ... hope this will help
<div class="checkbox">
#Html.CheckBoxFor(model => model.IsMobileView, new { htmlAttributes = new { #class = "form-control pull-left" } })
</div>
It seems that 'label' or/and input type="checkbox" have the display type block.
To fast check try add style="display: inline-block" to both Label and CheckBoxFor. If I'm right, then you can correct your .css-files.