6

If I'm using Magento RWD theme, and I render a form select in the HTML source of a page,

<select><option>Hello!</option></select>

it looks like this when the page loads

enter image description here

However, if I insert the exact same HTML into the page via javascript (after the page has loaded), the select looks like this

enter image description here

That is -- the form is NOT styled.

From what I can tell, something in the ./skin/frontend/rwd/default/js/lib/enquire.js file runs after the page had loaded, and modifies the DOM nodes around the select to give it its styles. However, I'm not familiar enough with enquire.js to know how I can apply this after a page had loaded.

What can I do to style a form select to match the RWD form elements if I've manually inserted that form select into the page?

5

After a bit more investigating, this one doesn't look like it's directly related to RWD. The enquire.js library is a javascript library for managing CSS media queries. It's a part of Magento's standard RWD theme, and including it defines a global object named enquire (in a javascript module-y way).

When I removed this library, the forms weren't styled not because enquire.js did any styling, but because without that global object javascript execution halted/crashed, and some custom code in the side (custom code that added those styled fields) didn't run.

The answer to my question was to re-run the custom code that did the aforementioned styling -- probably not useful to folks running into similar problems, but hopefully the enquire information makes this worth keeping around.


| improve this answer | |
1

The issue here doesn't have anything to do with form styling directly but with the styling of the select element. Selects are notoriously difficult to style, especially in older browsers.

One solution to styling select elements is to use a javascript library that hides the select element and creates a fake dropdown using other elements. These libraries try to emulate native browser select behaviour as much as possible and will bind click and keyboard events and in the background update the value of the select element to match that of the fake select. Here's a good demo page

This solution is implemented in the RWD theme where the third party library for custom selects is only initialised on page load so any select element inserted into the DOM afterwards will not get a fake select. Judging by the screenshots you posted, only the fake selects are styled.

The solution here is to find what function calls are being made by the RWD theme on page load that affect forms/selects and calling those again once the form has been created.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.