I'm working with input fields in PrimeNG and not really sure how to move labels to left of fields. Here's an image of what I'm trying to do:
Here's my working code:
PLUNKER
<div class="ui-g-12 ui-md-6 ui-lg-4">
<label>Set Date</label>
<input id="input" type="text" size="30" pInputText [(ngModel)]="text">
</div>
You can use a small column ui-grid-col4 for the labels and a bigger one ui-grid-col8 for the inputs :
<div class="ui-g ui-fluid">
<div class="ui-grid-col-4">
<span>Phone Ext</span>
</div>
<div class="ui-grid-col-8">
<p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="val5" placeholder="(999) 999-9999? x99999"></p-inputMask>
</div>
<br/><br/><br/>
<div class="ui-grid-col-4">
<span>Serial Number</span>
</div>
<div class="ui-grid-col-8">
<p-inputMask mask="a*-999-a999" [(ngModel)]="val6" placeholder="a*-999-a999"></p-inputMask>
</div>
</div>
See working Plunker
If you want more details about the grid, see the doc
Related
I am trying to create UI with different containers having different input type elements.
Below is code snippet to embed datetime picker in row with label on top and datetime picker below,but its not aligning properly as the datefrom and dateto in the same row.
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-md-5">
<div class="row justify-content-start">
<div class="input-group date col-sm-6 " data-provide="datepicker">
<label for="DateFrom" class="control-label">Date From</label>
<input type="text" class="form-control" id="DateFrom">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
<div class="input-group date col-sm-6" data-provide="datepicker">
<label for="DateTo" class="control-label">DateTo</label>
<input type="text" class="form-control" id="DateTo">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</div>
</div>
Please let me know how can align the fields in different containers on the screen horizontally inside big container.
What other css rules are effecting the label? it looks like DateTo either has an alignment rule or an offset also. I sugest using the inspect elemt tool and checking the computed style rules on both the label and its containing div. They have the same class so something must be different.
When using the has-feedback class to add an icon on a form field and using the bootstrap tooltip, the icon moves up. I get the same behavior with chrome, firefox and ie.
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="form-group form-group-lg has-feedback">
<input class="form-control" name="foo" placeholder="foo" data-toggle="tooltip" title="Hooray!" type="text">
<span class="glyphicon glyphicon-euro form-control-feedback"></span>
</div>
</div>
</div>
JS File
$('[data-toggle="tooltip"]').tooltip();
Here the example
Bootply
Does anyone know how to solve this problem? Thank you
The reason for it failing is this Bootstrap selector:
.form-group-lg .form-control+.form-control-feedback {...}
When you hover the field, the tooltip's <div> is inserted immediately after the input, thus breaking the + condition since the icon is no longer immediately following the input. A solution is to move the tooltip on the parent element, so that it doesn't interfere with children styling:
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="form-group form-group-lg has-feedback" data-toggle="tooltip" title="Hooray!">
<input class="form-control" name="foo" placeholder="foo" type="text">
<span class="glyphicon glyphicon-euro form-control-feedback"></span>
</div>
</div>
</div>
Demo: http://www.bootply.com/tohoEsh0cX
Here is my jsFiddle with full code example.
I would like:
The entire "page content" container (that is, the <h1> that starts "Sign in to..." as well as the entire <form> element) to be centered in the screen; and
The "Need help?" link needs to be left aligned, aligning with the submit button's left side
I am trying to style center the container via text-center. I am trying to align the link via text-left. Neither are working:
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h1 class="strong-primary">Sign in to continue to Audit<b>Cloud</b>.</h1>
</div>
<div class="col-md-4 text-center">
<form role="form">
<div class="form-group">
<input type="email" class="form-control" id="signin-email" placeholder="Your email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin-password" placeholder="Password">
</div>
<button type="submit" class="btn form-control btn-lg btn-success">Sign in</button>
<div class="form-group">Need help?</div>
</form>
</div>
</div>
</div>
Any ideas?
You need to apply text-align:left; to the containing <div>. Instead of class="text-left, use style="text-align:left;. I put those changes into your fiddle:
http://jsfiddle.net/fjL4f2ew/1/
I have a row that is split down into various columns and sub-columns. In the proper example there are several more inputs but I've removed them for clarity as they're not needed for this example.
<form id="inputForm" class="form-inline" role="form">
<div class="row">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="col-xs-6">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon">mm</span>
</div>
</div>
<div class="col-xs-2">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</form>
If you look at http://jsfiddle.net/53vu25ad/ you can see the issue as "Primary Packaging" and "Vol: 999 cm3" are not vertically aligned within the row - they're top aligned. Is there something I'm missing here?
(ps: On my form, the "height" label and the input element are on the same line, I have no idea why they're not in this jsfiddle, but it's not relevant to the question - I would still expect to see the two labels either side aligned vertically).
Using bleeding-edge not-yet-released Bootstrap v3.2.1: JS Fiddle
The trick is to use a dummy .form-control-static:
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
<p class="form-control-static"> </p>
</div>
</div>
Well without using experimental bootstrap, the way I got around this was adding a simple custom class that matched the form-control element height of 34px.
By setting the row line-height to the same, it automatically valigns content.
.fixedRow {
line-height: 34px;
}
<div class="row fixedRow">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
...
Updated jsfiddle: http://jsfiddle.net/53vu25ad/2/
Please find the updated jsfiddle
You may need to use the .form-group class for .form-inline
<form id="inputForm" class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="form-group">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon fw1">mm</span>
</div>
</div>
<div class="form-group">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</div>
</form>
I have some "col-md-12" divs on forms that appear to "cover" preceding inputs such that they are not clickable.
I have created a bootply with Bootstrap 3.0.0 to illustrate the issue. unclickable inputs
If I make the same bootply with bootstrap 3.0.3 then the input fields are now accessible clickable inputs
What I want to know is whether this is a bootstrap bug that has been fixed or whether my layout is breahing some rule or other?
you need to put your cols into a div with the row class
<form>
<div class="row"> // HERE
<div class="col-md-6">
<label class="control-label col-md-4">Home Phone:</label>
<div class="col-md-8">
<input id="contact_detail_home_phone" name="contact_detail[home_phone]" size="30" type="text" value="123 5668" class="form-control">
</div>
</div>
<div class="col-md-6">
<label class="control-label col-md-4">Work Phone:</label>
<div class="col-md-8">
<input id="contact_detail_work_phone" name="contact_detail[work_phone]" size="30" type="text" value="582 5135" class="form-control">
</div>
</div>
</div>
<div class="row"> // AND HERE
<div class="col-md-12">
<label class="control-label">Notes:</label>
<textarea cols="40" id="contact_detail_notes" name="contact_detail[notes]" rows="4" class="form-control"></textarea>
</div>
</div>
</form>
If you use medium size columns col-md- you can only have total 12 column units per each <div class=row>.
So, don't put more than total 12 units of col-md instead one row.
I assume this is limitation of doing layouts with columsn, floating divs and web page rendering legacy.