Home/ Questions/Q 7852807
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T19:30:37+00:00

I’m new to working with jQuery mobile forms and CSS. I’ve build a jQuery

  • 0

I’m new to working with jQuery mobile forms and CSS. I’ve build a jQuery Mobile form that is contained in a div and I’d like to be able to adjust the position of the form elements withing the , but am not having any luck so far. Below I have unsucessfully tried to align the “Submit” button with the bottom of the container using CSS. Can any one suggest a good way to do this?

<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
    />
    <style type="text/css">
        #submitButton {
            position: absolute;
            bottom: 0%;
            width: 50px;
        }
    </style>
</head>

<body>
    <div data-role="page">
        <div data-role="header"></div>
        <div data-role="content">
            <div id="lr" style="height: 500px;">
                <form action="forms-sample-response.php" method="get" style="background-color:green; height: 100%;">
                    <label for="select-choice-0" class="select">Select Label:</label>
                    <select name="select-choice-0" id="select-choice-0">
                        <option value="item1">Item 1</option>
                        <option value="item2">Item 2</option>
                        <option value="item3">Item 3</option>
                        <option value="item4">Item 4</option>
                    </select>
                    <div id="preview"></div>
                    <button type="button" data-theme="a"
                    name="Choose" value="submit-value">Choose</button>
                    <label for="textarea">Text Area Label:</label>
                    <textarea name="textarea" id="textarea-a"></textarea>
                    <button id="submitButton" class="ui-btn-top" type="button"
                    data-theme="a" name="Publish" value="Upload">Submit</button>
            </div>
            </form>
        </div>
    </div>
    </div>
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    JQM alters the html and applies alot of classes to your original button. If you inspect the element you can see that it looks completely different. Instead of playing with what JQM created too much you can just wrap the button with another div and position that div. i.e.

    <div id="submitBtnWrap">
    <button id="submitButton" class="ui-btn-top" type="button" data-theme="a" name="Publish" value="Upload">Submit</button>
</div>

    Then apply your css to the wrapper div.

    #submitBtnWrap {
    position: absolute;
    bottom: 0%;
    width: 50px;
}
    • 0