Stop a text box moving position on page resize

Hi all,

I am trying to get a text box to stop moving when resizing the width. I thought if the left margin button was pressed then the left margin would not move (see gif). Not going to lie, the whole responsive section confuses me but I am not sure what is going wrong here.

Any help would be greatly appreciated.

Thanks
Craig

2019-11-12_15h00_08

You could put a group between the start of the text box and the border on the left of the page then set the group to be fixed width. I believe that should work fine

Hi Locky, I have just tried this and unfortunately it does not work.

Thank you for your suggestion.

Thats surprising. I would assume the group would block it. Have you tried putting the text in its own group too and then using the same idea i stated above this time just blocking the group?

Put it inside a group and put that group inside another group. Sounds weird. It works.

Thank you for getting back to me, unfortunately it still doesnt work, its very irritating!

Thanks for the suggestion Codeables but this didnt work either.

Try to put a group on the left side of it so it pushes it to the right and one box on the right to push it left and put them all inside one group with a max width.

What you’re trying to achieve is not general style but should work.

could you link us to the editor by any chance so we can take a look?

I think I have found the issue but I am not sure why it is doing it. It seems to do with the nav bar on the left. When I delete the nav bar the responsive width of the text works correctly and does not move but when the bar is there it moves. The nav bar and logo are in a group and the text is not in the same group. When I click on the text and click ‘explain box margins’ instead of giving me the details of the text it gives me details of the box. Very strange. Could this be a bug?

do you have element id’s visible?

try adding css like this

#div {
       top: 0px;
       left: 0px;
       position: fixed;
       z-index: 3000;
        }

just change the “div” to your element id and the pixel (px) values to the position you want it in on the page.

I like to create padding with borders set to 0 opacity

Sure, think this link works, permission is set to edit but not sure where the link is https://bubble.io/page?type=page&name=dashboard_admin&id=dazzlehr&tab=tabs-1

do you mind if i add the css plugin?

go for it

You really dont need css

Thank you, will try it now

1 Like

Its not even letting me change the border colours. This is very strange

I’m looking at the editor now and nothing is responding the way I’m expecting it to. I’m quite confused.

1 Like

whatever you guys have done appears to have worked now on my side

2 Likes