Random bugs with elements appearance #138

gerchicov-bp · 2018-06-22T14:21:26Z

OSX 10.13.4
Node.js version - 10.4.1
Vuesax version - 3.1.26
Browser version - Chrome 67.0.3396.87, Safari 11.1
package manager - npm

Just look at picture:

from top to bottom:

Chrome
Chrome + page with tutorials
Safari

(Safari + page with tutorials looks like "Chrome + page with tutorials" but has text fields with values "#c72a75" and "#5252e8" instead of color pickers)

Why did all colors become black and blue? And if safari doesn't support the color picker then where are hex values I specified?

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <template lang="html">
      <div class="">
        <input type="color" v-model="colorx" name="" value="">
        <input type="color" v-model="colorx2" name="" value="">
        <vs-button :vs-color="colorx" vs-type="filled">Color</vs-button>
        <vs-button :vs-color="colorx" vs-type="border">Color</vs-button>
        <vs-button :vs-color="colorx" vs-type="flat">Color</vs-button>
        <vs-button :vs-color="colorx" vs-type="line">Color</vs-button>
        <vs-button :vs-color="colorx" :vs-gradient-color-secondary="colorx2" vs-type="gradient">Color</vs-button>
        <vs-button :vs-color="colorx"  vs-type="relief">Color</vs-button>
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return {
          colorx:'#c72a75',
          colorx2:'#5252e8'
        }
      },
    }
    </script>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.umd.js"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

The text was updated successfully, but these errors were encountered:

luisDanielRoviraContreras · 2018-06-22T14:59:56Z

You could try to add the color directly without this in something like this

<vs-button vs-color="#f26711" vs-type="filled">Color</vs-button>

to verify if it works as a duty and the problem is the color or data input and the v-bind

gerchicov-bp · 2018-06-22T15:15:44Z

@luisDanielRoviraContreras yes, it works if I assign color directly

luisDanielRoviraContreras · 2018-06-22T16:00:01Z

I see where the problem is please change data and put it on start something like that

new Vue({
      el: '#app',
      data:{
          colorx:'#c72a75',
          colorx2:'#5252e8'
        }
    })

and remove the other data

It should be like this

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
        <input type="color" v-model="colorx" name="" value="">
        <input type="color" v-model="colorx2" name="" value="">
        <vs-button :vs-color="colorx" vs-type="filled">Color</vs-button>
        <vs-button :vs-color="colorx" vs-type="border">Color</vs-button>
        <vs-button :vs-color="colorx" vs-type="flat">Color</vs-button>
        <vs-button :vs-color="colorx" vs-type="line">Color</vs-button>
        <vs-button :vs-color="colorx" :vs-gradient-color-secondary="colorx2" vs-type="gradient">Color</vs-button>
        <vs-button :vs-color="colorx"  vs-type="relief">Color</vs-button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.umd.js"></script>
  <script>
    new Vue({
      el: '#app',
     data:{
          colorx:'#c72a75',
          colorx2:'#5252e8'
      },
    })
  </script>
</body>
</html>

Gargo · 2018-06-24T18:19:04Z

@luisDanielRoviraContreras
ok that case solved
The next example from the same page, on Windows 10, Vivaldi - expectaion vs reality:

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <vs-button vs-color="primary" vs-type="border" vs-icon="search"></vs-button>
    <vs-button vs-color="warning" vs-type="filled" vs-icon="public"></vs-button>
    <vs-button vs-color="success" vs-type="flat" vs-icon="photo_camera"></vs-button>
    <vs-button vs-color="dark" vs-type="line" vs-icon="event_note"></vs-button>
    <vs-button vs-color="danger" vs-type="gradient" vs-icon="person_add"></vs-button>
    <br>
    <br>
    <vs-button style="border-radius: 50%" vs-color="primary" vs-type="border" vs-icon="search"></vs-button>
    <vs-button style="border-radius: 50%" vs-color="warning" vs-type="filled" vs-icon="public"></vs-button>
    <vs-button style="border-radius: 50%" vs-color="success" vs-type="flat" vs-icon="photo_camera"></vs-button>
    <vs-button style="border-radius: 50%" vs-color="dark" vs-type="line" vs-icon="event_note"></vs-button>
    <vs-button style="border-radius: 50%" vs-color="danger" vs-type="gradient" vs-icon="person_add"></vs-button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.umd.js"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

luisDanielRoviraContreras · 2018-06-24T20:42:13Z

That already has to do with the support to the fun material icons

gerchicov-bp · 2018-06-25T09:06:55Z

