Tab Focus for following elements not working in Mozilla:
<div class="editor-field">
<div>
<%: Html.TextBox(model => model.AddressLine1, new { maxLength = 30, style = "width:300px", tabindex = "0" })%>
</div>
<div class="editor-field">
<div>
<%: Html.TextBox(model => model.AddressLine2, new { maxLength = 30, style = "width:300px", tabindex = "0" })%>
</div>
<div class="editor-field">
<div>
<%: Html.TextBox(model => model.AddressLine3, new { maxLength = 30, style = "width:300px", tabindex = "0" })%>
</div>
My CSS is:
editor-field > div > input:focus
{
outline: 1px dotted red !important;
}
May I know where I am wrong. Default Tab Navigation is not working in Mozilla Firefox. Working fine in Chrome and IE. Please assist me to fix this issue.
You have to use Jquery or Javascript to set focus like:-
$(document).ready(function() {
$('.editor-field').first().children().children('input').focus();
});
Related
The width isnt setting for the textarea control. It sets for the other controls. Could somebody tell me why isnt the width applying for text area
For example
Setting border to solid for col-md-6
<div class="form-group">
#Html.LabelFor(model => model.ProjectName, htmlAttributes: new { #class = "control-label col-md-5" })
<div class="col-md-6">
#Html.EditorFor(model => model.ProjectName, new { htmlAttributes = new { #class = "form-control", style = "width:100%" } })
#Html.ValidationMessageFor(model => model.ProjectName, "", new { #class = "text-danger" })
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
#Html.LabelFor(model => model.ProjectSummary, htmlAttributes: new { #class = "control-label col-md-5" })
<div class="col-md-6">
#Html.TextAreaFor(model => model.ProjectSummary, new { htmlAttributes = new { #class = "form-control", rows = "3", style = "max-width:100%" } })
#Html.ValidationMessageFor(model => model.ProjectSummary, "", new { #class = "text-danger" })
</div>
</div>
The real width is the width the textarea has. The col-md-6 will make it that wide. The problem is that the container you're applying the border to does not actually constrain the textarea. If I understand you correctly that you're applying the border to the div with the col-md-6 class, that could very well be your issue. The grid classes that Boostrap employ various width, margin and padding settings to construct a grid that is as close to cross browser as possible, and applying actual visible style to them almost always causes weirdness like this. Instead, wrap your textarea with another div and apply the border to that:
<div class="col-md-6">
<div class="my-awesome-border">
#Html.TextAreaFor(model => model.ProjectSummary, new { htmlAttributes = new { #class = "form-control", rows = "3", style = "max-width:100%" } })
#Html.ValidationMessageFor(model => model.ProjectSummary, "", new { #class = "text-danger" })
</div>
</div>
Long and short, you should always avoid adding additional style to anything with Bootstrap's grid classes (col-*, row, etc.).
I have these form with style inline, but I can't use it in css because it changes all my code when I reference css in another views:
<style>
body {
background: url('http://digitalresult.com/') fixed;
background-size: cover;
padding: 0;
margin: 0;
}
.form-login {
background-color: #EDEDED;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
border-color:#d2d2d2;
border-width: 5px;
box-shadow:0 1px 0 #cfcfcf;
opacity: 0.8;
}
h4 {
border:0 solid #fff;
border-bottom-width:1px;
padding-bottom:10px;
text-align: center;
}
.form-control {
border-radius: 10px;
}
.wrapper {
text-align: center;
}
</style>
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="container" style="margin-top:40px">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="panel panel-default form-login">
<div class="panel-heading">
<strong> Press to continue</strong>
</div>
<div class="panel-body">
<form role="form" action="#" method="POST">
<fieldset>
<div class="row">
</div>
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1 ">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
#Html.TextBoxFor(m => m.Email, new { #class = "form-control has-success", #autofocus = "autofocus", placeholder = "Usuario", required = "required" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i>
</span>
#Html.TextBoxFor(m => m.Password, new { #class = "form-control has-success", placeholder = "Password", type = "password", required = "required" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</div>
<p>#Html.ActionLink("Return to home page", "Index", "Home")</p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
I think the problem is if I send body class to css it changes on all pages I reference css, how can I change to only change in this view? Regards
Instead of changing in file, you may add style in page through tag or give inline style with style element if you need change only at one place.
But adding inline style should be avoided.
Better to differentiate your element with a id and give properties to it
In that case you can save above inline CSS into separate CSS file and import that css file to that HTML page where you want this CSS.
Add the background to container, or add another class to the container and apply the style. and change margin-top to padding-top
.container {
background: url('http://digitalresult.com/') fixed;
background-size: cover;
padding: 0;
margin: 0;
height: 100vh;
padding-top:40px;
}
you can create a CSS file with the styles you mentioned in your view and import that file only in this view which will solve your problem.
I am using Bootstrap Scrollspy. I added one Bootstrap nav (class = "nav nav-pills nav-stackedon") on left side of page and was on right side. First problem was that nav becomes invisible as I scroll down, so I added style to it:
.my-navbar {
position:fixed;
}
Then everything was fine with navbar (it became fixed to top), but the problem is that the body is now below navbar instead of being on right side of it. Why is that so and how to correct it?
My view is here:
#model Questionnaire.Domain.Models.StudentVM
#using System.Linq
#using System.Collections.Generic
#{
ViewBag.Title = "Student";
}
#{
List<String> subjectNames = new List<String>();
for (int i = 0; i < Model.Subjects.Count; i++)
{
subjectNames.Add(Model.Subjects[i].Name);
}
}
<body data-spy="scroll" data-target=".my-navbar">
<div class="row panel">
<div class="my-navbar col-xs-2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation">Opšta pitanja</li>
#for (int i = 1; i < subjectNames.Count; i++)
{
<li role="presentation">#subjectNames[i]</li>
}
</ul>
</div>
<div class="col-xs-8">
#using (Html.BeginForm())
{
<span id="opsta"></span>
for (int i = 0; i < Model.Subjects.Count; i++)
{
<div class="well well-outside">
#Html.HiddenFor(m => m.Subjects[i].ID)
<h3>#Html.DisplayFor(m => m.Subjects[i].Name)</h3>
#for (int j = 0; j < Model.Subjects[i].Questions.Count; j++)
{
<div class="well well-inside">
#Html.HiddenFor(m => m.Subjects[i].Questions[j].ID)
<h3>#Html.DisplayFor(m => m.Subjects[i].Questions[j].Text)</h3>
#foreach (var answer in Model.Subjects[i].Questions[j].PossibleAnswers)
{
<div>
#Html.RadioButtonFor(m => m.Subjects[i].Questions[j].SelectedAnswer, answer.ID, new { id = answer.ID })
<label for="#answer.ID">#answer.Text</label>
</div>
}
#Html.ValidationMessageFor(m => m.Subjects[i].Questions[j].SelectedAnswer)
</div>
}
</div>
}
<input type="submit" class="btn btn-success" value="Confirm" />
}
</div>
</div>
</body>
setting position:fixed removes the nav bar from the regular flow of the page, so the page acts like nothing is there in its place. You can either style the rest of the page to act as if it is there (margin, padding, other) or put an empty container in its place with similar dimension, just no content.
I am using Twitter bootstrap 3.0 and razor views.
How can I align the image in the below div to the immediate right of the artist text box ?
<div id="artist"class="form-group">
#Html.LabelFor(m => m.Artists, new { #class = "col-lg-2 control-label" })
<div class="container">
#Html.TextBoxFor(m => m.Artists, new { placeholder = "Artist name",#class="form-control", id="artistinput"})
<img onclick="AddArtist()" id="plusartist" src="\Content\bootstrap\img\plus-button.png" class="img-thumbnail"/>
#Html.ValidationMessageFor(m => m.Artists)
</div>
</div>
Here is the ASP.Net MVC2 code that I use to display a textbox input.
<div id="blackbar">
<p>Sistema de Evaluaciones de Docentes</p>
<%: Html.TextBox("termino","") %>
<img src="../../Content/search.png" alt="search" />
</div>
Here is how it renders:
<div id="blackbar">
<p>Sistema de Evaluaciones de Docentes</p>
<input id="termino" name="termino" type="text" value="" />
<img src="../../Content/search.png" alt="search" />
</div>
How would I use CSS for example to give the textbox a red border? How can I tell MVC2 to give this text input a class or something?
EDIT:
I've tried the following, but the text I write into the input isn't green.
.textinput
{
color:Green;
}
<%: Html.TextBox("termino", "", new { #class = "textinput" })%>
<%=Html.TextBox("termino", "", new { #class = "redborder" }) %>
#termino { border: solid 1px #F00; }
input[name=termino],
input#termino,
#termino
{
border: 1px solid #f00;
}
To style all text boxes in the blackbar div you can use:
#blackbar input[type='text'] { ... }