EasyUI Forum
June 21, 2021, 07:27:51 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Textbox side by side  (Read 330 times)
jega
Full Member
***
Posts: 124


View Profile
« on: May 24, 2021, 10:31:48 AM »

Hi.

I want these two textbox side by side, but with label pos top they are shown under each other
            
<input id="phone1" name="phone1" class="easyui-textbox" data-options="
                  label: 'Telefon',
                  labelPosition:'top',
                  width: '100px'">

<input id="phone2" name="phone2" class="easyui-textbox" data-options="
                  label: 'Telefon',
                  labelPosition:'top',
                  width: '100px'">

Any help
Logged
jarry
Administrator
Hero Member
*****
Posts: 1989


View Profile Email
« Reply #1 on: May 25, 2021, 01:21:57 AM »

Please refer to this code.
Code:
<div class="f-row">
<input id="phone1" name="phone1" class="easyui-textbox" data-options="
                  label: 'Telefon',
                  labelPosition:'top',
                  width: '100px'">

<input id="phone2" name="phone2" class="easyui-textbox" data-options="
                  label: 'Telefon',
                  labelPosition:'top',
                  width: '100px'">
</div>
Logged
jega
Full Member
***
Posts: 124


View Profile
« Reply #2 on: June 08, 2021, 02:36:08 PM »

Hi Jarry

Can't get it to work. Still under each other

Just wrapped the 2 textbox inside the <div class="f-row"></div>. Is that all ??

Jesper

Logged
jarry
Administrator
Hero Member
*****
Posts: 1989


View Profile Email
« Reply #3 on: June 09, 2021, 02:31:21 AM »

The code below works fine.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic TextBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="f-row">
    <div style="margin-right:10px">
      <input id="phone1" name="phone1" class="easyui-textbox" data-options="
                    label: 'Telefon',
                    labelPosition:'top',
                    width: '100px'">
    </div>
    <div>
      <input id="phone2" name="phone2" class="easyui-textbox" data-options="
                    label: 'Telefon',
                    labelPosition:'top',
                    width: '100px'">
    </div>
  </div>
</body>
</html>
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!