twitter bootstrap modal popup, customized size and centralized location.

When I try to make bootstrap modal wider than the default. It is not centralized anymore, here we need to modify the css to adjust the left margin to the right px. Here is a block of handy code to adjust the modal width by a certain percentage of document width and adjust the left margin to centralize the modal as well.

$('#mymodal').modal({
        backdrop: true,
        keyboard: true
    }).css({
       'width': function () { 
           return ($(document).width() * .9) + 'px';  
       },
       'margin-left': function () { 
           return -($(this).width() / 2); 
       }
});

Create a custom HtmlHelper.TextBoxFor() to display label text as “placeholder” integrated with twitter bootstrap

We have TextBoxFor() and LabelFor() in MVC, they are binded with my model. If you are using twitter bootstrap and want to display the model property label as a placeholder in textboxes, what should you do.

Here is what I have done.

My model:

public class User
{
    [Display(Name="User name")]
    public string Username {get;set;}
}

Normally in the view we put,

@model User

<ol>
    <li>
        @Html.LabelFor(p=&gt;p.Username)
        @Html.TextBoxFor(p=&gt;p.Username)
    </li>
</ol>

image

If you want to display it as placeholder in twitter bootstrap,

image

Let’s create a TextBoxPlaceHolderFor() extension method of the htmlhelpers, remember to reference the namespace,

using System.Web.Mvc.Html;

So you can re-use the HtmlHelper.TextBoxFor() in your TextBoxPlaceHolderFor() method.

Here is the code with three overloads,

public static class TextBoxForExtensions
    {
        public static MvcHtmlString TextBoxPlaceHolderFor(this HtmlHelper html, Expression<Func> expression, object htmlAttributes)
        {
            var dict = new RouteValueDictionary(htmlAttributes);
            return html.TextBoxPlaceHolderFor(expression, dict);
        }
        public static MvcHtmlString TextBoxPlaceHolderFor(this HtmlHelper html, Expression<Func> expression)
        {
            var htmlAttributes = new Dictionary();
            return html.TextBoxPlaceHolderFor(expression, htmlAttributes);
        }

        public static MvcHtmlString TextBoxPlaceHolderFor(this HtmlHelper html, Expression<Func> expression, IDictionary htmlAttributes)
        {
            ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
            string htmlFieldName = ExpressionHelper.GetExpressionText(expression);
            string labelText = metadata.DisplayName ?? metadata.PropertyName ?? htmlFieldName.Split('.').Last();
            if (!String.IsNullOrEmpty(labelText))
            {
                if (htmlAttributes == null )
                {
                    htmlAttributes = new Dictionary();
                }
                htmlAttributes.Add("placeholder", labelText);
            }
            return html.TextBoxFor(expression, htmlAttributes);
        }

    }

When you call the methods you can do,

@Html.TextBoxPlaceHolderFor(m => m.UserName)

//or 

@Html.TextBoxPlaceHolderFor(m => m.UserName, new { @class="form-field" })


You are done. Now get your form neat and clean using the TextBoxPlaceHolderFor().

More about twitter bootstrap datepicker

I have blogged about the bootstrap datepicker earlier. Here is the link

https://kevww.wordpress.com/2012/03/20/bootstrap-from-twitter-is-missing-a-date-picker/

I personally find that is pretty annoy after you select the date, the calendar popup doesn’t disappear.

So I put some extra code in the on change event, to hide it.

$('#SelectedDate').datepicker({ format: "dd/mm/yyyy" }).on('changeDate', function (ev) {
             $(this).blur();
             $(this).datepicker('hide');
         });

If you don’t set blur(), the textbox will not lose focus and if you click the textbox again, the calendar popup will show.

And then hide the datepicker.

So what I have done here, is lose the focus and hide it.

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) { ... }
    
    

Using twitter bootstrap with bottom sticky footer

Nowadays, more website comprises 3 components. header, body and footer. With bootstrap, you can get it done even quicker. Here I created a sample start up project with most common layout in the world: Top fixed header, body and bottom sticked footer.

Here are some codes of the _layout.cshtml (if you are using MVC) or masterpages (asp.net) or any other languages whatever you call it.

For header section, use the bootstrap default “navbar” classes, you can set it to “navbar-fixed-top” or not, it is your choice. Set to top fixed, the header bar is always visible when you scrolling down.

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a href="/" class="brand">Brand name</a>
                <ul class="nav">
                    <li><a href="">Home</a></li>
                    <li class="divider-vertical"></li>  
                    <li><a href="">Products</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="">FAQ</a></li>
                </ul>
                <ul class="nav pull-right">
                    <li><a href="">Register</a></li>
                    <li><a href="">Login</a></li>
                </ul>
            </div>
        </div>
    </div>

