djhi/meteor-autoform-materialize

Styling issues

Closed this issue · 6 comments

boustanihani commented

While playing around I found the following styling issues:

  • The dropdown (select) lable jumps too high when a value is selected...
  • The "submit" button renders over the dropdown fields (This is a Materialize bug so just ignore...)
  • The vertical spacing between the "input-fields" is very small, probably because not wrapping each input-field inside its own row... (Field-1 lable almost touches the above line when a value is entered)
  • The labels are pushed by 0.75rem to the right, thus not getting left-aligned with the input fields (as intended by: http://materializecss.com/forms.html)
  • When passing options to AutoForm inside a Schema the generated quickfield won't get wrapped inside a <div class="input-field"> as intended... (Compare the HTML result of Size-1 & Size-2)

Reproduction deployment: http://materialize-autoform.meteor.com
Repository: https://github.com/boustanihani/materialize-autoform

<body>
    <h5 class="center">Materialize AutoForm</h5>

    <div class="row">
        <div class="col s4 offset-s4">
            {{> hello}}
        </div>
    </div>
</body>

<template name="hello">
    {{> quickForm id="tableCreate" schema="Schema.test"}}
</template>
Schema.test = new SimpleSchema({

    size1: {
        type: Number,
        label: 'Size-1',
        allowedValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    },

    size2: {
        type: Number,
        label: 'Size-2',
        allowedValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        autoform: {
            firstOption: 'Choose Size-2',
            options: 'allowed',
        }
    },

    field1: {
        type: String,
        label: 'Field-1',
    },

    field2: {
        type: String,
        label: 'Field-2',
    },
});
PhilippSpo commented

I use this code to fix the select field:

form .col {
  position: relative;
}
form label {
  position: absolute;
  top: 3px;
}
form label + .select-wrapper {
  margin-top: 14px;
}
boustanihani commented

@PhilippSpo thanks. Do you know why the labels are sometimes left-aligned with the input field and sometimes with a margin on the left side?

djhi commented

@boustanihani thanks for reporting but there are multiple issues in this ticket which make those bugs difficult to be tracked correctly in github. Can you please create separate tickets so that I can address them correctly ?

boustanihani commented

Sorry, your are right :bowtie:

Here are the separate tickets:

  • dropdown lable jumps too high: #31
  • some labels are not left-aligned: #32
  • vertical spacing too small: #33
  • missing .input-field wrapper when passing custom options: #34
djhi commented

Great. Thank you :)

Le mer. 10 juin 2015 à 23:04, boustanihani notifications@github.com a
écrit :

Closed #19 #19
.

—
Reply to this email directly or view it on GitHub
#19 (comment)
.

Gildas Garcia

boustanihani commented

welcome 😃