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

Post a Comment

Popular posts from this blog

Grouping with Data Entities

-
I am really loving the data entity in my new projects but have come across a couple of issues already. Tonight I learned about using a field that is not a part of your database and not in the entity but is a consolidation field from a group.  Once I found some good samples it worked incredibly well and I had a little summary grid on the page in just a couple of minutes.  So here is what I did  using (myEntityName context = new myEntityName())     { //First I declared a couple of variables because I was looking at data between specific dates          DateTime startdate = DateTime.Parse("2014-02-01");             DateTime enddate = DateTime.Parse("2014-02-01");          var dbRecords = (from c in context.myTableName                           where (c.MemberStartDate >= startdate && c.MemberStart...
Read more

Localizer in Controller

-
Localizer in Controller Using using Microsoft.Extensions. Localization; Includes private readonly IStringLocalizer< AppAccessController>  _localizer; Resource file must be in a Controller Folder in Resources Method example public Dictionary<string,string> GetRoleList(string appName, bool includeX) { //Code here return allItems.ToDictionary<string, string, string>(i => i, i =>  _localizer[i] ); }
Read more

Sticky Footer made simple

-
CSS Footers are simple but people tend to overthink them.  Here is how it works You have two pieces A container that all your other stuff is in A footer that you want to always stay at the bottom of the page In Blazor I put this container on my content pages and not my host page because I didn't want my left hand nav to be involved <div class="container"> All my content </div> <footer> Centered footer content </footer> And the CSS .container {     width:100%;     padding: 0 15px; } footer {     font-size: 12px; (you could also use a vw value here)     padding-top:20px;     background-color: #xxx;     color: #fff;     margin: auto;     height: 60px;     width: 100%;     position: sticky; //absolute;     bottom: 0;     text-align: center; }
Read more