Hovering text editor

Posted over 5 years by michael step

Post a topic
Answered
m
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

Bahati posted over 5 years 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

Sorted by
m

michael step posted over 5 years

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

m

michael step posted over 5 years

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

Bahati posted over 5 years

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.

  

image


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

Bahati posted over 5 years

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

m

michael step posted over 5 years

image


0 Votes

m

michael step posted over 5 years

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

Bahati posted over 5 years 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

m

michael step posted over 5 years

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

m

michael step posted over 5 years

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

0 Votes

Login or Sign up to post a comment