search

nozzle / nzTour

Touring and on-boarding made simple for AngularJS -
http://nozzle.github.io/nzTour/
MIT License
73 stars 24 forks source link

Allow setting max width and max height property in the code. #31

Closed raxdev closed 8 years ago

raxdev commented 8 years ago

Allow setting max width and max height property in the code. This (in addition to CSS changes) allows to properly resize the particular tour. Without this code, if you only change the max-width property in the CSS file, the positioning of the tour will not be correctly computed.

lebolo commented 8 years ago

Can you create a plunker with the CSS changes required, so I can see what you mean? You can start from this plunker and just add your CSS changes to the index.css file on the left sidebar.

raxdev commented 8 years ago

Hi,

The default width of the guide is 250px. The CSS change I mentioned is really simple - I've just added a :

  <style type="text/css">
      nz-tour #nzTour-box {
  width: 350px;
}
    </style>

to your plunker - results are here. Please navigate the guide to step 4 to experience the positioning issue I mentioned.

lebolo commented 8 years ago

Thanks @raxdev,

Sorry to keep bothering you =) but I'm not seeing any problems with position so wondering if there's a bug or maybe a browser difference (I'm using the latest Chrome on Windows). Here are screen captures (using your plunker) of the tour with the original code, with just the CSS changes, and with both the CSS change and your JS change.

In each scenario, the tour initially starts below, moves to the right, then moves to the top.

Or am I completely missing the point? :confounded:

Original Code (No Changes)

original

Just CSS Changes (width: 350px)

just_css

CSS/JS Changes (config.maxWidth = 350)

css_and_js

raxdev commented 8 years ago

Hi,

Could you share the name of the tool used to do those animations? Looks really neat! Hm, ok, from the repro you kindly provided there is no way to trigger the issue. Please give me some time to come up with a revised plunkr.

Best regards & thank you!

lebolo commented 8 years ago

https://screentogif.codeplex.com/

I just Googled around, first time I've used it, but it was pretty neat! =)

raxdev commented 8 years ago

Hi, I am unable to produce the repro code, so I'm closing this request. Thank you for your patience with this one!