Grouping inside dropdown


Grouping inside the dropdown list is normally misunderstood by developers for a long time.

The required outcome is shown below:

To get an output like this on a dropdown, it is not good to add a new item in the dropdown and then add validations for not selecting that option.

The solution to this problem is failry simple and lies in basic HTML:

<select>
<optgroup label=”Group1″>
 <option>11</option>
 <option>12</option>
 <option>13</option>
</optgroup>
<optgroup label=”Group2″>
 <option>21</option>
 <option>22</option>
 <option>23</option>
</optgroup>
</select>

Use the “optgroup” property provided by HTML itself for such groupings.

div with 100% height


With div design catching up, we end up having issues with the stretching div to the max height. Most of the time this is noticed in the footer section, which has to always stretch to the edge of the browser scroll.

I came across of a browser compatible solution to this problem and thought of sharing it here.

Check the footer section in the image below:

 The red line on the left give away the clue. That particular div is responsible for pushing the Footer down.

I am attaching the HTML here:

<style>
html{
height: 100%;
border: 0;
padding: 0;
margin: 0;
}
body{
height: 100%;
margin: 0;
padding: 0;
border: 0;
}

#spacer{
display: block;
height: 95%;
float: left;
width: 2px; /* 1px would be enough this is for display only */
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;
background-color: red; /* visual effect only */
}

#contentwrap{
display: block;
width: 99%; /* to suit but leave room for spacer */
text-align: center;
padding: 0;
margin: 0;
}

#content{
margin: 0;
padding: 0;
border: 1px solid blue;
}

#footer{
clear: both;
height: 5%;
border-top: 1px solid green;
padding: 0;
margin: 0;
}
</style>
<div id=”spacer”></div>
<div id=”contentwrap”>
<div id=”content”>
<p>Header</p>
</div><!– content –>
</div><!– contentwrap –>
<div id=”footer”>footer</div>

Hope this helps!!

Pixel by Pixel Testing


Recently one of my clients came up with a wonderful spec that really held me speechless. Each and every minute details were so crisp and clear that both the developers and testers had to do graveyard shifts. One of them was the Pixel level testing that was requested. I am sharing some of my thoughts on that there.

Tools that i would recommend:

1. Browser Developer Toolbars (IE Developer Toolbar; FireBug; Web Developer Toolbar for Safari, Chrome, Opera; Firebug for Chrome…)

2. JRuler [Download here]

3. CoolRuler [Download here]

4. MeasureIt [Download here]

As a developer, you should make use of the Developer Toolbar, especially the “Layout” section. Most of them come with inbuild rulers and color pickers as well. There are tons of other rulers and add-ons and extensions available in different browsers. Feel free to check them as well. But none of them were upto the mark as my CoolRuler. I have been using that for almost 3 years now… its pretty cool too… 🙂

Wrap text through CSS


Wrapping text through CSS is quite a necessary evil when your Analyst come up with jargons that stretches 15-20 charactors… 😉

So here’s the deal. If you need to wrap text through CSS, you can use the CSS selector defined below:

Wrap words through CSS

/* In CSS */
.wrapword{
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 white-space: pre-wrap;       /* css-3 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* In HTML */
<td class=”wrapword”> … </td>

Hope this helps!