kaihenzler / angular-minicolors

A wrapper around JQuery MiniColors
http://kaihenzler.github.io/angular-minicolors/
MIT License
75 stars 51 forks source link

Directive is deleting input labels #5

Closed djedi closed 10 years ago

djedi commented 10 years ago

When I add this directive, it deletes related input labels. Example:

Before directive:

<ul class="form-fields">
    <li class="text-input">
        <ul class="multi-list  half-cols">
            <li class="text-input">
                <label>JobDash Red<br>
                    <small>Appears in the main branding and in the Profile section</small>
                </label>
                <input type="text" class="profile_color" ng-model="instance.white_label.profile_color" >
            </li>
        </ul>
        <ul class="multi-list  half-cols">
            <li class="text-input">
                <label>JobDash Green<br>
                    <small>Appears mostly in the Job Progress pages</small>
                </label>
                <input type="text" class="progress_color" ng-model="instance.white_label.progress_color" >
            </li>
        </ul>
        <ul class="multi-list  half-cols">
            <li class="text-input">
                <label>JobDash Blue<br>
                    <small>Appears on the Coaching elements</small>
                </label>
                <input type="text" class="coaching_color" ng-model="instance.white_label.coaching_color">
            </li>
        </ul>
    </li>
</ul>

image

After adding directives to input fields: image

As a work-around I can wrap the input fields in span or div tags: image

kaihenzler commented 10 years ago

It appears that you don't use this directive with Bootstrap. I haven't really tried using it with Bootstrap, so I can't help you a lot here. Make sure to set the option: theme: 'default'

But you can take a look at the "original" Minicolors Plugin. They provide a Demo without Bootstrap styling at: http://labs.abeautifulsite.net/jquery-minicolors/without-bootstrap.html As far as I can see, they wrap each input in a div.form-group just like I did on the demo page.

kaihenzler commented 10 years ago

Did you end up solving the issue ?

djedi commented 10 years ago

No. I'm just using the workaround I specified above. Our front-end developer will look into styles when he gets to it in a couple of weeks.