Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added value attribute, mobile style improvments #199

Merged
merged 2 commits into from
Jul 17, 2016
Merged

Added value attribute, mobile style improvments #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ecf3028
Added value attribute, mobile style improvments
kevinchappell Jul 17, 2016
1c92499
v1.14.2
kevinchappell Jul 17, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
# Changelog

- v1.14.2 - Feature: Value attribute, improved mobile styling [#199](https://github.com/kevinchappell/formBuilder/pull/199)
- v1.14.1 - Bugfix: Option defaults not rendering [#198](https://github.com/kevinchappell/formBuilder/pull/198)
- v1.14.0 - Feature: Fast edit options. Click to add field, sticky controls, auto edit toggle [#190](https://github.com/kevinchappell/formBuilder/pull/190)
- v1.11.0 - Feature: Number input [#188](https://github.com/kevinchappell/formBuilder/pull/188)
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
formBuilder v1.14.1
formBuilder v1.14.2
===========

[![Join the chat at https://gitter.im/kevinchappell/formBuilder](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/kevinchappell/formBuilder?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "formBuilder",
"version": "1.14.1",
"version": "1.14.2",
"main": [
"dist/*"
],
Expand Down
171 changes: 81 additions & 90 deletions demo/assets/css/form-builder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
formBuilder - http://kevinchappell.github.io/formBuilder/
Version: 1.14.1
Version: 1.14.2
Author: Kevin Chappell <[email protected]>
*/
@charset "UTF-8";
Expand Down Expand Up @@ -187,63 +187,6 @@ Author: Kevin Chappell <[email protected]>
[id^='frmb-'][id$='-form-wrap'] .btn-group > .btn:hover {
z-index: 2; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn, [id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn, .fb-mobile [id^='frmb-'][id$='-form-wrap'] .form-actions > .btn,
[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group,
[id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn-group, .fb-mobile
[id^='frmb-'][id$='-form-wrap'] .form-actions > .btn-group,
[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group > .btn,
[id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn-group > .btn, .fb-mobile
[id^='frmb-'][id$='-form-wrap'] .form-actions > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group > .btn, [id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn-group > .btn, .fb-mobile [id^='frmb-'][id$='-form-wrap'] .form-actions > .btn-group > .btn {
float: none; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn + .btn, [id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn + .btn, .fb-mobile [id^='frmb-'][id$='-form-wrap'] .form-actions > .btn + .btn,
[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn + .btn-group,
[id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn + .btn-group, .fb-mobile
[id^='frmb-'][id$='-form-wrap'] .form-actions > .btn + .btn-group,
[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group + .btn,
[id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn-group + .btn, .fb-mobile
[id^='frmb-'][id$='-form-wrap'] .form-actions > .btn-group + .btn,
[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group + .btn-group,
[id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn-group + .btn-group, .fb-mobile
[id^='frmb-'][id$='-form-wrap'] .form-actions > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn:not(:first-child):not(:last-child), [id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn:not(:first-child):not(:last-child), .fb-mobile [id^='frmb-'][id$='-form-wrap'] .form-actions > .btn:not(:first-child):not(:last-child) {
border-radius: 0; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn:first-child:not(:last-child), [id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn:first-child:not(:last-child), .fb-mobile [id^='frmb-'][id$='-form-wrap'] .form-actions > .btn:first-child:not(:last-child) {
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn:last-child:not(:first-child), [id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn:last-child:not(:first-child), .fb-mobile [id^='frmb-'][id$='-form-wrap'] .form-actions > .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn, [id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn-group:not(:first-child):not(:last-child) > .btn, .fb-mobile [id^='frmb-'][id$='-form-wrap'] .form-actions > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, [id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn-group:first-child:not(:last-child) > .btn:last-child, .fb-mobile [id^='frmb-'][id$='-form-wrap'] .form-actions > .btn-group:first-child:not(:last-child) > .btn:last-child,
[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle,
[id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn-group:first-child:not(:last-child) > .dropdown-toggle, .fb-mobile
[id^='frmb-'][id$='-form-wrap'] .form-actions > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child, [id^='frmb-'][id$='-form-wrap'] .fb-mobile .form-actions > .btn-group:last-child:not(:first-child) > .btn:first-child, .fb-mobile [id^='frmb-'][id$='-form-wrap'] .form-actions > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0; }

[id^='frmb-'][id$='-form-wrap'] .btn {
color: #fff;
display: inline-block;
Expand Down Expand Up @@ -504,16 +447,28 @@ Author: Kevin Chappell <[email protected]>
margin: 0;
padding: 0; }

.fb-mobile .form-actions {
width: 100%; }
.fb-mobile .form-actions button {
width: 100%;
font-size: .85em !important;
display: block !important;
border-radius: 0 !important;
margin-top: -1px;
margin-left: 0 !important; }
.fb-mobile .form-actions button:first-child {
border-radius: 5px 5px 0 0 !important;
margin-top: 0 !important;
border-bottom: 0 none; }
.fb-mobile .form-actions button:last-child {
border-radius: 0 0 5px 5px !important; }

.form-actions {
float: right;
margin-top: 5px; }
margin-top: 5px;
/* smartphones, Android phones, landscape iPhone */ }
.form-actions .clear-all:hover {
color: #fff; }
.fb-mobile .form-actions {
width: 100%; }
.fb-mobile .form-actions button {
font-size: .85em;
display: block; }

[id^='frmb-'][id$='-form-wrap'] {
/* ------------ TOOLTIP ------------ */ }
Expand Down Expand Up @@ -764,7 +719,14 @@ Author: Kevin Chappell <[email protected]>
text-align: right; }
[id^='frmb-'][id$='-form-wrap'] .frmb .sortable-options-wrap {
width: 81.33333333%;
display: inline-block; }
display: inline-block;
/* smartphones, Android phones, landscape iPhone */ }
[id^='frmb-'][id$='-form-wrap'] .frmb .sortable-options-wrap label {
font-weight: normal; }
@media (max-width: 481px) {
[id^='frmb-'][id$='-form-wrap'] .frmb .sortable-options-wrap {
display: block;
width: 100%; } }
[id^='frmb-'][id$='-form-wrap'] .frmb ol.sortable-options {
display: inline-block;
width: 100%;
Expand Down Expand Up @@ -822,7 +784,8 @@ Author: Kevin Chappell <[email protected]>
background: #f7f7f7;
border-radius: 3px;
margin: 12px 0 0;
border: 1px solid #d7d7d7; }
border: 1px solid #d7d7d7;
/* smartphones, Android phones, landscape iPhone */ }
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements input[type='text'],
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements input[type='number'],
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements textarea,
Expand All @@ -840,12 +803,31 @@ Author: Kevin Chappell <[email protected]>
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements textarea .btn-group,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements select .btn-group {
margin-left: 2%; }
@media (max-width: 481px) {
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements input[type='text'],
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements input[type='number'],
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements textarea,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements select {
width: 100%;
margin-left: 0;
float: none; }
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements input[type='text'] .btn-group,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements input[type='number'] .btn-group,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements textarea .btn-group,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements select .btn-group {
margin-left: 0; } }
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements input[type='number'] {
width: auto; }
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .btn-group {
margin-left: 2%; }
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label,
.col-md-6 [id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label,
.col-md-8 [id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label, .col-md-6
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label,
.col-md-8
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label {
display: block; }
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label:first-child,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label:first-child {
width: 16.66666667%;
padding-top: 7px;
margin-bottom: 0;
Expand All @@ -854,27 +836,32 @@ Author: Kevin Chappell <[email protected]>
float: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
.col-md-6 [id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label,
.col-md-8 [id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label, .col-md-6
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label,
.col-md-8
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label {
display: block; }
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label:first-child,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label:first-child {
text-transform: capitalize; }
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label.multiple, [id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label.required-label, [id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label.toggle-label, [id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label.roles-label, [id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label.other-label,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label.multiple,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label.required-label,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label.toggle-label,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label.roles-label,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label.other-label {
text-align: left;
float: none;
margin-bottom: -3px;
font-weight: 400;
width: calc(81.3333% - 23px); }
text-overflow: ellipsis;
text-transform: capitalize;
/* smartphones, Android phones, landscape iPhone */ }
@media (max-width: 481px) {
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label:first-child,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label:first-child {
display: block;
width: auto;
float: none;
text-align: left; }
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label:first-child.empty-label,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label:first-child.empty-label {
display: none; } }
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label.multiple, [id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label.required-label, [id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label.toggle-label, [id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label.roles-label, [id^='frmb-'][id$='-form-wrap'] .frmb .form-elements .false-label.other-label,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label.multiple,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label.required-label,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label.toggle-label,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label.roles-label,
[id^='frmb-'][id$='-form-wrap'] .frmb .form-elements label.other-label {
text-align: left;
float: none;
margin-bottom: -3px;
font-weight: 400;
width: calc(81.3333% - 23px); }
[id^='frmb-'][id$='-form-wrap'].fb-mobile .field-actions {
opacity: 1; }
[id^='frmb-'][id$='-form-wrap'] *[tooltip] {
position: relative; }
[id^='frmb-'][id$='-form-wrap'] *[tooltip]:hover:after {
Expand Down Expand Up @@ -1061,11 +1048,15 @@ ul.frmb span.required {

.form-group .available-roles {
display: none;
margin-left: 18%;
padding: 5px 10px;
margin: 5px 0 10px 133px;
width: 434px;
background: #e6e6e6;
box-shadow: inset 0 0 2px 0 #999; }
box-shadow: inset 0 0 2px 0 #999;
/* smartphones, Android phones, landscape iPhone */ }
@media (max-width: 481px) {
.form-group .available-roles {
margin-left: 0; } }

.form-elements .available-roles label {
font-weight: 400;
Expand Down
4 changes: 2 additions & 2 deletions demo/assets/css/form-builder.min.css
View file
Open in desktop

Large diffs are not rendered by default.

47 changes: 1 addition & 46 deletions demo/assets/css/form-render.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
formBuilder - http://kevinchappell.github.io/formBuilder/
Version: 1.14.1
Version: 1.14.2
Author: Kevin Chappell <[email protected]>
*/
[id^='frmb-'][id$='-form-wrap'] * {
Expand Down Expand Up @@ -70,51 +70,6 @@ Author: Kevin Chappell <[email protected]>
[id^='frmb-'][id$='-form-wrap'] .btn-group > .btn:hover {
z-index: 2; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn,
[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group,
[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group > .btn {
float: none; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn + .btn,
[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn + .btn-group,
[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group + .btn,
[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }

[id^='frmb-'][id$='-form-wrap'] .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0; }

[id^='frmb-'][id$='-form-wrap'] .btn {
color: #fff;
display: inline-block;
Expand Down
Loading