fixing styles for forms

pinguxx · Apr 4, 2015 · 97965c8 · 97965c8
1 parent ae061d0
commit 97965c8
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 9 deletions.
diff --git a/Calendar.js b/Calendar.js
@@ -198,7 +198,9 @@ var Calendar = function (properties) {
                 }
             }
         }, [
-            m('.column', [
+            m('.column', {
+                style: 'padding-bottom: 0;'
+            }, [
                 previous ? m('a[href=#]', {
                     onclick: function (e) {
                         e.preventDefault();
@@ -209,9 +211,11 @@ var Calendar = function (properties) {
                     !cal.small ? m('span', cal.i18n.monthsLong[cal.date().getMonth() - 1  < 0 ? cal.i18n.months.length - 1 : cal.date().getMonth() - 1]) : ''
                 ]) : ''
             ]),
-            m('.column.center.aligned.eight.wide', [
+            m('.column.center.aligned.eight.wide', {
+                style: 'padding-bottom: 0;'
+            }, [
                 m('select',  {
-                    style: 'border: 0;background: transparent;padding: 0 3px;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;text-decoration: underline;',
+                    style: 'border: 0;background: transparent;padding: 0 3px;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;text-decoration: underline;display: inline;width: auto;',
                     value: cal.date().getMonth(),
                     onchange: function () {
                         cal.date().setMonth(this.value);
@@ -229,7 +233,9 @@ var Calendar = function (properties) {
                 /*!cal.small ? cal.i18n.monthsLong[cal.date().getMonth()] : cal.i18n.months[cal.date().getMonth()],
                 ' ' + cal.date().getFullYear()*/
             ]),
-            m('.column.right.aligned', [
+            m('.column.right.aligned', {
+                style: 'padding-bottom: 0;'
+            }, [
                 next ? m('a[href=#]', {
                     onclick: function (e) {
                         e.preventDefault();
@@ -254,9 +260,11 @@ var Calendar = function (properties) {
                     }))
                 ])
             ]),
-            m('.column.center.aligned.sixteen.wide', [
+            m('.column.center.aligned.sixteen.wide', {
+                style: 'padding-top: 0;'
+            }, [
                 m('select',  {
-                    style: 'border: 0;background: transparent;padding: 0 3px;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;text-decoration: underline;',
+                    style: 'border: 0;background: transparent;padding: 0 3px;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;text-decoration: underline;display: inline;width: auto;',
                     value: cal.hours(),
                     onchange: m.withAttr('value', cal.hours),
                     config: function (element) {
@@ -274,7 +282,7 @@ var Calendar = function (properties) {
                 })),
                 ':',
                 m('select',  {
-                    style: 'border: 0;background: transparent;padding: 0 3px;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;text-decoration: underline;',
+                    style: 'border: 0;background: transparent;padding: 0 3px;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;text-decoration: underline;display: inline;width: auto;',
                     value: cal.minutes(),
                     onchange: m.withAttr('value', cal.minutes),
                     config: function (element) {

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "sm-calendar",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "homepage": "https://github.com/pinguxx/sm-calendar",
   "authors": [
     "Ivan Torres <[email protected]>"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sm-calendar",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "mithril semantic-ui calendar widget",
   "main": "Calendar.js",
   "scripts": {

diff --git a/test.js b/test.js
@@ -17,6 +17,7 @@
             maxdate: new Date(new Date().getTime() + 30*24*60*60*1000 + 10000000)
         });
         this.calendar2 = new Calendar({small: true});
+        this.calendar3 = new Calendar({small: true});
     };
 
 
@@ -49,6 +50,18 @@
                         console.log(module.vm.calendar2.getDate());
                     }
                 }, 'get')
+            ]),
+            m('h2', 'Another calendar wth floating div'),
+            m('.ui.form.fluid', [
+                m('.two.fields', [
+                    m('.field.required', [
+                       m('', {
+                            style: 'display: block; position: absolute; left: 5px; top: 40px; width: 99%; border: 1px solid gray; z-index: 100; background-color: rgb(255, 255, 255);border-radius: 0 0 5px 5px;box-shadow: 2px 2px 3px gray;'
+                        }, [
+                            module.vm.calendar3.view()
+                        ])
+                    ])
+                ])
             ])
         ]);
     };