CSS Necessities


READ ONLY TEXT BOXES



When you need to return your model data in a textbox control but you don't want it to look like a textbox, apparently non-geeky people can't just accept that it is read only - they need to have it out of a textbox!

Easy way to do this- add this to your styles

input[readonly]
{
    border: none;
    background: none;
}

And make your text box readonly

    @Html.EditorFor(model => model.Id, new { htmlAttributes = new {@readonly=true } })


DECORATING REQUIRED FIELDS



You know the little red asterisk that you typically see to the right of the required field label.  An easy way to accomplish that with css is like this:

.required:after
{
    content: " *";
    font-weight: bold;
    color:#ff0000;
}

Then add the class anywhere you want it to apply:

@Html.LabelFor(model => model.agreement.programID, new { @class = "col-sm-2 form-control-label required" })


INCLUDE A PRINT BUTTON

Add CSS
//(#tabletoPrint is your div or table that you want to print)

 @media print {
     body * {
         visibility: hidden;
     }
     #tabletoPrint, #tabletoPrint * {
         visibility: visible;
     }
     #tabletoPrint {
         position: absolute;
         left: 0;
         top: 0;
     }
 }

Then just add your button
<a href="javascript:window.print()"><i class="fa fa-print">Print</i></a>



Comments

Popular posts from this blog

Linq Exclude from separate list

Sorting Ascending and Descending

Linq Query Syntax vs Method Syntax