CSS and shifting form fields

@ssquareMay 19.2008

I posted this message in Javacript forum. May be CSS forum is a better match. Lets see if I get any response in this forum

———————————-

I have run into a weird issue and looking for some help from you javascript/css experts. I have attached a simple html file (extension has been changed to txt from html for upload purpose). The html file shows a form that has a drop down field, a button, and a h2 text element.

Our goal is that when a drop down box is clicked, trigger an action that changes the style of the drop down element by highlight the html element. In order to achieve that, we have a onfocus javascript function that is suppose to change the css class when the element is focused. But for reasons we are not sure, anytime we try to do anything with the css class of the element, it changes the layout by shifting the boundary little bit down. To make sure that the new css class is not changing stuff around, we just assign the current css class to the element again – to make sure that there is nothing going behind the scene that we don’t understand – but we still see the same results.

To understand the issue better, I have attached a very simple 30 line html file. You will notice that when the element is clicked, the boundary shifts down. Also, as an experiment, change this line

[CODE].mediumbutton {float:left: margin:bottom 1em}[/CODE]

[CODE].mediumbutton {float:left: margin:bottom [B]11[/B]em}[/CODE]

You will see that the shift is much bigger now. So this leads us to believe that somehow when the browser initially loads the page, it is not honoring all the css styles(it does not distinguish between 1em and 11em when it loads the page initially) , and it only honors the 11em change when something is clicked.

We are using IE 7

Any help would be appreciated.

Thanks
Ssquare

to post a comment

CSS

4 Comments(s) _↴

@toicontienMay 19.2008 — #I don't see an attachment to your post. Most likely you are running into a hasLayout problem. Some parent element is not sizing itself correctly because you need to add a CSS style that triggers the hasLayout DOM property to be true.

On such CSS property is the "zoom" property. Giving "zoom: 1;" to an element in Internet Explorer triggers hasLayout.

@ssquareauthorMay 19.2008 — #I will read on has layout issue. In the meantime, I have attached the html file. Sorry about it.

[upl-file uuid=be22fbaf-0a6c-4683-b641-b38b43abe181 size=1kB]test_htm.txt[/upl-file]

@toicontienMay 19.2008 — #First, the "event" variable is not defined in any other browser, but we're just concentrating on IE right now.

Secondly, DIV tags must have closing tags.
<div class="nifty" />
Becomes:
<div class="nifty">
And now you need a closing tag for that opening DIV.

Here is the amended HTML and JavaScript. Look it over and see if this gets you what you are looking for, all though I have no idea why you are reassigning a class name to an element.

If you want to actually change how the SELECT tag looks, then you're out of luck. You cannot do much to change how SELECT tags look, as they are often an element drawn directly from the operating system, or the web browser itself. Most styles for SELECT and OPTION tags are out of the reach of CSS.

Instead, you could try encasing the SELECT with a SPAN tag, and then changing the class name of the SPAN in order to "highlight" the SELECT tag.

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Test</title>
 <style type="text/css">
 .button {
 zoom: 1;
 }
 
  div.nifty {
   border: 1px solid #036;
   }
 
   .mediumbutton {float:left;  margin-bottom:1em; }
 
   </style>
 
 
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <script type="text/javascript">
   function Highlight(form) {
   form.elements.Save.className = form.elements.Save.className;
   } 
   </script>
  </head>
 
  <body>
   <div class="nifty">
   <form id="personalInfoForm" method="post" action="personalinfo.htm">
   <label>DropDown:</label>
   <select id="dd" name="dd" onfocus="Highlight(this.form);" >
   <option value="true" selected="selected">Yes</option>
   </select>
 
   <h2>Text:</h2>
 
   <div class="buttons">
   <button id="Save" name="Save" type="submit" value="Save" class="mediumbutton"> Save</button>
   </div>
 
   </form>
   </div>
  </body>
 </html>[/code]

@ssquareauthorMay 20.2008 — #Thanks a lot for taking time to help me out. I think I am getting better understanding of some of the issues around our approach. I tried the changes that you suggested, but the problem remains. I made four changes in the code you posted - The changes are in bold

1. I added a width:100% in the nifty class to pull the button inside the square box, without it the button was outside the border

2. I added a span tag around select box as you suggested

3. Assigned an empty css class - largespace - to the span element.

4. The javascript function modifies the class of select span rather than select itself.

Here is the code that I tried (I have attached the file too)

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Test</title>
 <style type="text/css">
 .button {
 zoom: 1;
 }
 
   div.nifty {
   [B]width: 100%;[/B]
   border: 1px solid #036;
   }
 
   .mediumbutton {float:left;  margin-bottom:11em; }
   [B].largeSpace {}[/B]
 
   </style>
 
 
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
 
   <script type="text/javascript">
   function Highlight(form) {
   [B]var elementClassName = document.getElementById("dropdown_span").className;
   document.getElementById("dropdown_span").className = elementClassName;[/B]
   } 
   </script>
  </head>
 
  <body>
   <div class="nifty">
   <form id="personalInfoForm" method="post" action="personalinfo.htm">
   <label>DropDown:</label>
   [B]<span id="dropdown_span" class="largeSpace">[/B]
   <select id="dd" name="dd" onfocus="Highlight(this.form);" >
   <option value="true" selected="selected">Yes</option>
   </select>
   </span>
 
   <h2>Text:</h2>
 
   <div class="buttons" >
   <button id="Save" name="Save" type="submit" value="Save" class="mediumbutton"> Save</button>
   </div>
 
   </form>
   </div>
  </body>
 </html>
 [/CODE]

You will notice that when you click on drop down, the box expands, causing us issues. (I changed the margin from 1 em to 11 em to amplify the affect of shifting)

Another related question is

For highlighting function, you suggest we use span tag for select box. Does the same recommendation holds true for other elements such as input, button etc. Is there any material on internet that talks about pros/cons of doing so.

Thanks again for your time

Ssquare

[upl-file uuid=64862b98-7241-41ca-a160-d2a59332cfeb size=1kB]test_htm.txt[/upl-file]

Also in #CSS _↴

Big CSS Files or Many HTTP?Safari with box model problems height:auto not working correctly?

Success!

Help @ssquare spread the word by sharing this article on Twitter...

Tweet This

CSS and shifting form fields

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS and shifting form fields

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