Permalink
Browse files

fix modal alignment issue

fixes #72

The dropdown is now bigger on smaller screensizes as well
  • Loading branch information...
1 parent 60024f5 commit bdb56753b2a0a9f453bc9cf48d079d0aedd38825 @jdewit committed Feb 1, 2013

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -64,9 +64,13 @@
}
}
- this.$widget = $(this.getTemplate()).appendTo(this.$element.parents('.bootstrap-timepicker')).on('click', $.proxy(this.widgetClick, this));
+ if (this.template !== false) {
+ this.$widget = $(this.getTemplate()).appendTo(this.$element.parents('.bootstrap-timepicker')).on('click', $.proxy(this.widgetClick, this));
+ } else {
+ this.$widget = false;
+ }
- if (this.showInputs) {
+ if (this.showInputs && this.$widget !== false) {
this.$widget.find('input').each(function() {
$(this).on({
'click.timepicker': function() { $(this).select(); },
@@ -520,7 +524,9 @@
remove: function() {
$('document').off('.timepicker');
- this.$widget.remove();
+ if (this.$widget) {
+ this.$widget.remove();
+ }
delete this.$element.data().timepicker;
},
@@ -703,6 +709,10 @@
},
updateWidget: function() {
+ if (this.$widget === false) {
+ return;
+ }
+
var hour = this.hour < 10 ? '0' + this.hour : this.hour,
minute = this.minute < 10 ? '0' + this.minute : this.minute,
second = this.second < 10 ? '0' + this.second : this.second;
@@ -731,6 +741,10 @@
},
updateFromWidgetInputs: function() {
+ if (this.$widget === false) {
+ return;
+ }
+
var time = $('input.bootstrap-timepicker-hour', this.$widget).val() + ':' +
$('input.bootstrap-timepicker-minute', this.$widget).val() +
(this.showSeconds ? ':' + $('input.bootstrap-timepicker-second', this.$widget).val() : '') +

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -37,97 +37,109 @@
height: 16px;
}
}
-
- .bootstrap-timepicker-widget {
- &.dropdown-menu {
- padding: 2px 3px 2px 2px;
- &.open {
- display: inline-block;
- }
- &:before {
- border-bottom: 7px solid rgba(0, 0, 0, 0.2);
- border-left: 7px solid transparent;
- border-right: 7px solid transparent;
- content: "";
- display: inline-block;
- left: 9px;
- position: absolute;
- top: -7px;
- }
- &:after {
- border-bottom: 6px solid #FFFFFF;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- content: "";
- display: inline-block;
- left: 10px;
- position: absolute;
- top: -6px;
- }
+}
+.bootstrap-timepicker-widget {
+ &.dropdown-menu {
+ padding: 2px 3px 2px 2px;
+ &.open {
+ display: inline-block;
}
-
- &.modal {
- top: 30%;
- margin-top: 0;
- width: 200px;
- margin-left: -100px;
-
- .modal-content {
- padding: 4px;
- }
+ &:before {
+ border-bottom: 7px solid rgba(0, 0, 0, 0.2);
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ content: "";
+ display: inline-block;
+ left: 9px;
+ position: absolute;
+ top: -7px;
}
-
- a.btn, input {
- border-radius: 4px;
+ &:after {
+ border-bottom: 6px solid #FFFFFF;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ content: "";
+ display: inline-block;
+ left: 10px;
+ position: absolute;
+ top: -6px;
}
+ }
- table {
- width: 100%;
+ a.btn, input {
+ border-radius: 4px;
+ }
+
+ table {
+ width: 100%;
+ margin: 0;
+
+ td {
+ text-align: center;
+ height: 30px;
margin: 0;
+ padding: 2px;
- td {
- text-align: center;
- height: 30px;
+ &:not(.separator) {
+ min-width: 30px;
+ }
+
+ span {
+ width: 100%;
+ }
+ a {
+ border: 1px transparent solid;
+ width: 100%;
+ display: inline-block;
margin: 0;
- padding: 2px;
+ padding: 8px 0;
+ outline: 0;
+ color: #333;
- &:not(.separator) {
- min-width: 30px;
+ &:hover {
+ text-decoration: none;
+ background-color: #eee;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ border-color: #ddd;
}
- span {
- width: 100%;
- }
- a {
- border: 1px transparent solid;
- width: 100%;
- display: inline-block;
- margin: 0;
- padding: 8px 0;
- outline: 0;
- color: #333;
-
- &:hover {
- text-decoration: none;
- background-color: #eee;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- border-color: #ddd;
- }
-
- i {
- margin-top: 2px;
- }
- }
- input {
- width: 25px;
- margin: 0;
- text-align: center;
+ i {
+ margin-top: 2px;
}
}
+ input {
+ width: 25px;
+ margin: 0;
+ text-align: center;
+ }
+ }
+ }
+}
+
+.bootstrap-timepicker-widget .modal-content {
+ padding: 4px;
+}
+
+@media (min-width: 767px) {
+ .bootstrap-timepicker-widget.modal {
+ width: 200px;
+ margin-left: -100px;
+ }
+}
+
+@media (max-width: 767px) {
+ .bootstrap-timepicker {
+ width: 100%;
+
+ .dropdown-menu {
+ width: 100%;
}
}
}
+
+
+
@@ -201,10 +201,10 @@ describe('Keyboard events feature', function() {
tp2.update();
$input2.parents('div').find('.add-on').click();
- var $hourInput = tp2.$widget.find('input.bootstrap-timepicker-hour'),
- $minuteInput = tp2.$widget.find('input.bootstrap-timepicker-minute'),
- $secondInput = tp2.$widget.find('input.bootstrap-timepicker-second'),
- $meridianInput = tp2.$widget.find('input.bootstrap-timepicker-meridian');
+ var $hourInput = $('body').find('input.bootstrap-timepicker-hour'),
+ $minuteInput = $('body').find('input.bootstrap-timepicker-minute'),
+ $secondInput = $('body').find('input.bootstrap-timepicker-second'),
+ $meridianInput = $('body').find('input.bootstrap-timepicker-meridian');
$hourInput.autotype('{{back}}{{back}}2');
$hourInput.trigger({

0 comments on commit bdb5675

Please sign in to comment.