twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.01k stars 78.76k forks source link

Form fields get disabled when using form in a modal which is inside a form (Bootstrap v2.2.2) #14430

Closed rajkumaradass closed 10 years ago

rajkumaradass commented 10 years ago

Hi,

I am using Bootstrap v2.2.2 for our web page in which, we are facing a issue with login page getting disabled in browser(tested with chrome/firefox/opera) - i.e., all the form fields and the settings button get disabled from clicking/editing in it. This problem occurs whenever there's a different combination of screen resolution + browser zoom size or just more than a 100% browser zoom size. With below various possible resolutions(for Landscape mode) following results(& workarounds to overcome the problem) are observed:

  1. 1366X768 – works well at 100% browser zoomed size(which is default)
  2. 1360X768 – works well at 100% browser zoomed size
  3. 1280X768, 1280X720, – Fields get disabled at 100% zoom and when zoomed out to <100%, fields become editable
  4. 1024X768 – Fields get disabled at 100% zoom and when zoomed out to <90%, fields become editable
  5. 960X600 – Fields get disabled at 100% zoom and when zoomed out to <75%, fields become editable
  6. 800X600 – Fields get disabled at 100% zoom and when zoomed out to <67%, fields become editable.

The rootcause appears to be the contents inside the "modal" usage(id="cfgSettings") which opens upon clicking on the settings button which is inside the form field. Have i done something wrong here with the placement or this kind of structuring is not supported? Below i have pasted the html body contents as well attached the webpage snapshot here with. Looking for your inputs.

```

    test service

```

test

cvrebert commented 10 years ago

Bootstrap v2 is no longer supported. Also, you're not even using the final release in the v2 series, which is v2.3.2.