search

orbeon / orbeon-forms

Orbeon Forms is an open source web forms solution. It includes an XForms engine, the Form Builder web-based form editor, and the Form Runner runtime.
http://www.orbeon.com/
GNU Lesser General Public License v2.1
514 stars 220 forks source link

CSS id rewriter doesn't work in media queries #3251

Open ebruchez opened 7 years ago

ebruchez commented 7 years ago

This for example doesn't work:

@media (max-width: 980px) {
  .orbeon-portlet-div #xforms-form .row {
    margin-left: 0;
    margin-right: 0;
  }
  .orbeon-portlet-div #xforms-form .row .span12 {
    margin-left: 0;
    margin-right: 0;
  }
}

That's because rewriteCSS() matches the outer selector and block but then doesn't identify the nested selector and block.

Needed for #2843.

ebruchez commented 7 years ago

The reason we want an id is that Liferay uses an id. We could hack around by producing:

@media (max-width: 980px) {
  #content .orbeon-portlet-div .row {
    margin-left: 0;
    margin-right: 0;
  }
  #content .orbeon-portlet-div .row .span12 {
    margin-left: 0;
    margin-right: 0;
  }
}

as #content is a Liferay id which must not be rewritten.