i have linked copy code here please find the result
https://codepen.io/manikandanpa/pen/RyeEpX?editors=1010
You need to move your .ui.labeled.input into a div with .fluid.field
<form class="ui form">
<div class="fluid field">
<div class="ui labeled input">
<div class="ui label">
Example
</div>
<input class="ui input " type="text" name="example" required>
</div>
</div>
</form>
https://jsfiddle.net/4x8d56sw/
Related
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
I see there are horizontal examples in Bootstrap (form-horizontal), but Semantic UI only seems to have form layouts where the label is above the input.
In the docs section, You can find Semantic UI form inline and Grouped fields which is similar to form-horizontal of Twitter Bootstrap.
To create a new row of fields inside the form, wrap the elements inside <div class="inline field"> </div>
/* Code added for presentation in SO snippet, ignore this CSS */
* > div,
h1 {
margin-left: 20px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.3/semantic.min.css" rel="stylesheet" />
<h1>Single</h1>
<div class="ui form">
<div class="inline field">
<label>Last name</label>
<input placeholder="Full Name" type="text">
</div>
<div class="inline field">
<label>Last name</label>
<input placeholder="Full Name" type="text">
</div>
</div>
<h1>Grouped</h1>
<div class="ui form">
<div class="inline fields ui grid container centered">
<label class="four wide column">Lengthy Phone numbers</label>
<div class="field four wide column">
<input type="text" placeholder="(xxx)">
</div>
<div class="four wide column field">
<input type="text" placeholder="xxx">
</div>
</div>
<div class="inline fields ui grid container centered">
<label class="four wide column">Phone Number</label>
<div class="four wide column field">
<input type="text" placeholder="(xxx)">
</div>
<div class="field four wide column">
<input type="text" placeholder="xxx">
</div>
</div>
</div>
The first part of the solution, i.e. class="inline field" does not work if the labels have different width, also the labels are not right-aligned as in the bootstrap example. One could solve this like this
<div class="inline field">
<label style="width:30%; text-align:right;">Last name</label>
<input placeholder="Full Name" type="text">
</div>
But that's ugly.
I am doing a school project and I need to make a sign in page. I have found this code, but it is not showing up in the center of the page. It is showing up on the left side of the page. Well, the first part is showing up on the left side and the second part is showing up on the right side. I need the right side below the left side after it is centered.
Here is my code:
<div class="container">
<div class="row">
<!-- left half of the page -->
<div class="col-xs-6">
<form class="form-signin" method="post" action="login.php">
<h2 class="form-signin-heading">Please sign in</h2>
<div class="form-group">
<label for="inputEmail">Email address</label>
<input type="text" name="emailaddress" id="inputEmail" class="form-control" placeholder="Email address" value="" required autofocus>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
<!-- right half of the page -->
<div class="col-xs-6">
<h3>Not a member yet?</h3>
Join our club, it's the best!
</div>
</div>
</div>
What am I doing wrong? Should I add more code? Why is it showing up on the left side of my screen?
In the class part of the div element you want to center, write "centered".
For example, if you want to center the row, change
<div class="row">
to
<div class="row centered">
This is usually a preset style class in Bootstrap. If this doesn't work, you can also use a style setting:
<div class="row" style="text-align: center">
Simple solution:
<center>[code]</center>
Also <div class="centered"> is fine.
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>