Doug's Resume
OO Lexicon
Chat with Doug!
Recent Entries
You may also be interested in...

heaters
hotels boeken in 7 sec
Engagement Rings
Online Dating Australia




SURF'S UP!
You:
Your Web Site:
<< May, 2008 >>
SMTWTFS
123
45678910
11121314151617
18192021222324
25262728293031
Search Blog

ColdFusion Jobs
Recent Comments
Re: Viewing Option Text (in IE7) that's Wider than the Select List (by Dan Roberts at 5/15 2:38 PM)
Re: Viewing Option Text (in IE7) that's Wider than the Select List (by Dan Roberts at 5/15 10:06 AM)
Re: Inline CSS and Ajax Issue with IE (by Ben Nadel at 5/14 11:50 AM)
Re: The Perfect Alternative to Gas Powered Vehicles (by Thomas Messier at 5/09 12:47 PM)
Re: Promoting Family Unity: Lowering Your Utility Bills! (by Fernando Lopez at 5/07 10:12 PM)
Re: Why I Hate ORMs (a solicited rant) (by Richard at 5/06 10:56 AM)
Re: Why I Hate ORMs (a solicited rant) (by dougboude at 5/06 10:27 AM)
Re: Why I Hate ORMs (a solicited rant) (by Richard at 5/06 6:50 AM)
Re: Why I Hate ORMs (a solicited rant) (by Sean Corfield at 5/06 1:40 AM)
Re: Why I Hate ORMs (a solicited rant) (by Steve Bryant at 5/05 5:07 PM)
Categories
Archives
Photo Albums
Funnies (5)
Family (3)
RSS
Reciprocal Links

Powered by
BlogCFM v1.11

14 May 2008
Viewing Option Text (in IE7) that's Wider than the Select List
Though a "minor" cosmetic issue at times, it can be challenging to come up with creative ways to accommodate what I consider to be IE's shortcomings regarding the control of form items, in particular select lists. With at least one project I'm currently working on, I have a select list that lives in a fixed width div, yet there are times when the text values of the options are wider than the div itself. The client respectfully requested that I find a way to make the full option text display whenever the user clicks on the select list, so I of course referred to my reliable friend Google. After investing a couple of hours exploring different approaches to the challenge, I found none that I could get to meet my needs in both Firefox and IE. Oh, by the way, Firefox AUTOMATICALLY displays the full option text when you drop down without any developer intervention needed.  Do you realize how much development time could be saved if IE worked the same as Firefox??? Anyway, I digress.

The solution I came up with (which I didn't find anywhere in all of my googling) was very simple: when a user clicks the select list, swap out the class to one without width restrictions. When they make a selection, swap the class back to one WITH width restrictions.

I make sure that I set my container div to a fixed width and set the overflow to 'hidden', that way when my select list suddenly grows, it doesn't force the div to widen OR overlap any adjacent divs. Without further adieux then, a simple before and after (bear in mind that if you're viewing this in Firefox, you won't see any problem with the first list; it's only BILL'S BROWSER that has the issue):

I am the problem select list:




I am the better select list:



Here is the code for the samples above:

<style>
.ctrDropDown{
    width:145px;
    font-size:11px;
}
.ctrDropDownClick{
    font-size:11px;

    width:300px;

}
.plainDropDown{
    width:145px;
    font-size:11px;
}
</style>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the problem select list:<br><br>
<select name="someDropDown" id="someDropDown" class="plainDropDown">
    <option value="">This is option 1.</option>
    <option value="">This is the second option, a bit longer.</option>
    <option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>
<br>
<hr width="150px;" align="left">
<br>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the better select list:<br><br>
<select name="someDropDown" id="someDropDown" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';">
    <option value="">This is option 1.</option>
    <option value="">This is the second option, a bit longer.</option>
    <option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>


One More Note:
This solution is a little bit less than perfect in that if you click the select list and don't choose a NEW value, the class doesn't switch back until you actually blur, or click off of, the select list. I have been unable to find a solution to that one anomaly, so if anybody out there has an idea, please do share!

Hope this helps somebody.

Doug out.
Posted by dougboude at 11:31 AM | PRINT THIS POST! | Link | 2 comments



Inline CSS and Ajax Issue with IE
IE Got Me Again
After spending more time than I care to say troubleshooting a CSS issue with IE7, I thought I'd share the details here in case it saves anybody else some time later down the road.

The Scenario...
I have an application that updates the contents of one of its divs using an ajax call that returns html. Within that retrieved html is a style block (<style>...</style>) defining how I want my table headers (<th>...also contained within the retrieved html) to appear.

IN A NUTSHELL: IE7 does not recognize inline styles that were retrieved via an ajax call.

Perhaps this is a "duh" item to some of you who already knew it, but since my beloved FIREFOX accepted them just fine, it didn't occur to me until I had tried every other possible iteration and syntax to move the styles out of my retrieved html and into my app's global CSS template, which (by the way), is the solution to this issue.

Hope this saves someone else some time and emotional pain.
Posted by dougboude at 11:00 AM | PRINT THIS POST! | Link | 1 comment