I'm getting an extra line-feed in the textarea widget between the underline and the input area.
Here's what I'm getting:
You can see the extra space below the default text and the line for the widget
My code is pretty straight-forward I think:
<div class="row">
<div class="input-field col m4">
<i class="material-icons prefix">linear_scale</i>
<textarea id="r1-value" class="materialize-textarea"></textarea>
<label for="r1-value">R1 Value</label>
</div>
<div class=col m4">
<select class="browser-default" name="r1-units">
<option value="1">Ω</option>
<option value="2">kΩ</option>
<option value="3">MΩ</option>
</select>
<label>Resistor Units</label>
</div>
</div>
<div class="row">
<div class="input-field col m4">
<i class="material-icons prefix">linear_scale</i>
<textarea id="r2-value" class="materialize-textarea"></textarea>
<label for="r2-value">R2 Value</label>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('select').formSelect();
});
</script>
Anyone have any idea what could be causing this?
Related
I have several textboxes within Bootstrap columns that I want to bring closer to one another, but no matter what I do the distance between textboxes stays the same.
How can I
Shorten the distance between the textboxes?
Shorten/make more narrow the column background or bring the textbox closer to the outside of a column
Here is the code that I have
<div class="col-xs-12 col-md-2">
<div class="well form-group">
<div class="bisformdynamiclabel">Box 1</div>
<input class="form-control" type="text" asp-for="myclass.box1" />
<span asp-validation-for="myclass.box1" class="alert-danger"></span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="well form-group">
<div class="bisformdynamiclabel">Box 2</div>
<input class="form-control" type="text" asp-for="myclass.box2" />
<span asp-validation-for="myclass.box2" class="alert-danger"></span>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="well form-group">
<div class="col-lg-1">
<div class="bisformdynamiclabel">Box 3</div>
<input class="form-control" type="text" asp-for="myclass.box3" />
<span asp-validation-for="myclass.box3" class="alert-danger"></span>
</div>
</div>
</div>
Thank you in advance for everyone's help
Since I have save button in the right menu. so when I pressed save in the right menu, it should save the values into the bean without submitting the form.
<form action="personal-info.action" id = "userform" name="userform" method="post">
<div class="clearfix">
<h2>Basic Information</h2>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="form-group clearfix col-sm-12 col-xs-6">
<label>Title</label>
<div>
<s:select list="titleList" listKey="displayKey" onChange="jsFunction()" listValue="displayValue" name="title" id ="title" cssClass="selectpicker show-tick" required="true" />
<!-- <select class="selectpicker show-tick" data-width="auto" name="title" required>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
</select> -->
</div>
</div>
<div class="form-group clearfix col-sm-12 col-xs-6">
<label>Gender</label>
</form>
I want to place select menu and input type in a same line.
This is the link to jsfiddle demo.
html
<div class="lin">
<select data-inline="true">
<option>1</option>
<option>hello</option>
</select>
I tried it using style but i didn't get please any one help me.
Just place it in a grid, jQuery Mobile has available solution.
Working example: http://jsfiddle.net/Gajotres/26uph/
HTML:
<div class="ui-grid-a">
<div class="ui-block-a"><input type="text"/></div>
<div class="ui-block-b"><select><option>1</option><option>2</option></select></div>
</div><!-- /grid-a -->
HTML:
<div class="left">
<select data-inline="true">
<option>1</option>
<option>hello</option>
</select>
</div>
<div class="right">
<input type="text" name="txt" value=""/>
</div>
<div class="clear">
</div>
CSS:
.left{
display:inline;
float: left
}
.right{
float:right;
}
.clear{
clear:both;
}
take a look: http://jsfiddle.net/DRs8p/3/
I have a control group of buttons that looks like this:
<div data-role="fieldcontain">
<label>Ahead</label>
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
I'd like for the label to look like the rest of the labels in my form. As you can see, the label is not inline with the control group as it is with other controls:
How do I wrap a control group in a field container and have the label appear inline? Is it possible? I didn't see any examples of this on the jqmobile site.
The entire markup for the form is:
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-native-1">Metric</label>
<select name="select-native-1" id="select-native-1">
<asp:Repeater ID="ui_metrics" ClientIDMode="Static" runat="server">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "id")%>'><%#DataBinder.Eval(Container.DataItem, "friendly_name")%></option>
</ItemTemplate>
</asp:Repeater>
</select>
<div data-role="fieldcontain">
<label for="select-native-1">Interval</label>
<select name="select-native-1" id="select1">
<asp:Repeater ID="ui_interval" ClientIDMode="Static" runat="server">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "id")%>'><%#DataBinder.Eval(Container.DataItem, "friendly_name")%></option>
</ItemTemplate>
</asp:Repeater>
</select>
</div>
<div data-role="fieldcontain">
<label for="datetime-4">Start Date</label>
<input type="datetime-local" name="datetime-4" id="datetime-4" value="" />
</div>
<div data-role="fieldcontain">
<label>Ahead</label>
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
<div data-role="fieldcontain">
<div data-role="rangeslider">
<label for="range-7a">Index:</label>
<input type="range" name="range-7a" id="range-7a" min="0" max="100" value="0" />
<label for="range-7b">Index:</label>
<input type="range" name="range-7b" id="range-7b" min="0" max="100" value="100" />
</div>
</div>
</div>
</div>
Solution
Working example: http://jsfiddle.net/Gajotres/PMrDn/64/
HTML:
<div data-role="fieldcontain" id="custom-fieldcontain">
<label>Ahead</label>
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
CSS:
#media all and (min-width: 28em){
#custom-fieldcontain label {
width: 22% !important;
display: inline-block;
}
#custom-fieldcontain [data-role=controlgroup] {
width: 78% !important;
display: inline-block;
}
#custom-fieldcontain [data-role=controlgroup] .ui-controlgroup-controls {
width: 100% !important;
}
#custom-fieldcontain [data-role=controlgroup] .ui-controlgroup-controls a {
width: 24.5% !important;
}
}
Info
Working example was made using your HTML. Media queries are used directly from jQuery Mobile css file. Rest of CSS is a label fix / content fix.
Here an example without customizing the fieldcontainer...
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Ahead</legend>
<input type="radio" name="radio1" id="hour" checked="checked">
<label for="hour">Hour</label>
<input type="radio" name="radio1" id="day">
<label for="day">Day</label>
<input type="radio" name="radio1" id="week">
<label for="week">Week</label>
<input type="radio" name="radio1" id="month">
<label for="month">Month</label>
</fieldset>
</div>
They dont stand in the same line because div with controlgroup is a block element. You could use one of the two solutions which I've used before :
Solution 1 : Using CSS to achieve the inline look
Solution
Just add a display: inline property to the control group, you're good to go.
[data-role=controlgroup] {
padding-left : 2em;
display: inline;
}
Note
The CSS selector I've used is just an indicator. Try using ID for the control group you want to change. Also, make sure that the custom style you are adding is loaded after jQM's style. To adjust the seperation between label and buttons, change the padding-left to your hearts' content.
Solution 2: Using grids to set up the layout
Grids provide a good way to arrange elements in jQM. A typical grid layoud would look like this :
<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Block B</div></div>
</div><!-- /grid-a -->
This is a typical 2-column layout, which we'd use here as well. So here's how your layout must look like :
<div data-role="fieldcontain">
<div class="ui-grid-a">
<div class="ui-block-a" style="width:20%">
<label>Ahead</label>
</div>
<div class="ui-block-b" style="width:70%">
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
</div>
</div>
Note
You could adjust the width of the ui-block-* elements to any size you need by changing the width property in the HTML tag.
A consolidated Demo
http://jsfiddle.net/bGjZ8/2/
I have a very simple jquery mobile page. It has a header, a footer and the body has asks for login and password with textboxes, and then you can submit.
My problem is that jQuery Mobile makes the textboxes hold about 100 characters, making my entire display way too small. Is there a way to force it to make the textboxes only hold about 12 characters and then make everything in the body larger?
Here is my code:
<div data-role="page" id="login">
<div data-role="header">
<h1>heade</h1>
</div>
<div data-role="content">
<form action="login.py" id="login_form" data-ajax="false">
<div data-role="fieldcontain">
<label for="name" style="font-size: px; font-weight: bold;"> User Name: </label>
<input type="text" name="uname" minlength="3" />
</div>
<div data-role="fieldcontain">
<label for="password"> Password: </label>
<input type="password" name="password" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="reset" value="Reset" />
</div>
<div class="ui-block-b">
<input type="submit" value="Submit" />
</div>
</fieldset>
</div>
</form>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
</ul>
</div>
</div>
</div>
I see this post is old, but maybe this will help someone...
Did you try adding something like this to your css?
div input { width: 12px !important; }