@luisDanielRoviraContreras
ok, maybe another example (OSX, Chrome):

Yes, they work as on website. BUT:

why are they placed in a single column instead of row?
strange labels to the right side?

In general don't you plan to recheck all the examples you describe in readme. The library looked cool but in reality it is too buggy to use in real projects. In releases you wrote version "v3.0.23" but it should be "v0.x" with such obvious bugs in library and or readme.

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
    <script>
        export default {
          data(){
            return {
              colorx:'#c72a75',
              colorx2:'#5252e8'
            }
          },
        }
        </script>
  <div id="app">
      <div class="con-select-example">
        <vs-select
        class="selectExample"
          label="Figuras"
          v-model="select1"
          >
          <vs-select-item :key="index" :vs-value="item.value" :vs-text="item.text" v-for="item,index in options1" />
        </vs-select>
        <vs-select
        class="selectExample"
          label="Figuras"
          v-model="select2"
          >
          <vs-select-item :key="index" :vs-value="item.value" :vs-text="item.text" v-for="item,index in options2" />
        </vs-select>
        <vs-select
          disabled="true"
          class="selectExample"
          label="Figuras"
          v-model="select3"
          >
          <vs-select-item :key="index" :disabled="index==2" :vs-value="item.value" :vs-text="item.text" v-for="item,index in options3" />
        </vs-select>
      </div>
    
    
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.umd.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
      select1:3,
      select2:7,
      select3:2,
      options1:[
        {text:'IT',value:0},
        {text:'Blade Runner',value:2},
        {text:'Thor Ragnarok',value:3},
      ],
      options2:[
        {text: 'Square', value: 1},
        {text: 'Rectangle', value: 2},
        {text: 'Rombo', value: 3},
        {text: 'Romboid', value: 4},
        {text: 'Trapeze', value: 5},
        {text: 'Triangle', value: 6},
        {text: 'Polygon', value: 7},
        {text: 'Regular polygon', value: 8},
        {text: 'Circumference', value: 9},
        {text: 'Circle', value: 10},
        {text: 'Circular sector', value: 11},
        {text: 'Circular trapeze', value: 12},
      ],
      options3:[
        {text: 'Red', value: 1},
        {text: 'Green', value: 2},
        {text: 'Blue', value: 3},
        {text: 'Purple', value: 4},
      ],
    }
    })
  </script>
</body>
</html>

luisDanielRoviraContreras · 2018-06-25T15:32:29Z

I will verify and I would like to thank you very much for the contribution

the versions were changed by mistake and you can not go back to v0.x because it would confuse the users to which is the latest version

if you can give me a repo or example it would be great, thanks

gerchicov-bp · 2018-06-27T15:13:56Z

@luisDanielRoviraContreras
I just used your readme to init vuesax and added an example from the official templates website. Checked from the beginning on another mac - the issue remains

and finally the issue's closed state remains. Why not to back it to open state?

luisDanielRoviraContreras added bug Something isn't working help wanted Extra attention is needed labels Jun 22, 2018

luisDanielRoviraContreras closed this as completed Jun 23, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Random bugs with elements appearance #138

Random bugs with elements appearance #138

gerchicov-bp commented Jun 22, 2018 •

edited

Loading

luisDanielRoviraContreras commented Jun 22, 2018

gerchicov-bp commented Jun 22, 2018

luisDanielRoviraContreras commented Jun 22, 2018 •

edited

Loading

Gargo commented Jun 24, 2018 •

edited

Loading

luisDanielRoviraContreras commented Jun 24, 2018

gerchicov-bp commented Jun 25, 2018

luisDanielRoviraContreras commented Jun 25, 2018

gerchicov-bp commented Jun 27, 2018

Random bugs with elements appearance #138

Random bugs with elements appearance #138

Comments

gerchicov-bp commented Jun 22, 2018 • edited Loading

luisDanielRoviraContreras commented Jun 22, 2018

gerchicov-bp commented Jun 22, 2018

luisDanielRoviraContreras commented Jun 22, 2018 • edited Loading

Gargo commented Jun 24, 2018 • edited Loading

luisDanielRoviraContreras commented Jun 24, 2018

gerchicov-bp commented Jun 25, 2018

luisDanielRoviraContreras commented Jun 25, 2018

gerchicov-bp commented Jun 27, 2018

gerchicov-bp commented Jun 22, 2018 •

edited

Loading

luisDanielRoviraContreras commented Jun 22, 2018 •

edited

Loading

Gargo commented Jun 24, 2018 •

edited

Loading