Home/ Questions/Q 7398381
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T03:51:46+00:00

Is it possible to have a textbox and a button horizontally using JQuery Mobile?

  • 0

Is it possible to have a textbox and a button horizontally using JQuery Mobile?

using data-inline="true" works for buttons but not when mixed with button and textbox.

data inline example

data-type="horizontal" also didn’t work.

<!DOCTYPE html> 
<html> 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
<script type="text/javascript">

   $(document).ready(function(){

           $("#clearMeClearMe").click(function(){
               //$(this).hide();
               $("#clearMe22").val("");
           });
});
</script>
<body> 


<div data-role="page">
    <div data-role="header">
        <h1>Textbox Clear Demo</h1>
    </div><!-- /header -->

    <div id="content">
        <input type="text" id="clearMe22" data-inline="true" name="clearMe22"/>    
            <a href="#" data-role="button" data-icon="delete" 
                      data-iconpos="notext" id="clearMeClearMe">Clear</a>
    </div>
</div><!-- /page -->
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Seems to work best for me when I float the button right and restrict the width of the text input:

    <span>
            <input style="width:90%;display:inline-block" type="text" id="clearMe22" data-inline="true" name="clearMe22" />    
            <a style="float:right" href="#" class="ui-input-clear" data-role="button" data-icon="delete" 
                      data-iconpos="notext" id="clearMeClearMe">Clear</a>
</span>

    http://jsfiddle.net/xeyyr/1/

    But someone else might be able to provide a more elegant CSS solution.

    • 0