adsense

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