For body section, I created a “wrap” div outside the “main” div, this is to make sure the footer stays after it. You will know what I mean after I show you the CSS

    <div id="wrap">
    <div id="main" class="container clear-top">
        <div class="row"> 
            <div class="span12">
                @RenderBody()        
            </div>
        </div>
    </div>
    </div>

For footer section, using <footer> is completely ok with modernizer, and I created a 3 columns with same size for your footer navigation links.

    <footer class="footer" style="background-color:#c2c2c2;">
        <div class="container" style="margin:0 auto;">
            <div class="row">
                <div class="span2 offset2">
                    <h4>Company</h4>
                    <ul>
                        <li><a href="">About Us</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </div>
                <div class="span2 offset1">
                    <h4>Resource</h4>
                    <ul>
                        <li><a href="">Get help</a></li>
                        <li><a href="">FAQ</a></li>
                        <li><a href="">Support</a></li>
                    </ul>
                </div>
                <div class="span2 offset1">
                    <h4>Connect</h4>
                    <ul>
                        <li><a href="" title="Facebook">Facebook</a></li>
                        <li><a href="" title="Twitter">Twitter</a></li>
                        <li><a href="" title="LinkedIn">LinkedIn</a></li>
                        <li><a href="" title="Google+">Google+</a></li>
                        <li><a href="" title="RSS">RSS</a></li>
                        <li><a href="" title="Blogs">Blogs</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

Now let’s see the CSS,

/* styles for layout */
html,body
{
    height:100%;
}

#wrap
{
  min-height: 100%;  
}

#main
{
    overflow:auto;
    padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer 
{
    position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;
    padding-top:20px;
    color:#fff;
} 

Your footer is sticked to the bottom always.

To download the project sample, go to codeplex

http://bootstrapfooter.codeplex.com/

Bootstrap from Twitter is missing a date-picker

Bootstrap is awesome, light weight. I think it is a great replacement of JQuery UI. But there are still a few elements missing from Bootstrap. Such as the very important one: date picker.

I found someone has done a plugin for it. It is pretty cool.

Here it is. http://www.eyecon.ro/bootstrap-datepicker/

To create a date picker, write the markups as follow,

    <div class="input-append date" id="dp3">
    
    <span class="add-on"><i class="icon-th"></i></span>
    </div>

image

Call the javascripts,

$('.datepicker').datepicker()

There are a few events that you can register as well,

show

This event fires immediately when the date picker is displayed.

hide

This event is fired immediately when the date picker is hidden.

changeDate

This event is fired when the date is changed.

    $('#dp5').datepicker()
    .on('changeDate', function(ev){
    if (ev.date.valueOf() < startDate.valueOf()){
    ....
    }
    });

————————-

Good stuff!

Create a JQuery plugin for twitter-bootstrap “Confirm Modal popup”

There is a situation that we need user to confirm before they proceed their action. You don’t want to accidently delete very important information. So I come up the idea to extend the bootstrap modal popup to create a confirm modal before calling the function to delete some stuff.

(function ($) {
    $.fn.extend({
        //pass the options variable to the function
        confirmModal: function (options) {
            var html = '<div class="modal" id="confirmContainer"><div class="modal-header"><a class="close" data-dismiss="modal">×</a>' +
            '<h3>#Heading#</h3></div><div class="modal-body">' +
            '#Body#</div><div class="modal-footer">' +
            '<a href="#" class="btn btn-primary" id="confirmYesBtn">Confirm</a>' +
            '<a href="#" class="btn" data-dismiss="modal">Close</a></div></div>';

            var defaults = {
                heading: 'Please confirm',
                body:'Body contents',
                callback : null
            };

            var options = $.extend(defaults, options);
            html = html.replace('#Heading#',options.heading).replace('#Body#',options.body);
            $(this).html(html);
            $(this).modal('show');
            var context = $(this);
            $('#confirmYesBtn',this).click(function(){
                if(options.callback!=null)
                    options.callback();
                $(context).modal('hide');
            });
        }
    });

})(jQuery);

Basically,  all you need to do in the UI, is to create a link to activate the confirm modal, and a empty div for my plugin to work with. With options, you can pass in modal heading and modal content body. With callback method, is your logic to delete stuff or something you want to do originally.


<script type="text/javascript">
$(function () {
$("#openConfirmModal").click(function () {
$("#confirmDiv").confirmModal({
heading: 'Confirm to delete',
body: 'Are you sure you want to delete this record?',
callback: function () {
alert('callback test');
}
});
});
</script>
<a href="#" id="openConfirmModal">Open Confirm Modal</a>
<div id="confirmDiv"></div>