beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Input control form alignment testing

Browse source
This commit is contained in:
Angelos Chalaris 2016-12-05 14:07:28 +02:00
parent d83b9782d1
commit e094ca5042
2 changed files with 48 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/v2/DEVLOG.md
View file

@ -593,3 +593,4 @@
- Basic structure for `input_control` module's doc page.
- Updated color definitions for almost all the `input_control` `form` elements.
- Changed the `placeholder` rules a little bit to work properly for all elements now.
- Tested a few things in `playground` about `input_control`.

48
docs/v2/playground.html
View file

@ -75,6 +75,52 @@
</div>
<!-- Insert your page content here-->
<main><div class="container" style="padding-top: 20px;">
<p>Use rows and columns for normal alignment, use input-groups in rows without columns for unaligned but just vertical forms or predesigned forms etc.</p>
<form>
<fieldset>
<legend>Aligned form (using <code>width</code> and grid - no container):</legend>
<div class="row">
<div class="col-sm-12 col-md-2" style="text-align:right;">
<label for="website" style="vertical-align: text-top;">Website</label>
</div>
<div class="col-sm-12 col-md">
<input type="text" value="" id="website" placeholder="website" style="width:85%;">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-2" style="text-align:right;">
<label for="username">Username</label>
</div>
<div class="col-sm-12 col-md">
<input type="text" value="" id="username" placeholder="username">
</div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-12 input-group">
<label for="username">Username</label>
<input type="text" value="" id="username" placeholder="username">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-2" style="text-align:right;">
<label for="weburl" style="vertical-align: text-top;">URL</label>
</div>
<div class="col-sm-12 col-md">
<input type="url" value="" id="weburl" placeholder="https://www.mywebsite.com" style="width:85%;">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-2" style="text-align:right;">
<label for="desc" style="vertical-align: text-top;">Description</label>
</div>
<div class="col-sm-12 col-md">
<textarea type="url" value="" id="desc" placeholder="description" style="width:85%;"></textarea>
</div>
</div>
</fieldset>
</form>
<form>
<fieldset>
<legend>Inline form (default style):</legend>
@ -82,7 +128,7 @@
<div class="input-group"><label for="mail">Email</label> <input type="email" value="" id="mail" placeholder="mail@server.com">&nbsp;</div>
<div class="input-group"><label for="pwd">Password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
</fieldset><br>
<fieldset class="container">
<fieldset>
<legend>Aligned form (using <code>width</code> and grid):</legend>
<div class="row">
<div class="col-sm-12 col-md-2" style="text-align:right;">