layouts

[wemteqdev]

is it possible to change layouts to multi row?

[wemteqdev]

I think it should be great there is property like "itemClass" etc for better layout and style.
This way i could apply bootstrap layout.

[Irfan Maulana]

Already have rootClass props.
You can customize base on this root class.

[wemteqdev]

another class name should be good for children of root.

[Kévin Zokpé]

how did you made the rounded shapes ? I cant manage to get them ? even with rootClass props

[Irfan Maulana]

The rootClass should not be under scoped style.

[Kévin Zokpé]

My css look like that :

<style lang="scss">
    .container {
        text-align: center;
    }

    .countdown {
        font-size: 6em;
    }

    .participants {
        font-size: 2.5em;
    }

    .humors {
    }

    .custom-style {
        display: flex;
        justify-content: center;

        &__wrapper {
            overflow: auto;
            list-style-image: none;
            list-style-position: outside;
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }

        &__item {
            margin: 0px 12px 12px 0px;
            float: left;
            @media only screen and (min-width: 1200px) {
                margin-left: 30px;
            }
        }

        &__thumbnail {
            padding: 6px;
            border: 1px solid #dddddd;
            display: block;
            padding: 4px;
            line-height: 20px;
            border: 1px solid #ddd;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
            -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;

            &--selected {
                background: #0088cc;

                .custom-style__img {
                    zoom: 1.1;
                }
            }
        }

        &__img {
            -webkit-user-drag: none;
            display: block;
            max-width: 100%;
            margin-right: auto;
            margin-left: auto;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }
    }

and here is the component

           ``` <vue-select-image :dataImages="dataImages" class="custom-style" :selectedImages="defaultImg"
                              rootClass="'custom-style'"
                              @onselectimage="toto" h="250px" w="250px">
            </vue-select-image>```

Still not working, i'm sure that i do something wrong 🗡

[Irfan Maulana]

Can you remove single quote in rootClass props?

<vue-select-image 
  :dataImages="dataImages"
  class="custom-style"
  :selectedImages="defaultImg"
  rootClass="custom-style"
  @onselectimage="toto" 
  h="250px" 
  w="250px">
</vue-select-image>

After it, please inspect your element via DevTools go get right class name for selector.

[Kévin Zokpé]

It's working now ;) thanks!