Bootstap CSS for Radio button in using Font-Awesome

/// CSS

input[type=radio] {

    border: 0;

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

}

   

input[type=radio] + label:before {

    font-family: FontAwesome;

    display: inline-block;

    content: "\f1db";

    letter-spacing: 10px;

    font-size: 1.2em;

    color: #535353;

}

input[type=radio]:checked + label:before {

    content: "\f00c";

    font-size: 1.2em;

    color: red;

    letter-spacing: 5px;

    width: 35px: 5px;

}

input[type=radio]:focus + label:before {

    font-weight: bold;

    color:orange;

}

// HTML

<div>

                    <input id="radio" name="question" type="radio">

                    <label for="radio">

                        Radio 1</label>

                </div>

                <div>

                    <input id="radio2" name="question" type="radio">

                    <label for="radio2">Radio 2</label>

                       

                  

                </div>

///  REsult

Change the case of text in excel file

//// Proper case

formula- =PROPER(ColumnName)

//// Upper case

formula- =UPPER(ColumnName)

//// Lower case

formula- =LOWER(ColumnName)

Disable button using asp.net after click and enable when postback is completed

//// HTML

      <asp:Button ID="button" runat="server"

Text="Click Me !"  OnClick="Button_Click" ClientIDMode="Static"  CssClass="butt pull-right"

OnClientClick="this.disabled = true;"

UseSubmitBehavior="False"/> 

/// You can set the timeout of that function using jquery

/////// JS

   setTimeout(EnableBTN, 5000);

       function EnableBTN() {

               $("[id*=button]").removeAttr("disabled");

            };

           

Bootstrap datetimepicker not working inside table-responsive Set table-responsive dynamicaly

/// HTML

<div class="panel-body">

  <div class="table-responsive">

    <table class="table table-condensed table-hover table-striped text-center bgwhite" id="accountTable">

      <thead>

        <tr>

          <th class="col-sm-2">Debt Ref</th>

          <th class="col-sm-2">Due Date</th>

          <th class="col-sm-2">Amount Paid</th>

          <th class="col-sm-2">Account</th>

          <th class="col-sm-2">Reconcile Date</th>

        </tr>

      </thead>

      <tbody>

        <tr class="armitage">

          <td>

            <div>NOR087-DAN052</div>

          </td>

          <td>

            <div>05/01/2016</div>

          </td>

          <td>

            <div>180.00</div>

          </td>

          <td>

            <div class="col-sm-12">Paralegal (951)</div>

          </td>

          <td>

            <div class="col-sm-12">

              <input type="text" placeholder="Reconcile Date" name="dates" id="dates" class="form-control ">

            </div>

          </td>

        </tr>

      </tbody>

    </table>

  </div>

</div>

////CSS

        .fixed-table-body {

  overflow-x: visible;

  overflow-y: visible;

  height: 100%;

}

////JS

  $(document).ready(function () {

$(document).ready(function () {

                    $('#dates).datetimepicker().on('dp.show', function () {

                        $(this).closest('.table-responsive').removeClass('table-responsive').addClass('temp');

                    });

                    $('#dates).datetimepicker().on('dp.hide', function () {

                        $(this).closest('.temp').addClass('table-responsive').removeClass('temp')

                    });

})

Bootstrap datetimepicker not working inside table-responsive Fix Dynamic Table height

/// HTML

<div class="panel-body">

  <div class="table-responsive">

    <table class="table table-condensed table-hover table-striped text-center bgwhite" id="accountTable">

      <thead>

        <tr>

          <th class="col-sm-2">Debt Ref</th>

          <th class="col-sm-2">Due Date</th>

          <th class="col-sm-2">Amount Paid</th>

          <th class="col-sm-2">Account</th>

          <th class="col-sm-2">Reconcile Date</th>

        </tr>

      </thead>

      <tbody>

        <tr class="armitage">

          <td>

            <div>NOR087-DAN052</div>

          </td>

          <td>

            <div>05/01/2016</div>

          </td>

          <td>

            <div>180.00</div>

          </td>

          <td>

            <div class="col-sm-12">Paralegal (951)</div>

          </td>

          <td>

            <div class="col-sm-12">

              <input type="text" placeholder="Reconcile Date" name="dates" id="dates" class="form-control ">

            </div>

          </td>

        </tr>

      </tbody>

    </table>

  </div>

</div>

/// CSS

        .fixed-table-body {

  overflow-x: visible;

  overflow-y: visible;

  height: 100%;

}

//// JS

  $(document).ready(function () {

                    $('.table-responsive').on('dp.show', function () {

                        $('.table-responsive').css("min-height", "425px");

                    });

                    $('.table-responsive').on('dp.hide', function () {

                        $('.table-responsive').css("min-height", "none");

                    });

// or

// $('.table-responsive').on('dp.hide', function () {

 //                       $('.table-responsive').css("min-height", "100px");

 //                   });

});

Bootstrap datetimepicker not working inside table-responsive

// CSS

style="position: inherit; top: 30px;"


// HTML

<div class="table-responsive" style="min-height: 100px; padding: 0px 5px 5px; max-height: 450px;

                overflow: auto;">

                <table>

                    <tr>

                        <td>

                            <div class="grdCal" style="position: inherit; top: 30px;">

                                <asp:TextBox runat="server" ID="txt_Date" CssClass="form-control vochDatemimx" Text='<%# Bind("Date") %>'

                                    MaxLength="10" onkeypress="return Back_Del_Only(event);"></asp:TextBox>

                            </div>

                        </td>

                    </tr>

                </table>

            </div>

/// Result

Responsive Table First Row with all columns using CSS

/// CSS

<style type="text/css">

        .tblcssresponse

        {

            width: 100%;

        }

        .td1, .td3

        {

            width: 45%;

        }

        .td2

        {

            width: 10%;

        }

        @media all and (max-width:750px)

        {

            .tblcssresponse

            {

                width: 100%;

            }

            .td1, .td3

            {

                width: 100%;

            }

            .td2

            {

                width: 100%;

            }

           .tblcssresponse tr td

            {

                display: block;

                width: 100%;

            }

       

           .tblcssresponse tr

            {

                display: block;

                margin-bottom: 30px;

            }

        }

    </style>

/// HTML

<table class="tblcssresponse">

  

            <tr>

                <td class="td1">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p-0 thumbnail">

                 column1

                 </div>

                </div>

                </td>

                <td class="td2">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p-0 thumbnail">

                  column2

                  </div>

                </div>

                </td>

                <td class="td3">

                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p-0 thumbnail">

                 

                 column3

                  </div>

                 </div>

                </td>

            </tr>

    

    </table>

/// REsult

before

After