Geeks With Blogs

News profile for Aligned at Stack Overflow, Q&A for professional and enthusiast programmers

Donate Bitcoins

Check out Elapser from T3rse!
"free in Christ Jesus from the law of sin and death." Romans 8:2 (ESV) Check out the Falling Plates video on YouTube.
more about the Gospel
And then listen to Francis Chan speaking at LifeLight in SD.

Programming and Learning from SD

I was looking at Twitter’s Bootstrap awhile back and found that their CSS, plus some validation CSS from the MVC template, and approach to forms will work nicely for my MVC project. I didn’t want to use all of the Bootstrap CSS, so I took out only what was needed.

/* Surround the * after the form label on required fields*/
.requiredFormLabelDiv
{
    display: block;
}

.requiredFormStar
{
    color: red;
    margin-left: 10px;
}

.message-info
{
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error
{
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success
{
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error
{
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error
{
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid
{
    display: none;
}

input[type="text"].input-validation-error,
input[type="password"].input-validation-error,
input[type="email"].input-validation-error
{
    border: 1px solid #e80c4d;
}

.validation-summary-errors
{
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid
{
    display: none;
}

/*!
* Bootstrap v2.1.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
/* part of bootstrap.css for a base setup*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section
{
    display: block;
}

audio,
canvas,
video
{
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

    audio:not([controls])
    {
        display: none;
    }

html
{
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

a:focus
{
    outline: thin dotted #333;
    outline: 5px inherit -webkit-focus-ring-color;
    outline-offset: -2px;
}

a:hover,
a:active
{
    outline: 0;
}

sub,
sup
{
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sup
{
    top: -0.5em;
}

sub
{
    bottom: -0.25em;
}

img
{
    width: auto;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

#map_canvas img
{
    max-width: none;
}

button,
input,
select,
textarea
{
    margin: 0;
    font-size: 100%;
    vertical-align: middle;
}

select
{
    width: 310px;
    height: 32px;
}

button,
input
{
    *overflow: visible;
    line-height: normal;
}

    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"]
    {
        cursor: pointer;
        -webkit-appearance: button;
    }

    input[type="search"]
    {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-appearance: textfield;
    }

        input[type="search"]::-webkit-search-decoration,
        input[type="search"]::-webkit-search-cancel-button
        {
            -webkit-appearance: none;
        }

textarea
{
    overflow: auto;
    vertical-align: top;
}

.clearfix
{
    *zoom: 1;
}

    .clearfix:before,
    .clearfix:after
    {
        display: table;
        line-height: 0;
        content: "";
    }

    .clearfix:after
    {
        clear: both;
    }

.hide-text
{
    font: 0/0 a;
    color: transparent;
    -webkit-text-shadow: none;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.input-block-level
{
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body
{
    /* set min-width for smart phone portraits */
    min-width: 320px;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8em;
    line-height: 20px;
    color: #333333;
    background-color: #e9e9e9;
}

a
{
    color: #0088cc;
    text-decoration: none;
}

    a:hover
    {
        color: black;
        text-decoration: none;
    }

.img-rounded
{
    border-radius: 6px;
}

.img-polaroid
{
    padding: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.img-circle
{
    border-radius: 500px;
}

.row
{
    margin-left: -20px;
    *zoom: 1;
}

    .row:before,
    .row:after
    {
        display: table;
        line-height: 0;
        content: "";
    }

    .row:after
    {
        clear: both;
    }

[class*="span"]
{
    float: left;
    min-height: 1px;
    margin-left: 20px;
}

.unstyled
{
    list-style: none;
}

/* forms */
fieldset
{
    border: none;
    margin: 0;
    padding: 0;
}

    fieldset legend
    {
        display: none;
    }

    fieldset ol
    {
        padding: 0;
        list-style: none;
    }

        fieldset ol li
        {
            padding-bottom: 5px;
        }

    fieldset label
    {
        display: block;
        font-size: 1.2em;
        font-weight: 600;
    }

        fieldset label.checkbox
        {
            display: inline;
        }

    fieldset input[type="text"],
    fieldset input[type="password"],
    fieldset input[type="email"]
    {
        border: 1px solid #e2e2e2;
        color: #333;
        font-size: 1.2em;
        margin: 5px 0 6px 0;
        padding: 5px;
        width: 300px;
    }

        fieldset input[type="text"]:focus,
        fieldset input[type="password"]:focus,
        fieldset input[type="email"]:focus
        {
            border: 1px solid #7ac0da;
        }

    fieldset input[type="submit"]
    {
        background-color: #d3dce0;
        border: 1px solid #787878;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: 600;
        padding: 7px;
    }

Here’s how I use it in a cshtml file.

<fieldset>
    <legend>Contact</legend>
    <ol>
        @Html.HiddenFor(model => model.ContactId)
        @Html.HiddenFor(model => model.DateCreated)
        @Html.HiddenFor(model => model.IsActive)
        <li>
            @Html.LabelForRequired(model => model.FirstName)
            @Html.EditorFor(model => model.FirstName, new { maxLength = 10 })
            @Html.ValidationMessageFor(model => model.FirstName)
        </li>
        <li>
            @Html.LabelForRequired(model => model.LastName)
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </li>
        <li>
            @Html.LabelForRequired(model => model.Address1)
            @Html.EditorFor(model => model.Address1)
            @Html.ValidationMessageFor(model => model.Address1)
        </li>
        <li>
            @Html.LabelFor(model => model.Address2)
            @Html.EditorFor(model => model.Address2)
            @Html.ValidationMessageFor(model => model.Address2)
        </li>
        <li>
            @Html.LabelForRequired(model => model.City)
            @Html.EditorFor(model => model.City)
            @Html.ValidationMessageFor(model => model.City)
        </li>
  </ol>
<fieldset>

And a screen shot of part of my form

mvcFormScreenshot_forblog

Posted on Friday, January 25, 2013 1:24 PM MVC | Back to top


Comments on this post: MVC Forms Styling from Twitter Bootstrap

No comments posted yet.
Your comment:
 (will show your gravatar)
 


Copyright © Aligned | Powered by: GeeksWithBlogs.net | Join free