Contents tagged with Bootstrap

  • Bootstrap Image Carousel Fade Transition

    No Comments

    The built in image carousel animation for Bootstrap is a slide, which is nice, but I found this fade transition while Googling, and it seems to work well. I found it here on http://codepen.io/Rowno/pen/Afykb and it’s penned by Roland Warmerdam.

    Html:

    <div class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <img class="img-rounded" src="..." alt="...">
        </div>
        <div class="item">
            <img class="img-rounded" src="..." alt="...">
        </div>
        <div class="item">
            <img class="img-rounded" src="..." alt="...">
        </div>
    </div>
</div>

    Css (less):

    .carousel-fade {
    .carousel-inner {
        .item {
            opacity: 0;
            -moz-transition-property: opacity;
            -o-transition-property: opacity;
            -webkit-transition-property: opacity;
            transition-property: opacity;
        }

        .active {
            opacity: 1;
        }

        .active.left,
        .active.right {
            left: 0;
            opacity: 0;
            z-index: 1;
        }

        .next.left,
        .prev.right {
            opacity: 1;
        }
    }

    .carousel-control {
        z-index: 2;
    }
}

  • Formatting File Upload Input with Bootstrap

    1 Comment

    If you’re using file upload forms in your Bootstrap themed website and would like to format the button and the field nicely, take a peek at this article by Cory LaViska. He nails it.

     

    A small example which produces an input-group like this (“Fil” means file in Swedish):

    image

    <div class="editor-label">
    <label>Fil</label>
    <div class="input-group">
        <span class="input-group-btn">
            <span class=" btn btn-default btn-file">
                välj fil... <input type="file" name="data" id="data">
            </span>
        </span>
        <input type="text" id="valdfil" class="form-control" readonly />
    </div>
</div>

    <script type="text/javascript">

    $(document).ready(function () {
        $(document).on('change', '.btn-file :file', function () {
            var input = $(this),
                numFiles = input.get(0).files ? input.get(0).files.length : 1,
                label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
            input.trigger('fileselect', [numFiles, label]);
        });

        $('.btn-file :file').on('fileselect', function (event, numFiles, label) {
            console.log(numFiles);
            console.log(label);
            $("#valdfil").val(label);
        });
    });

</script>

    You must also add these CSS lines:

    .btn-file {
        position: relative;
        overflow: hidden;
    }
    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }

  • Form Validation Formatting in ASP.NET MVC 5 and Bootstrap 3

    No Comments

    When creating a new MVC project in ASP.NET MVC 5, Bootstrap is already included. For some reason proper formatting for form errors (the red colored error message and the red border around the controls) are not working. There are loads of articles and blog posts how to change this and that to enable this, but in ASP.NET MVC 5, the only thing you actually have to do is add a few classes to your Site.css file. Why they aren’t in there from the outset I don’t know.

    Site.css

    /* styles for validation helpers */
    .field-validation-error {
        color: #b94a48;
    }

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

    input.input-validation-error {
        border: 1px solid #b94a48;
    }


    select.input-validation-error {
            border: 1px solid #b94a48;
    }

    input    [type="checkbox"].input-validation-error {
        border: 0 none;
    }

    .validation-summary-errors {
        color: #b94a48;
    }

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

    Sample form.cshtml

    @model WebApplication6.Models.TestModel

    @{
        ViewBag.Title = "Home Page";
    }
    <br /><br />

    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
        <div class="form-group">
            @Html.LabelFor(m => m.Name, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
                <br />
                @Html.ValidationMessageFor(m => m.Name)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(m => m.GenderId, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.DropDownListFor(m => m.GenderId, new SelectList(Model.Genders, Model.GenderId), "", new { @class = "form-control" })
                <br />
                @Html.ValidationMessageFor(m => m.GenderId)
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" class="btn btn-default" value="OK" />
            </div>
        </div>
    }


    Sample TestModel.cs

    public class TestModel
    {
       [Required(ErrorMessage = "Name is required")]
       [MinLength(3, ErrorMessage = "Name must be at least 3 letter")]
       public string Name { get; set; }
       [Display(Name= "Gender")]
       [Required(ErrorMessage = "Gender is required")]
       public string GenderId { get; set; }

       public string[] Genders = new[] {"Male", "Female"};
    }