mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
fixed input-groups and variations
This commit is contained in:
parent
dffa3bcddc
commit
679c68a107
|
@ -2017,14 +2017,23 @@
|
|||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label">Input addons</label>
|
||||
|
||||
<label class="control-label" for="addon1">Input addons</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</span>
|
||||
<input type="text" id="addon1" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label floating-label" for="addon2">Floating label addon <small>(right only)</small></label>
|
||||
<div class="input-group">
|
||||
<input type="text" id="addon2" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
@ -221,6 +221,14 @@ select.form-control {
|
|||
}
|
||||
}
|
||||
|
||||
.input-group-button-variation(@vertical-padding) {
|
||||
.input-group-btn {
|
||||
.btn {
|
||||
margin: 0 0 @vertical-padding 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.form-group {
|
||||
.form-control {
|
||||
|
@ -228,28 +236,42 @@ select.form-control {
|
|||
}
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
|
||||
// sm margin
|
||||
&.form-group-sm {
|
||||
.input-group-button-variation(@md-input-padding-small-vertical);
|
||||
}
|
||||
|
||||
// lg margin
|
||||
&.form-group-lg {
|
||||
.input-group-button-variation(@md-input-padding-large-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
// default margin
|
||||
.input-group-button-variation(@md-input-padding-base-vertical);
|
||||
|
||||
.input-group-btn {
|
||||
padding: 0 12px; // match addon spacing
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.input-group-btn .btn {
|
||||
border-radius: 4px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Input files (kinda hack)
|
||||
.form-group input[type=file] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
//position: absolute;
|
||||
//top: 0;
|
||||
//right: 0;
|
||||
//bottom: 0;
|
||||
//left: 0;
|
||||
//width: 100%;
|
||||
//height: 100%;
|
||||
//z-index: 100;
|
||||
}
|
||||
|
||||
// Ugly override of Bootstrap border
|
||||
|
|
|
@ -72,12 +72,11 @@
|
|||
.each( function() {
|
||||
var $input = $(this);
|
||||
|
||||
// Now using/requiring form-group standard markup (instead of the old div.form-control-wrapper)
|
||||
var $formGroup = $input.parent(".form-group");
|
||||
// Requires form-group standard markup (will add it if necessary)
|
||||
var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
|
||||
if($formGroup.length === 0){
|
||||
//console.debug("Generating form-group for input", $this);
|
||||
$input.wrap("<div class='form-group'></div>");
|
||||
$formGroup = $input.parent(".form-group"); // find node after attached (otherwise additional attachments don't work)
|
||||
$formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
|
||||
}
|
||||
|
||||
// Legacy - Add hint label if using the old shorthand data-hint attribute on the input
|
||||
|
@ -115,6 +114,7 @@
|
|||
// See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
|
||||
var $label = $formGroup.find("label.floating-label");
|
||||
if($label.length > 0){
|
||||
console.debug("FIXME moving label"); // FIXME not sure we want to do this for input-groups
|
||||
$label.detach();
|
||||
$input.after($label);
|
||||
}
|
||||
|
@ -141,12 +141,12 @@
|
|||
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
|
||||
.on("keydown paste", ".form-control", function(e) {
|
||||
if(_isChar(e)) {
|
||||
$(this).parent(".form-group").removeClass("is-empty");
|
||||
$(this).closest(".form-group").removeClass("is-empty");
|
||||
}
|
||||
})
|
||||
.on("keyup change", ".form-control", function() {
|
||||
var $input = $(this);
|
||||
var $formGroup = $input.parent(".form-group");
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
|
||||
|
||||
if ($input.val() === "" && isValid) {
|
||||
|
@ -170,10 +170,10 @@
|
|||
}
|
||||
})
|
||||
.on("focus", ".form-control, .form-group.fileinput", function() {
|
||||
$(this).parent().addClass("is-focused"); // add class to form-group
|
||||
$(this).closest(".form-group").addClass("is-focused"); // add class to form-group
|
||||
})
|
||||
.on("blur", ".form-control, .form-group.fileinput", function() {
|
||||
$(this).parent().removeClass("is-focused"); // remove class from form-group
|
||||
$(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
|
||||
})
|
||||
.on("change", ".form-group.fileinput [type=file]", function() {
|
||||
var $this = $(this);
|
||||
|
@ -182,7 +182,7 @@
|
|||
value += file.name + ", ";
|
||||
});
|
||||
value = value.substring(0, value.length - 2);
|
||||
var $formGroup = $this.parent(".form-group");
|
||||
var $formGroup = $this.closest(".form-group");
|
||||
if (value) {
|
||||
$formGroup.removeClass("is-empty");
|
||||
} else {
|
||||
|
@ -215,7 +215,6 @@
|
|||
var focused;
|
||||
$(document)
|
||||
.on("focus", "input", function() {
|
||||
console.log($(this).parent());
|
||||
var $inputs = $(this).parents("form").find("input").not("[type=file]");
|
||||
focused = setInterval(function() {
|
||||
$inputs.each(function() {
|
||||
|
|
70
test.html
70
test.html
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<title>Material Design for Bootstrap</title>
|
||||
<title>TEST Material Design for Bootstrap</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
|
@ -31,32 +31,58 @@
|
|||
|
||||
<div class="container-fluid">
|
||||
|
||||
<h2>Input - static labels
|
||||
<small>form-group sizing</small>
|
||||
</h2>
|
||||
<div class="well bs-component">
|
||||
<form class="form-horizontal">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
|
||||
<div class="form-group form-group-sm">
|
||||
<label for="i1" class="control-label">Static label</label>
|
||||
<input type="email" class="form-control" id="i1" placeholder="Placeholder text">
|
||||
<!--<div class="form-group">-->
|
||||
<!--<label for="inputFile" class="col-lg-2 control-label">File</label>-->
|
||||
|
||||
<p class="help-block hint">This is a hint</p>
|
||||
</div>
|
||||
<!--<div class="col-lg-10">-->
|
||||
<!--<input type="text" readonly class="form-control floating-label" placeholder="Browse...">-->
|
||||
<!--<input type="file" id="inputFile" multiple>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
|
||||
<div class="form-group">
|
||||
<label for="i2" class="control-label">Static label</label>
|
||||
<input type="email" class="form-control" id="i2" placeholder="Placeholder text">
|
||||
|
||||
<p class="help-block hint">This is a hint</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group form-group-lg">
|
||||
<label for="i3" class="control-label">Static label</label>
|
||||
<input type="email" class="form-control" id="i3" placeholder="Placeholder text">
|
||||
<div class="form-group">
|
||||
<label class="control-label floating-label" for="addon2">Input addons with floating label</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text" id="addon2" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="help-block hint">This is a hint</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!--<h2>File inputs</h2>-->
|
||||
|
||||
<!--<div class="form-group">-->
|
||||
<!--<label class="control-label floating-label" for="faddon1">Input group with file</label>-->
|
||||
<!--<div class="input-group">-->
|
||||
<!--<span class="input-group-addon"><i class="mdi-editor-attach-file"></i></span>-->
|
||||
<!--<input type="text" class="form-control" id="faddon1">-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
|
||||
|
||||
|
||||
<!--<div class="form-group">-->
|
||||
<!--<label for="f1" class="control-label floating-label">Browse...(floating label)</label>-->
|
||||
<!--<input type="file" id="f1" class="form-control">-->
|
||||
<!--<p class="help-block">Example block-level help text here.</p>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--<div class="form-group">-->
|
||||
<!--<label for="f2" class="form-control">Browse...(static label)</label>-->
|
||||
<!--<input type="file" id="f2" class="form-control">-->
|
||||
<!--<p class="help-block">Example block-level help text here.</p>-->
|
||||
<!--</div>-->
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user