Page MenuHomePhabricator

overriding full-width input fields in Agora mw-ui-vform
Closed, DeclinedPublic


The new Agora compact vertical form layout styles the selector ".mw-ui-vform > div input" as "display: block", turning all input fields within divs full-width.

This isn't be appropriate for some input fields, e.g. the simple captcha looks better with the input field inline and smaller

88+5 = [        ]

To fix this we could add a mw-ui-inline "reset" style, or we could make the selector only style input fields that are immediate children of the div full-width, i.e. ".mw-ui-vform > div > input". It's hard to know which approach is better until there are more clients of the form.

Version: unspecified
Severity: normal



Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 1:27 AM
bzimport set Reference to bz47520.
bzimport added a subscriber: Unknown Object (MLST).

A downside of a reset style is it's less specific, so it either must replicate the complex selector or use the frowned-upon !important, thus:

.mw-vforms-captcha {
  display: inline !important;
  width: auto !important;

You can use to figure out a way to beat the specificity. Granted, that doesn't necessarily make it any more readable than !important.

I'm not sure I understand this bug in the current context. Can you please update with a 2014 version of this bug report?

Please document bug 69449. This bug and the vform elements are not well described. I will mark as INVALID if I don't hear back within a week.

Sorry for not replying earlier.

This is not invalid in my opinion. The bug is easy to reproduce (in 2014), by setting the CAPTCHA type to SimpleCaptcha as stated in the initial report.

The first field (see screenshot I'm about to attach) should be on the same line as the math equation (the answer to the CAPTCHA is the right side of the Math equation).

Thus, there should be a way to specify this field behavior, so it can be used here among (probably) other places.

Created attachment 16510
SimpleCaptcha looks wrong on signup page because not inline


SimpleCaptcha_looks_wrong_on_signup_page.png (490×736 px, 38 KB)

May be fixable with mw-ui-input-inline

This should get fixed once bug 70974 and bug 70973 are resolved.

Sorry, ignore my last comment. Unrelated.

Mattflaschen-WMF claimed this task.

We're moving away from MW UI, so this doesn't make sense to implement.