Positioning content area dropdown

Support
#1

Hi
Pls refer attached screenshot
CloudApp
Trying to position Positioning content area dropdown at the exact position on an image, so we can explain users each fu8nction
any idea how can we position each on exact place (and keep the same on responsive mode)
CloudApp

#2

Hello @yacov,

Thanks for writing in!

You can only position the content area dropdowns along with your image if they are in the same container. It will require custom css by the way. You can add something like this in the content area dropdown element css:

$el {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

The top and left values should be adjusted in your image. If nothing is helping, please provide us a url of the page so we can check it.

Regards.

#3

Thanks that worked only for the pop up text window
however need to set up position for that icon (https://cl.ly/1b6fadf56b4a) which opens the window itself
you can see that herer :https://swim-wise.app/architecture-theme/

#4

Hey @yacov,

We’re sorry for the confusion. The information given to you previously is incorrect. That provided code will apply to all areas of the Content Area Dropdown where the generated class is outputted, and that can complicate or cause conflict with the display of the element. Please remove that before we continue.

Let us start over. First, since you are using an image as the column background, I believe you will need to display the same image parts and dropdown toggle positions in all screen sizes. Right now, viewing the column in different sizes result in different image parts being displayed so it would be tricky to position the dropdown if this is happening. If you take a look at the following screenshots, you’ll see that the position of the buttons is different in each image. Read on for the solution.

Here’s the solution to maintain an aspect ratio in the column. You first need to add a Gap element to the column and set the Gap Size to use percentage unit and adjust the value until you’re happy with the image display. Adding a Gap with a percentage based value acts as a spacer that will retain a certain aspect ratio which applies in all screen sizes from desktop screen to mobile screen.

Now here’s how to position the Content Area Dropdown toggle/button in the image. Add this code in the Element CSS of the Content Area Dropdown. The code only targets the main element container and not parts of it.

$el.x-mod-container {
  position: absolute;
  right: 20%;
  bottom: 10%;
}

You will see that it will position the toggle/button at the bottom right-hand side like what the code says. Notice that I’m still using percentage-based value in that code. That will position the toggle/button in the same spot in the image. But, you will also take into account the size of the button. Please take a look at the following images which is the actual result of that code in my test site. Take note of the windows in the picture I’ve boxed. That indicates that the toggle is still in the same position even in different screen sizes.

Desktop Screen

Laptop Screen

Phone Screen

Notice the windows on the phone screen. Though the toggle is still in the same position, because the size of the button does not change and the size of the picture changes (got smaller), it’s no longer accurate. This is its limitation and you will need additional custom CSS to resize the button. I belive this is not a problem with your image since it does not have tiny parts like the sample image.

Lastly, please note that custom coding is outside the scope of our support. My purpose of showing you the code is to showcase the features of our builder. It is the user’s responsibility to learn the CSS properties used in the sample code and the rest of the coding that will be needed in the future. We can, however, point you to the right selector(s) you will need in case you get stuck.

Hope that helps.

1 Like
#5

Thank you very much for detailed explanation
could you pls let me know , where should i place the gap
i placed it above the image
CloudApp

#6

Hello @yacov,

You have to add it inside the column where you have added the image as background. Depending on the size of the gap element, it will stretch the image thus you can get the image display size that you need. This is because when an image is added as background, its size will depend on the content.

Hope this helps.

#7

thanks

  1. will that be better if i wont put it as background?
  2. Pls refer : https://swim-wise.app/
    as you can see here : https://cl.ly/ea06f3f2532f
    I the admin panel all drop down icons are in the right position ( i used your css code you suggested me to do)
    However on live site it looks much different and all icons are placed on wrong places
#8

Hello @yacov,

In your Pro editor custom css section, add this:

.x-section .x-col {
  position: relative;
}

If this isn’t helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Best Regards.

#9

like that here?

#10

Hey @yacov,

We’re very sorry again for the incorrect information. Please disregard the code advice of @RueNel as x-col is already set to position relative in the theme’s CSS.

Now let me go back to your questions:

If you followed my instruction, it does not matter where you place the gap in the column because the toggle/button of the Content Area Modal will be positioned absolute therefore it will not take up space in the column.

No. My instruction is using the image as a background and that is your previous setup. If you wish to continue using the Image element, please hire a web developer as that is more tricky to setup.

My instruction is using the image as a background. Please use the image as a background. It won’t work for the Image element setup.

And, again:

I’m sorry if this setup is hard for you but our builders do not yet have a capability to position elements specifically in a section, row or column. You would need to understand CSS positioning as I’ve said previously. If it’s hard, I’d recommend you hire a developer to specifically position elements in a column for you.

Thank you for understanding.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.