Friday, July 22, 2016

Bootsrap file Input

Different browsers render the  HTML file upload control different ways. This can be resolved by replacing the file upload control with a cross-browser compatible control.

Even though there are plenty of controls to choose from, I personally like the Bootstrap file input control that can be integrated in simple steps into any project.



Regards,
Samitha

Monday, July 18, 2016

check form validation using jQuery

If you are using the jQuery Validate plugin for your form validations, you can force validation before the form is submitted and perhaps display an alert if validation is successful.

e.g.
 &lt input type="submit" value="Submit"  onclick="if ($('#your_form_id').valid()){alert('Thankyou for your application');}" / >

Cheers,
Samitha


Thursday, July 14, 2016

Specify file input height for all browsers

Even you have specified  <input type="file" > using the style attribute it does not get applied in as expected in chrome browser. You can resolve that issue by setting file control width as follows.

 input[type="file"]{
        height:35px;
        width:100%;
  }

    input[type="file"]::-webkit-file-upload-button{
        height:35px;
  }

cheers,
Samitha

Monday, July 4, 2016

Increase size of glyphicons

If you are using bootstrap glyphicons, you may have noticed that sometimes the icon looks to small for a web page.

This can be fixed simply by increasing the font sizer for icons as displayed below.

/*change all icons*/
.glyphicon {
    font-size: 35px;
}


/*change specific icon*/
.glyphicon.glyphicon-print {
    font-size: 35px;
}


Regards,
Samitha

Friday, June 24, 2016

Missing close button icon in jQuery UI Dialog

When the jQuery UI dialog is implemented there are few things you need to be aware of.

1. Missing image sprites

Resolution:
Verify jQuery UI base theme is referenced.

2.Using bootstrap along with jQuery

Resolution:
Make sure you reference bootstrap.js before the jquery-ui js as shown below.



Regards,
Samitha

Thursday, June 16, 2016

Create responsive table

There are several ways to make a table responsive. Here I am showing some of the ways that can be achieved.

1. Using bootstrap
Bootstrap comes with built-in class .table-responsive that makes the table scroll horizontally on small devices.

e.g.
<table class="table-responsive " >

</table>

2. Using media query
You can use media query to behave table look and feel differently on mobile devices. The following code sample took from a article posted in css-tricks.com

<style>
 
 @media
 only screen and (max-width: 760px),
 (min-device-width: 768px) and (max-device-width: 1024px)  {

  /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr {
   display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
   position: absolute;
   top: -9999px;
   left: -9999px;
  }

  tr { border: 1px solid #ccc; }

  td {
   /* Behave  like a "row" */
   border: none;
   border-bottom: 1px solid #eee;
   position: relative;
   padding-left: 50%;
  }

  td:before {
   /* Now like a table header */
   position: absolute;
   /* Top/left values mimic padding */
   top: 6px;
   left: 6px;
   width: 45%;
   padding-right: 10px;
   white-space: nowrap;
  }

  /*
  Label the data
  */
  td:nth-of-type(1):before { content: "First Name"; }
  td:nth-of-type(2):before { content: "Last Name"; }
  td:nth-of-type(3):before { content: "Job Title"; }
  td:nth-of-type(4):before { content: "Favorite Color"; }
  td:nth-of-type(5):before { content: "Wars of Trek?"; }
  td:nth-of-type(6):before { content: "Porn Name"; }
  td:nth-of-type(7):before { content: "Date of Birth"; }
  td:nth-of-type(8):before { content: "Dream Vacation City"; }
  td:nth-of-type(9):before { content: "GPA"; }
  td:nth-of-type(10):before { content: "Arbitrary Data"; }
 }

 /* Smartphones (portrait and landscape) ----------- */
 @media only screen
 and (min-device-width : 320px)
 and (max-device-width : 480px) {
  body {
   padding: 0;
   margin: 0;
   width: 320px; }
  }

 /* iPads (portrait and landscape) ----------- */
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
   width: 495px;
  }
 }

 </style>

I personally like the second option as it will make more smoother look in mobile devices.

Cheers,
Samitha

Thursday, June 9, 2016

LINQ Error "There is already an open DataReader associated with this Connection which must be closed first"

When working with link queries I recently got this error message, which states "There is already an open DataReader associated with this Connection which must be closed first" .

This error is caused by an already open connection to the database that is not closed. Adding a .ToList at the end of the LINQ query will resolve this issue.
e.g

 var vacancies = db.Vacancies.Where(v => v.User.Username == userName )
                                                .Take(5)..ToList();



Cheers,
Samitha