Adding a hyphen to the html attribute using html helpers, MVC3

The “data-*” is the custom data attributes in HTML5, it gives the ability to embed custom data attributes on all HTML elements and allows javascript to create a richer, more engaging user experience.  You can learn more about the usage of this “data-*” from here http://html5doctor.com/html5-custom-data-attributes/

I experience a problem of adding “data-*” to html tags by using the html helpers. I am using a datepicker from bootstrap and in the input tag, it specifies the “data-datepicker”.

<input id="SelectedDate" name = "SelectedDate" data-datepicker="datepicker" class="small" type="date" />

When I convert the html input tag to Html.TextBox helper class. It won’t pass the validation of razor engine’s syntax.

@Html.TextBoxFor(p=>p.SelectedDate, new {@class="small", type="date", data-datepicker = "datepicker"})

To work around this, you need to create a strongly typed Dictionary<string, object> and pass it to the Html.TextBox html attributes.

@Html.TextBoxFor(p => p.SelectedDate, new Dictionary<string, object> { { "class", "small" }, { "type", "date" }, { "data-datepicker", "datepicker" } })

This resolves the issue of having “data-*” custom data attributes while using mvc razor engine views.

Advertisements

CSS trick to place div in centre

For fix and relative positioned divs, if you already know the width or height. You can place them easily in centre horizontally or vertically.

For example, you have a div with width 400px.

<div style="width:400px;">

</div>

To place it in the centre of it parent div, you can set the left:50% and margin-left:-200px;

<div style="width:400px;position:relative;left:50%;margin-left:-200px;">

</div>

Set it left 50% of the parent div’s size, and then set its left margin to half size of its width. Make sure your position is relative or fixed. It will sit in the centre of your page.

It also works for vertical divs, set top 50% and top margin to its half size of the height. E.g.

<div style="height:400px;position:relative;top:50%;margin-top:-200px;">

</div>

LESS css & media queries for a responsive design with Bootstrap

Using media queries in a single file, we can support multiple devices with different screen sizes.

Bootstrap doesn’t automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

  1. Use the compiled responsive version, bootstrap-responsive.css
  2. Add @import "responsive.less" and recompile Bootstrap
  3. Modify and recompile responsive.less as a separate file
    Set up different styles in groups to show or hide contents by devices
        // Landscape phones and down
        @media (max-width: 480px) { ... }
         
        // Landscape phone to portrait tablet
        @media (max-width: 767px) { ... }
         
        // Portrait tablet to landscape and desktop
        @media (min-width: 768px) and (max-width: 979px) { ... }
         
        // Large desktop
        @media (min-width: 1200px) { ... }