Question

We have started using Wijmo (based on the jQuery UI & jQuery UI Theme Roller) on one of our applications but have a problem with the dropdown and button in the Wijmo Form Decorator styling.

I have had a look at the Wijmo Docs but they haven’t been helpful.

We have initiated the script and the style is applied however on all forms I cannot get the dropdown item to align correctly with other elements.

The initiation script is as follows:

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
        $("select").wijdropdown();
        $(":input[type='radio']").wijradio();
        $(":input[type='radio']").wijcheckbox();
        $("button").button();
    });
</script>

As you will notice the .button() and .wijdropdown() functions are applying to each instance of the tag versus a class or an ID – we have the same problem with all 3 methods and have gone this way as this is what is desired through the entire application.

You can see a screenshot of the problem here:

I have been using Firebug to try and work out what the problem is and I suspect part of it is that Wijmo converts the select element into a div and applies JS to enable the select functionality.

I have been using both Firebug and Chrome developer tools to debug this, I notice that there is no margin being applied either above or below either element.

I have removed all other stylesheets that are not Wijmo or ThemeRoller but no change. We are using the “rocket” theme that comes with Wijmo.

Each time I try and manipulate the margin-top property on either it realigns all elements that are inline with the input search field directly above.

The HTML code for the form is:

<FORM id="serialSearch" name="serial_search" method="POST" action="index.php">
    <label>Serial number: </label><input type="text" name="query" id="query" size="30" autocomplete="off" value="<? echo $serial_query; ?>" />
    <br />
    <select name="searchType">
        <option value="standard">Standard</option>
        <option value="fuzzy">Fuzzy</option>
    </select>
    <button>Search serial numbers</button>
    <input type="hidden" name="serial_submit" id="serial_submit" value="search_serials" />
</FORM>

It is really important for us to get this aligning correctly and appreciate any suggestions, thanks in advance.

Answer 1

you need to wrap all the forms elements inside a div with let’s say a class “input” and apply this style to the div elements:

div.input {
    display: inline-block;
    vertical-align: top;
}

here you can see a jsfiddle that shows how it looks like.

as a suggestion, next time create a jsfiddle more than a screenshot so it’s easier for people and for you to test your code.