Front Page

User FAQ
Developer FAQ
Community Docs
Development
Quality
Dream Team
Popular Projects
Bug DashBoard
Hudson
Sources
Nightly
Wiki Etiquette
Formatting Rules
Terms Of Use
Unlinked Pages
Undefined Pages
Page Index
Recent Changes
Find Page

[RSS]

Button: Why does button component render with incorrect width on IE7?

When displayed in IE7, the button component might be rendered with an incorrect width. This problem occurs when the button is placed using absolute positioning. For example, Netbeans Visual Web Pack uses absolute positioning to place components in Grid Layout Mode, and in such situation this problem could occur.

IE7 expects a value to be specified for the width of buttons. If a width attribute is not specified, the width is set to width:auto, which results in the button's width being set to the entire available width of the button's container element. For example, if the button style has left=130px then the button will start at 130px left and will expand to the width of the <body>.

Workarounds

There are several workarounds that can be used in Netbeans VWP to solve the problem.

  • Specify the width property for the button, or resize the button in the IDE to make the IDE assign a width to the button.
  • In the IDE, drop the button into a Group Panel to put the button inside a span tag. In this case no need to set the positioning as IDE sets the positioning for Group Panel.

Example: JSP code of Button inside Group Panel component 

<webuijsf:panelGroup binding="#{Page1.groupPanel1}" id="groupPanel1" 
                  style="position: absolute; left: 240px; top: 168px">
            <webuijsf:button binding="#{Page1.button1}" id="button1" text="Button"/>
  </webuijsf:panelGroup>