tracer/x-editable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css workaround to nowrap buttons in position absolute mode

Browse Source
This commit is contained in:
vitalets 2012-11-27 00:37:57 +04:00
parent 396775bf8c
commit 1e757b833f
3 changed files with 24 additions and 18 deletions

10
src/containers/editable-container.css

@ -1,6 +1,8 @@
.editable-container,
.editable-container.popover {
width: auto;
white-space: nowrap; /* without this rule buttons wrap input in non-static elements */
.editable-container {
max-width: none; /* without this rule poshytip does not stretch */
}
.editable-container.popover {
/* width: 300px;*/ /* debug */
width: auto; /* without this rule popover does not stretch */
}

30
src/editable-form/editable-form.css

@ -1,11 +1,20 @@
.editableform,
.editableform div.control-group {
margin-bottom: 0;
overflow: auto;
.editableform {
margin-bottom: 0; /* overwrites bootstrap margin */
}
.editableform .control-group {
margin-bottom: 0; /* overwrites bootstrap margin */
white-space: nowrap; /* prevent wrapping buttons on new line */
}
.editable-buttons {
float: left;
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
}
.editable-input {
vertical-align: top;
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
}
.editable-buttons button {
@ -28,6 +37,7 @@
.editable-error-block {
max-width: 300px;
padding-top: 3px;
margin: 0;
clear: both;
}
@ -36,14 +46,6 @@
color: red;
}
.editable-input {
vertical-align: top;
display: inline-block;
width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
float: left;
padding-bottom: 9px;
}
.editableform textarea {
height: 150px; /*default height for textarea*/
}
@ -51,9 +53,11 @@
.editableform .editable-date {
padding: 0;
margin: 0;
float: left;
}
.editable-clear {
clear: both;
float: right;
font-size: 0.9em;
text-decoration: none;

2
src/editable-form/editable-form.js

@ -23,7 +23,7 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
//create input of specified type
if(typeof $.fn.editableform.types[this.options.type] === 'function') {
TypeConstructor = $.fn.editableform.types[this.options.type];
typeOptions = $.fn.editableform.utils.sliceObj(this.options, Object.keys(TypeConstructor.defaults));
typeOptions = $.fn.editableform.utils.sliceObj(this.options, $.fn.editableform.utils.objectKeys(TypeConstructor.defaults));
this.input = new TypeConstructor(typeOptions);
} else {
$.error('Unknown type: '+ this.options.type);