Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Request: A few options for responsive design #32

Closed
josephNg95 opened this issue Apr 23, 2018 · 9 comments
Closed

Request: A few options for responsive design #32

josephNg95 opened this issue Apr 23, 2018 · 9 comments
Assignees
@jaames
Labels
feature-request

Comments

@josephNg95
Copy link

let colorPicker = new iro.ColorPicker("#color-picker", {
width: 320,
height: 320
}

How can i responsive design with this ?
because i only see fixed width and heigh on colorPicker object !
@adrianjost
Copy link

adrianjost commented Apr 23, 2018 •
edited
Loading

Sadly there is just an workaround available.
You could read the width of the outer div and calculate the height based on that. If you want to be completly responsive you need to add an eventHandler for resizing of the outer div and update the width and height according to that.

@jaames jaames self-assigned this Apr 23, 2018
@jaames
Copy link
Owner

jaames commented Apr 23, 2018 •
edited
Loading

Hi, sorry that you've been having issues there! Unfortunately I can only suggest trying @adrianjost's workaround for now :)

The way iro.js does layout is kinda complicated just due to the nature of SVG. That's one of the things I really want to improve with 4.0, I'm just a little busy with other projects at the moment

@josephNg95
Copy link
Author

Thanks,
I'm tried the way @adrianjost suggested before. But I really think if you can add the request to new feature then it will awesome more 😁

@jaames jaames mentioned this issue Jun 9, 2018
Closed
@jaames
Copy link
Owner

jaames commented Jan 24, 2019

The iro.js v4 beta is out now, which adds a resize() method which can change the width of the color picker at any time.

Here's a basic example:

<html>
  <head>
    <script src="https://unpkg.com/@jaames/iro@beta/dist/iro.js"></script>
  </head>
  <body>
    <div id="color-picker-mount"></div>
    <script>
       var colorPicker = new iro.ColorPicker("#color-picker-mount", {
         width: 300,
       });

       // whenever you need to resize, call the resize() method with your new width:
       var newWidth = 200;
       colorPicker.resize(newWidth);
    </script>
  </body>
</html>

@josephNg95
Copy link
Author

=)) here is my result.
create by iro

circle-color-picker

@jaames
Copy link
Owner

jaames commented Jan 25, 2019

Neat! I'm going to close this thread now. Let me know if theres anything else you need :)

@jaames jaames closed this as completed Jan 25, 2019
@RobbieTheWagner
Copy link
Contributor

@thuyettiensinh how did you do multiple colors on the wheel?

@josephNg95
Copy link
Author

josephNg95 commented Jan 6, 2020 •
edited
Loading

@rwwagner90
I just get the coordinates of color selected and push to the colors coordinates (using js DOM) list and then render on the wheel. Make sure you allow wheel have css position: relative and color picked is position: absolute
By the way, I'm using vuejs to make this, you can refer to the following below (image attached)

irojs

@josephNg95
Copy link
Author

josephNg95 commented Jan 6, 2020 •
edited
Loading

I'm not sure it can work for now, because it's the two years ago 🤔 🤔
But you can think and try with my stupid idea 😁 😁

I hope it can help you @rwwagner90

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jaames jaames

Labels
feature-request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@RobbieTheWagner @jaames @josephNg95 @adrianjost