Moodle

Problem with alignment of input type text on IE

Details

  • Type: Bug Bug
  • Status: Closed Closed
  • Priority: Minor Minor
  • Resolution: Fixed
  • Affects Version/s: 1.8
  • Fix Version/s: None
  • Component/s: Forms Library
  • Labels:
    None
  • Environment:
    Problem seen in IE 6.0 on Windows
  • Affected Branches:
    MOODLE_18_STABLE

Description

Problem with alignment of input type text form element properly lining up with other form elements in IE. Seems to be some extra padding inserted to the left of an input text element. Screen shot attached.

Issue Links

This issue will be resolved by:
MDL-9745 Checkboxes badly lined up in forms lib, e.g. "students may review" settings on quiz settings screen Minor Closed
This issue is duplicated by:
MDL-7779 Forms elements misalligned in IE Minor Closed

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
Urs Hunkler added a comment -

This is an issue with all browsers. You see it better in IE6.

labels and felements have different top margins attached.

In the moment you have something like:
.fitem label { margin: 0; }
.fitem .felement { margin: 5px 0 0 10px }

When you set the same top margin the elements align ok.

Show
Urs Hunkler added a comment - This is an issue with all browsers. You see it better in IE6. labels and felements have different top margins attached. In the moment you have something like: .fitem label { margin: 0; } .fitem .felement { margin: 5px 0 0 10px } When you set the same top margin the elements align ok.
Hide
Permalink
Jamie Pratt added a comment -

here is another screen shot showing where I would expect the select and text input fields to align. On firefox they all align nicely the left edge of all controls align nicely in a line down the page. But this doesn't happen in IE. Did you misunderstand my first description of this Urs, the top padding doesn't affect this.

Show
Jamie Pratt added a comment - here is another screen shot showing where I would expect the select and text input fields to align. On firefox they all align nicely the left edge of all controls align nicely in a line down the page. But this doesn't happen in IE. Did you misunderstand my first description of this Urs, the top padding doesn't affect this.
Hide
Permalink
Urs Hunkler added a comment -

Jamie, there must be a serious IE6 bug with the text input fields. After some hours trying several things I could only find one way to solve this issue.

You may add this properties to "styles_layout.css". To get this hack also working for fieldsets you need to add the CLASS "ftext" not only to the div.felement but also to the fieldset.felement when a text input field follows.

  • html form.mform div.ftext input {
    margin-left: -10px;
    }
  • html form.mform fieldset.ftext input {
    margin-left: -10px;
    }

Does it work for you?

Show
Urs Hunkler added a comment - Jamie, there must be a serious IE6 bug with the text input fields. After some hours trying several things I could only find one way to solve this issue. You may add this properties to "styles_layout.css". To get this hack also working for fieldsets you need to add the CLASS "ftext" not only to the div.felement but also to the fieldset.felement when a text input field follows.
  • html form.mform div.ftext input { margin-left: -10px; }
  • html form.mform fieldset.ftext input { margin-left: -10px; }
Does it work for you?
Hide
Permalink
Jamie Pratt added a comment -

Thanks Urs.

I put the following code in styles_ie6.css and styles_ie7.css

/*fix for misalignment of text fields in ie */
form.mform input {
margin-left: -10px;
}

Show
Jamie Pratt added a comment - Thanks Urs. I put the following code in styles_ie6.css and styles_ie7.css /*fix for misalignment of text fields in ie */ form.mform input { margin-left: -10px; }

People

Vote (0)
Watch (1)

Dates

  • Created:
    Updated:
    Resolved:
Atlassian JIRA (v4.4.5#665-sha1:422aead) | Report a problem
Powered by a free Atlassian JIRA open source license for Moodle. Try JIRA - bug tracking software for your team.