[英]How to display two text inputs side by side in jQuery mobile?
I am trying to create a form with jQuery mobile, and I'm trying desparately to have two fields side-by-side, so they can pick the date and time on one line. 我正在尝试使用jQuery mobile创建表单,并且我极力尝试将两个字段并排放置,以便他们可以在一行上选择日期和时间。 So far I haven't seen anyone implement this without dividing the whole form into two columns. 到目前为止,我还没有看到有人将整个表格分成两列来实现。 Also jQuery mobile puts a nice <hr>
between fieldsets on small screens, but doesn't seem to do this after the 同样,jQuery mobile在小屏幕上的字段集之间放置了一个漂亮的<hr>
,但似乎在
<div class="ui-field-contain">
<fieldset class="ui-grid-a">
<div data-role="fieldcontain" class="ui-block-a">
<label for="date">Start date:</label>
<input type="date" name="date" id="date" value="">
</div>
<div data-role="fieldcontain" class="ui-block-b">
<label for="time">Start time:</label>
<input type="time" name="time" id="time" value="">
</div>
</fieldset>
</div>
This is what I have so far - I have a lot of extra parts / classes that probably duplicate the same thing - could those be interfering with each other? 到目前为止,这就是我所拥有的-我有很多额外的零件/类,它们可能重复相同的事情-那些零件/类会互相干扰吗? Also I'm using JQuery Mobile 1.3 as that's what the rest of my app is build with, as I hear there are some breaking changes if I import v1.4. 另外,我正在使用JQuery Mobile 1.3,因为这就是我的应用程序其余部分的构建方式,因为我听说如果导入v1.4,会有一些重大更改。
Requisite JSFiddle 必需的JSFiddle
Edit: I figured out the missing <hr>
, it's because the enclosing div needs data-role="fieldcontain". 编辑:我找出丢失的<hr>
,这是因为封闭的div需要data-role =“ fieldcontain”。 Wish there was a good explanation on <fieldset>
vs role=fieldcontain
vs .ui-field-contain
vs <controlgroup>
希望对<fieldset>
vs role=fieldcontain
vs .ui-field-contain
vs <controlgroup>
role=fieldcontain
<fieldset>
有一个很好的解释
You need to add float properties, and clear: none to the "data-role:fieldcontain" elements. 您需要添加float属性,并清除“ none”到“ data-role:fieldcontain”元素。 Here is a quick and dirty example. 这是一个简单又肮脏的例子。 I would recommend using an additional CSS class for any of the common classes between the two: 我建议为两者之间的任何常见类使用一个额外的CSS类:
https://jsfiddle.net/2xuqbL5e/ https://jsfiddle.net/2xuqbL5e/
<div class="ui-field-contain">
<fieldset class="ui-grid-a">
<div data-role="fieldcontain" class="ui-block-a"><!-- Add float:left and clear:none -->
<label for="date">Start date:</label>
<input type="date" name="date" id="date" value="">
</div>
<div data-role="fieldcontain" class="ui-block-b"><!-- Add float:right and clear:none -->
<label for="time">Start time:</label>
<input type="time" name="time" id="time" value="">
</div>
</fieldset>
Edit: sorry, my fiddle got screwed up. 编辑:对不起,我的小提琴搞砸了。 Should be fixed now. 现在应该修复。
Make the grid the outside container and then don't mix your grid cell divs and the fieldcontains: 使网格成为外部容器,然后不要混合网格单元格div和字段包含:
<fieldset class="ui-grid-a sideByside">
<div class="ui-block-a">
<fieldset data-role="fieldcontain">
<label for="date">Start date:</label>
<input type="date" name="date" id="date" value="">
</fieldset>
</div>
<div class="ui-block-b">
<fieldset data-role="fieldcontain">
<label for="time">Start time:</label>
<input type="time" name="time" id="time" value="">
</fieldset>
</div>
</fieldset>
You can add some CSS to get the cell spacing: 您可以添加一些CSS以获取单元格间距:
.sideByside .ui-block-a {
padding-right: 6px;
}
.sideByside .ui-block-b {
padding-left: 6px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.