search

benmarch / angular-ui-tour

Product tour using Angular UI Bootstrap Tooltips
163 stars 49 forks source link

Backdrop doesn't cover entire screen #124

Closed alex-p-crest closed 7 years ago

alex-p-crest commented 7 years ago

I have applied tour-step-backdrop="true". It applies to only some part of screen not entire screen.

image

As you can see the bottom part of image is not covered. So if i wanted to cover full screen then how to do it?

benmarch commented 7 years ago

@alex-p-crest, as I have asked you in your other issues, please fill out the issue template so that I have the information that I need to properly assist you.

alex-p-crest commented 7 years ago

Here is my index.html code

`

<!DOCTYPE html>

`

Here is my html code where i placed the tour

`

<div class="row wrapper border-bottom white-bg page-heading">

    <div class="col-lg-2">

    </div>
</div>

<div class="wrapper wrapper-content animated" >
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>Getting Started!</h5>

                    <div ibox-tools></div>
                </div>

                <div class="ibox-content wizard">
                    <div class="steps clearfix">
                        <ul>

                            <li ui-sref-active="current" style="width: 33.33%;padding-top:6px;border-top:0" id="step1"  tour-step tour-step-order="1" tour-step-title="1 Company Profile" tour-step-backdrop="true" tour-step-on-hidden="clearbody(tour)" tour-step-content="This is a 1 step on our tour. You can easy set a Company Profile." tour-step-placement="top">

                                <a ui-sref=".company_profile" class="btn-default ellipsisClass"><span>1</span> Company Profile</a>

                            </li>
                            <!--<li ui-sref-active="current">
                                <a ui-sref=".personal_profile" class="btn-default"><span>2</span>  Team Information & Privacy</a>
                            </li>-->
                            <li ui-sref-active="current" style="width: 33.33%;padding-top:6px;border-top:0" class="ibox-title" tour-step="step3" tour-step-order="3" tour-step-title="3 Users & Access Rights" tour-step-backdrop="true"  tour-step-next-step="step131" backdropContainer="#wrapper" content="This is a 3 step on our tour. You can easy create, import and edit users." tour-step-placement="top">

                                <a ui-sref=".users_access_rights" class="btn-default ellipsisClass"><span>2</span> Users & Access Rights</a>

                            </li>
                            <li ui-sref-active="current" style="width: 33.33%;padding-top:6px;border-top:0" id="step21" tour-step tour-step-order="21" title="Projects & Resources Management" tour-step-backdrop="true"  tour-step-content="You can easy create, import and edit projects." tour-step-placement="top">

                                <a ui-sref=".project_resource_management" class="btn-default ellipsisClass"><span>3</span> Project & Resource Management</a>

                            </li>
                        </ul>
                    </div>
                    <div class="wizard">
                        <div class="content">

                            <!-- our nested state views will be injected here -->
                            <div id="form-views" ui-view></div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<div ng-include="'app/views/common/customer/wizard/add_user.html'">

</div>

`

benmarch commented 7 years ago

Does your <body> or <html> element have any padding or margin?

Also, again, fill out the following template:

I am using the exact versions of the following:

I have installed this library via: (NPM, Bower, or downloaded package)

I have observed the following behavior:

This is how I expected it to behave:

Here is my tour config, and all related step configs:

var tourConfig = {};
<div ui-tour></div>
<div tour-step></div>

Additional notes/code:

alex-p-crest commented 7 years ago

My body ,html tag have margin :0px;

I am using the exact versions of the following:

Browser: [Chome|Firefox|IE|Safari] Version: Chrome Vesrion 57.0.2987.133 AngularJS: v1.5.7 Angular Bootstrap: v1.1.2 Angular UI Tour: v0.8.0

I have installed this library via: Bower

I have observed the following behavior: Observed that when tour load the popup does not positioned correctly and when i scroll a bit then it adjust automatically.

Also the backdrop does not cover full screen.

This is how I expected it to behave: popup behavior should be proper. Backdrop should cover entire screen.

Here is my tour config, and all related step configs: I am not getting your point for this

alex-p-crest commented 7 years ago

Image for backdrop issue where entire screen is not coverd

image

benmarch commented 7 years ago

Thank you for providing that information. Does your <body> tag use overflow: auto? Can you try adding the .clearfix class to your body?

alex-p-crest commented 7 years ago

My body tag have overflow-x:hidden

I have applied the .clearfix class to the body but then it has reduce the backdrop height more then the image i gave you.

benmarch commented 7 years ago

Ok, I'm guessing this has something to do with either the overflow, or 0-height containers of floating elements.

If you hover over the body tag in dev tools, does it expand all the way to the bottom of the content? Or does it end where the backdrop ends? Please include a screenshot if you can.

alex-p-crest commented 7 years ago

When i hover on body it end where the backdrop ends

image

benmarch commented 7 years ago

Ok awesome. It appears that the issue is somewhere in your styles. It looks like you might have floating elements that are not contained by .clearfixed elements. You might need to go through the markup and styles on your page and see if you have any elements that have 0 height, but contain elements with positive height. If you can find those, add the .clearfix class to all of them, and see if that fixes the issue.

alex-p-crest commented 7 years ago

In my style css, the body tag had the height : 100%. So while app load it was calculating the height based on that. I removed that 100% and it works fine.

Thanks.

prafull-agarwal commented 7 years ago

I am also facing the above problem. I can't remove height : 100% and overflow: auto from my body tag. Is there is any way it can even work. I have even add id on body and pass scrollParentId: "body-id" in TourConfigProvider as per your doc it even don't work.

prafull-agarwal commented 7 years ago

Also why you add a extra 1 px Y scroll in your dist/angular-ui-tour.js file. u.scrollTo(u.scrollX,u.scrollY+1) ?

benmarch commented 7 years ago

@prafull-agarwal can you include similar screenshots as above? The backdrop dimensions are calculated based on the size of the <body> tag. Using height: 100%; makes the body the height of the window, not the height of the content. You might have to play around with your styles to get the body to properly fit the contents. You might also be able to add an ID to the outermost containing element (other than the body) and use that as the scrollParentId (not sure if that will work, though).

The .scrollTo() call is a hack to get Tether to reposition. I'm hoping that it will no longer be needed once Tether is replaced with Popper.

Please let me know if you are able to work around this issue or have further questions.

prafull-agarwal commented 7 years ago

@benmarch Thanks for the quick response. I resolved my problem after adding some code in my js.

angular.element("body").css("overflow", "unset");

On tour start and

angular.element("body").css("overflow", "auto"); on tour end. Also I removed your 1px scroll from my file as it shifts my backdrop 1 px from bottom on every next tour step.