How to move the progress bar to the page bottom in Qualtrics? - qualtrics

The original progress bar was at the page top in Qualtircs, I tried to move it to the center bottom of the page using .Skin #ProgressBar{position: absolute;bottom:10px;right:10px;left:10px}, It works for some pages but not for the ones which need to be scrolled down to see the whole page. From what I understand, the "bottom" means the relative end of a page but not the actual end, but I have no idea of how to change it to the actual end.

Change 'absolute' to 'fixed'.
.Skin #ProgressBar{position: fixed;bottom:10px;right:10px;left:10px}

Related

Scrolling scrollable element

I am using Cypress to validade and test a webapp for a client. This site main page is not scrollable, however some functions works in a "pop up", which is sscrollable. For instance:
enter image description here
Sensible information censored. The thin blue line on the right is the scroll bar for this part only (the main page is blurred behind it). If I want to click an element on the end of this list, scrollIntoView doesn't work. How can I scroll just this specific part?
cy.get('.item-class').contains('Text inside the item').scrollIntoView().click()
enter image description here

Any idea for making image hotspot (WP)

For Wordpress, how can I make it like https://store.google.com/us/category/connected_home
Hotspot info, Top-tab for changing the spot. Can be made with slide revolution?
Inspect the page. They've positioned the elements with percentage based left and top values.
If I was to build something like this, I'd use javascript to hide and show the various labels when I click the menu tabs. And I'd add CSS animations so they transition in like in your example.

Menu bar movement from under banner to fix position on top of page?

The title explains it. I can't seem to figure out the specific way to put it while searching for a way to have a menu bar under a banner, then, have it move up to a fixed position on the top of the page as you scroll down (kind of like the salmon-colored box that is currently showing up to the right of this form).
I will be using a simple table for a menu bar.
Many Thanks!
Sean

Live cycle image field flush with the side of the page

I am trying to get a livecycle image field to be right up against the side of the page that it is on. It seems that I always have a little space between the image and the edge of the page no matter what I do.
Here is an image so you can see the problem: http://imgur.com/4WVVudi
The person should be on the edge of the page, he should be touching the bottom and right side.
Thanks!
Is the image on a master page or just within the content pages/subforms?
If the image is in the content pages check that the 'content area' in the master page is the full width and height of the page (use the information in the layout tab).
For precise positioning choose anchor bottom right and use the x and y co-ordinates in the layout tab.
cheers
Use the layout panel to check and set values for the content area width that contains your image field. Also set the width and positioning for the parent subform if you have the image in a subform.

How to maintain position of a div element by turning off and on the ribbon

I have designed a master page on which I have a horizontal banner with my company logo and in the same banner at right hand side I have copied the WELCOME control div from Ribbon area and placed inside banner area which is perfect.
I have customized master page to hide ribbon bar for the visitors (General users) with no uploading rights but the problem is that when site collection administrator logs in it shows the ribbon bar and my banner with welcome control but when visitor logs in the ribbon gets hidden and banner appears on top at the place of ribbon BUT the welcome control div doesn't move and gets displaced somewhere (cant see anywhere).
How to automatically change position of welcome control when ribbon gets off/on and appears in the banner accordingly. what change in CSS i need to do.
thanks

Resources