I can't seem to manage to put a new css in a validationMessageFor in my Ajax form...
#using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", OnSuccess = "Success", OnFailure = "Fail" }))
{
<div class="separaror">
<div class="line1">
#Html.LabelFor(m => m.Name)
<br />
#Html.TextBoxFor(m => m.Name)
#Html.ValidationMessageFor(m => m.Name)
</div>
<div class="linha2">
<br>
<input type="submit" value="Save" />
<input type="button" id="btnCancel" value="Cancel" />
</div>
</div>
}
My css
.field-validation-error {
color: #e80c4d;
font-weight: bold;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #e80c4d;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #e80c4d;
font-weight: bold;
font-size: 1.1em;
}
.validation-summary-valid {
display: none;
}
It doesn't override.. Why is that? Any help would be appreciated!
I copied the css directly from the default Asp MVC 4 application from visual studio,
I have no idea why this doesnt work.
The application I'm doing is not the default application from mvc 4, so there must be something I'm missing
You need to set .input-validation-error for validation for inputs
This is how you do it
.input-validation-error{ background: pink; border: 1px solid red; }
If you style up the .field-validation-error it will change the validation error message(s).
.field-validation-error{ color: red; font-weight: bold; }
Hope it helps
Related
I have been trying to get the text strikeout when it is ticked in a check box. I have been looking on the web for the last two days and finally decided to post here for help.
Basically, I would like to build a to-do list app and when a task is ticked it gets striked through.
Any help would be highly appreciated.
Thanks.
Try Like This Plan CSS/HTML no JavaScript required.
.todo-box {
border: 1px solid gray;
border-width: 1px;
}
.todo-item {
padding: 4px 4px 4px 4px;
background: gold;
border-bottom: 1px dotted green;
}
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
input[type=checkbox]:checked+label.strikethrough {
text-decoration: line-through;
}
input[type=checkbox] {
border: 1px solid #333;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 20px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 20px;
}
<ul class="todo-box">
<li>
<div class="checkbox todo-item">
<input type="checkbox" name="packersOff" value="1" />
<label for="packers" class="strikethrough">001 Task Item</label>
</div>
</li>
<li>
<div class="checkbox todo-item">
<input type="checkbox" name="packersOff" value="1" />
<label for="packers" class="strikethrough">002 Task Item</label>
</div>
</li>
<li>
<div class="checkbox todo-item">
<input type="checkbox" name="packersOff" value="1" />
<label for="packers" class="strikethrough">003 Task Item</label>
</div>
</li>
</ul>
Fiddle
Assuming Windows Forms:
Open the form in the Windows Forms designer and add a checkbox.
Double-click the checkbox in the designer to add a handler.
In the handler, add the following code.
(assuming the checkbox is called checkBox1):
void checkBox1_CheckedChanged(object sender, System.EventArgs e)
{
checkBox1.Font = new Font(
checkBox1.Font,
checkBox1.Checked ? FontStyle.Strikeout : FontStyle.Regular);
}
Note that this does not dispose the old font handle, but code does not normally bother to do that.
I've a input list. I've bind the data items from my code behind page. But the items are not showing in drop down but the items are shown in webdeveloper tools.
Please see the attached figure. In the text box when I type "a" no items are displayed, but when I debug the UI using web developer tool, the items are shown there.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" MasterPageFile="AdminMaster.master" %>
<asp:Content ID="UserContent" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
<style>
.content {
min-height: 250px;
padding: 15px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.box {
position: relative;
border-radius: 3px;
background: #ffffff;
border-top: 3px solid #d2d6de;
margin-bottom: 20px;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.box.box-default {
border-top-color: #d2d6de;
}
.box-title {
display: inline-block;
font-size: 18px;
margin: 0;
line-height: 1;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/*.fa-tag:before {
content: "\f02b";
}*/
.box-header.with-border {
border-bottom: 1px solid #f4f4f4;
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
}
.form-horizontal .form-group {
margin-left: -15px;
margin-right: -15px;
}
.box-body {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 10px;
}
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
.form-control {
display: block;
width: 50%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 700;
}
.input_text {
width: 80%;
text-transform: uppercase;
}
</style>
<div class="content">
<div class="box box-default ">
<div class="box-header with-border">
<h3 class="box-title"><i class="fa fa-tag"></i>Student Registration</h3>
</div>
<div class="form-horizontal">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-md-1 control-label">Name</label>
<div class="col-md-8">
<input type="text" class="form-control input_text" id="inputName" placeholder="NAME" />
</div>
</div>
<div class="form-group">
<label for="inputRoll" class="col-md-1 control-label">Roll Number</label>
<div class="col-md-8">
<input type="text" class="form-control input_text" id="inputRoll" placeholder="ROLL" />
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-md-1 control-label">Gender</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" name="clouds" id="Clear" value="clear" checked="checked" />
Male
</label>
<label class="radio-inline">
<input type="radio" name="clouds" id="Cloudy" value="cloudy" />
Female
</label>
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-md-1 control-label">Class</label>
<div class="col-md-8">
<input list="fruits" runat="server" />
<datalist id="fruits" runat="server"></datalist>
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-md-1 control-label">Address</label>
<div class="col-md-8">
<input type="text" class="form-control input_text" id="inputAddress2" placeholder="Email" />
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Content>
code behind page code
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("fruits");
table.Rows.Add("apple");
table.Rows.Add("banana");
table.Rows.Add("pineapple");
table.Rows.Add("mango");
table.Rows.Add("watermelon");
table.Rows.Add("lemon");
table.Rows.Add("guava");
table.Rows.Add("jackfruit");
var builder = new System.Text.StringBuilder();
for (int i = 0; i < table.Rows.Count; i++)
builder.Append(String.Format("<option value='{0}'>", table.Rows[i][0]));
fruits.InnerHtml = builder.ToString();
}
The problem is that the datalist ID generated by ASP.NET is not fruits but ContentPlaceHolder1_fruits.
You should first give the input an ID, so you can access it from the code behind.
<input list="fruits" runat="server" id="fruitsInput" />
And then from the code behind set the right datalist ID
fruitsInput.Attributes["list"] = fruits.ClientID;
So your markup should look like this
<div class="col-md-8">
<input list="fruits" runat="server" />
<datalist id="fruits" runat="server"></datalist>
</div>
And you code behind like this
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("fruits");
table.Rows.Add("apple");
table.Rows.Add("banana");
table.Rows.Add("pineapple");
table.Rows.Add("mango");
table.Rows.Add("watermelon");
table.Rows.Add("lemon");
table.Rows.Add("guava");
table.Rows.Add("jackfruit");
var builder = new System.Text.StringBuilder();
for (int i = 0; i < table.Rows.Count; i++)
builder.Append(String.Format("<option value='{0}'>", table.Rows[i][0]));
fruits.InnerHtml = builder.ToString();
fruitsInput.Attributes["list"] = fruits.ClientID;
}
Been trying several ways to change the style of a DropDownListFor element. Either I am doing something wrong or there is something overriding it.. I've tried changing it in the view element and in the CSS.. and no go.
View:
<div style="width: 100%; ">
<div style="float: left;"> #Html.DropDownListFor(model => model.FranPID, new SelectList(Model.FranchiseList, "FranchiseID", "FranBusinessName", new { #class = "selectStyle" }))</div>
</div>
CSS:
.selectStyle {
border: 1px solid #93A9C8;
padding: 2px;
font-size: 1em;
color: #444;
width: 200px;
border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-o-border-radius: 3px 3px 3px 3px;
}
EDIT Solved:
Correct Call:
<div style="width: 100%; ">
<div style="float: left;"> #Html.DropDownListFor(model => model.FranPID, new SelectList(Model.FranchiseList, "FranchiseID", "FranBusinessName"), new { #class = "selectStyle" })</div>
</div>
Badsically I had the new inside the SelectList call.. moving it out (changing the parans) and all is working
Well, this is one way...I'd like others to show me if there's a better way because I need to learn more!
in the view:
<div id="products" class="container" >
<div class="row">
<div class="col-lg-10 col-md-5 col-sm-4 dropdownlist">
#Html.LabelFor(m => m.SelectedCategoryId)
#Html.DropDownList("id", Model.CategoryItems, new { #id = "ddlCategories", onchange = "this.form.submit();" })
</div>
</div>
</div>
and in the css:
/* the width of the entire in div of id=product */
#products {
width: 100%;
}
/* any item in the div of id=product with its class having dropdownlist */
#products .dropdownlist{
font-size: 18px;
}
/* any dropdown in product id div */
#products select{
color: blue;
}
/* specifically, any item with id of ddlCategories in the div of id=product */
#products #ddlCategories
{
color: red;
}
Hope this helps.
In my project Button click action is not rendering as per the style provided So i tried two methods and both have screenshots attached.
1.<button type="submit" class = "btn btn-success">#Html.ActionLink("Save", "EmployeeRegistration",
"Home")</button>
2.<button type="submit" >#Html.ActionLink("Save", "EmployeeRegistration", "Home",new{#class = "btn
btn-success"})</button>
both have Style Issues
Just for a try, see what output the next line gives to you :-
<input type="submit" class = "btn btn-success" value="Save" />
Use only this :-
#Html.ActionLink("Save", "EmployeeRegistration", "Home", new{ #class = "btn
btn-success"});
You were using Hyperlink within a button, that's why your button was dis aligned.
Use this style :-
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
Try this
#Html.ActionLink("Save", "EmployeeRegistration", "Home", new{ }, new{#class = "btn
btn-success"})
We are using a fancybox on our site. Registered users can see top panel on the fancybox, unregistered can't see it.
At first boot of images there are request to the server, create a template that displays a picture. But after the first click there is no request to the server - therefore if we click by registered user and after make log out and click again we see that top panel.
There is c# checking if user registered or not:
#if (isOwner && Model.MultimediaTypeId == KZStream.Web.Site.Models.Multimedia.MultimediaTypes.Image )
{
//show top panel
}
else{
//hide top panel
}
There is fancybox calling:
this.cont.find("a.imglnk").fancybox({
'opacity': true,
'overlayShow': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
type: 'ajax',
ajax: { global: false, cache: false },
titleShow: false,
scrolling: 'no',
});
There is template by which we get picture (C#):
<div style="position: relative" id="mmgf_#(prefix)" class="mmgf">
#if (isOwner && Model.MultimediaTypeId == KZStream.Web.Site.Models.Multimedia.MultimediaTypes.Image )
{
<div class="fancy-box-top-panel">
<div class="choose-album-cover">
<div style='min-height: 22px; display: inline-block;'>
<div class='checkbox-test cb_gray'>
<input type='checkbox' id='choose-album-cover' name='choose-album-cover' value='on' />
</div>
</div>
<div class="album-cover">
#RenderMultimediaGalleryStrings.ChooseAlbumCover</div>
</div>
<div class="dn manage-album-cont">
<div class="move-dp-btn">
#RenderMultimediaGalleryStrings.Move
<div class="dn move-drop-down-list">
#if (albums != null && albums.Any())
{
foreach (var alb in albums)
{
#alb.Name
}
}
</div>
</div>
</div>
<div class="clearfix">
</div>
</div> }
<div style="width: 630px; height: 440px; overflow: hidden; text-align: center; position: relative;">
#if (Model.MultimediaTypeId == KZStream.Web.Site.Models.Multimedia.MultimediaTypes.Image)
{
<img src="#(Html.KZStreamImagePath(Model.Id, 630, 440))" style="text-align: center;position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;" />
}
else
{
<iframe width="632" height="414" src="#(Html.Action("GetVideo", new { id = Model.Id }))" frameborder="0" allowfullscreen>
</iframe>
}
</div>
<div style="margin-top: 10px; font-family: Tahoma, Verdana, Segoe, sans-serif; font-weight: normal;
font-size: 14px; color: #000000; max-width: 630px;">
#Model.Description
</div>
</div>
Finally i need that at every image showing there are carried out an inspection :) Thanks :)