Hovering text editor

Posted over 6 years ago by michael step

Post a topic

Answered

michael step

Greeting, my products end up very tall, which makes much of the content below an area you need to scroll to. is there a way to make the hovering text editor appear above the selected text/textbox instead of all the way on top?

also any way of getting the window to be responsive for client end too? like when responsive is clicked it doesnt go above a certain height, but when its off its like now which is max width?

thanks

0 Votes

Bahati posted over 6 years ago Best Answer

First you will need to create two columns in you page one for the product designer and one for the fancy product designer main bar.

Next use any of this columns you created to display the main bar using the [fpd_main_bar] short code and use the other column to display the product designer using the [fpd] short code.

Here is where you need to add some code to make the column containing the main bar sticky on the page so that when the user scrolls the page the main bar will follow them.

The code below can be used for that :

 position: -webkit-sticky;
 position: sticky;
 top: 100px;
 height: 700px;

Demo video

0 Votes

9 Comments

michael step posted over 6 years ago

tyvm, but the length is so huge atm its getting back feedback so trying to not increase user scroll.. Is there a way to limit the editor than?make the design even smaller for"flyer options? like max height of editor?

0 Votes

michael step posted over 6 years ago

Any way of making it load on top? It's a flyer and it's long as is.. is there any way for me to decrease the height of the designer so the flyer is smaller? Tyvm

0 Votes

Bahati posted over 6 years ago

Hey I check you site and notice you are using a pop modal to display the product designer so the code above only WILL NOT WORK .

The idea remain the same adding the margin bottom. I hope this is what you want to achieve.

add the code below to your UI & layout Composer custom CSS to apply this margin bottom to all the product

div[id^='fancy-product-designer-'] {margin-bottom: 200px; }

If you want to apply this to only one product use this instead and specify the product id (use chrome dev tool to get the product ID)

#fancy-product-designer-315{
margin-bottom:200px;
}

0 Votes

Bahati posted over 6 years ago

You can either increase the bottom margin for product designer and the page or increase your product designers height

.fpd-product-designer-wrapper{
     margin-bottom: 500px;
}

0 Votes

michael step posted over 6 years ago

0 Votes

michael step posted over 6 years ago

I was talking about the one for like text. The one on the side is fone. It's just the one inside the designer loads outside the designers dimensions

0 Votes

Bahati posted over 6 years ago Answer

First you will need to create two columns in you page one for the product designer and one for the fancy product designer main bar.

Next use any of this columns you created to display the main bar using the [fpd_main_bar] short code and use the other column to display the product designer using the [fpd] short code.

Here is where you need to add some code to make the column containing the main bar sticky on the page so that when the user scrolls the page the main bar will follow them.

The code below can be used for that :

 position: -webkit-sticky;
 position: sticky;
 top: 100px;
 height: 700px;

Demo video

0 Votes

michael step posted over 6 years ago

okay found it, but now i remember why i disabled it. PLEASE HELP, it loads below the page for items at the bottom of the page. any way of loading it above the itembox when below 50% of screen or something? thanks

0 Votes

michael step posted over 6 years ago

i just seen that your demo now has that, is that from the PLUS plugin? or my FPD bugging?

0 Votes