Hey Guys,
Does anyone know a trick to center an element like a button or text to always appear in the center of the page? So for example if the element was a dot “.” page height and width are 100x100 then the dot’s coordinates are x=50 y=50.
Stick the element in a group and then select center horizontally.
Or make the text element 100% width and adjust its styling to center alignment.
Sorry, thats not what I meant. I mean in a responsive sense. I want the dot to be centered regardless on the resolution of the screen (above the fold). So far I don’t think the responsive engine in bubble can do that, at least for verticle alignment
For horizontal alignment, I have been using a shape at each side of the element, with 0 margin between them, then you set the responsive attributes for the shapes to be centred.
Set the shape to be invisible, and all is good.
1 Like
Are you asking about keeping it centered vertically?
Yes I am. The problem is if you center the object in the editor and the resolution of the device happens to be different then the object stops being at the center of the page. I wonder if @emmanuel can help
@emmanuel I know you guys are busy at the moment but how can we center an object above the fold? Can we have another option for the floating group added. So for example
Top
Bottom
Both
Nothing
Fold <—
This way a floating group can be used always to stay a certain distance above the fold?
Thanks
this doesnt sound like the right approach for such a simple task.
Is that the only way how to simply center text in a responsive design? it also seems like its not possible to set text width to 100% (of actual screen width) and just set center alignment. Also when I select center margin in responsive builder, it doesnt help.
Probably because its relative to neighbours but there are no neighbours in case of simple centered title.
Hey there AliFarahat 
There’s no easy way that I’m aware of this in Bubble. However, if it’s important to you… I thought I’d jot down a few ideas that came to me.
-
If you know Javascript, You’re good to go… You can grab that fold data that you’re looking for. Just pop in a request for the viewport (the dimensions of the screen you’re viewing this on, whether it be a phone, tab or desktop…) and you can pull the current device’s width and height. then you can arrange that mystical dot smack dab in the middle of your page. Check this link out! http://ryanve.com/lab/dimensions/
-
Bubble has given us the viewport width but not the height.
If you could SETTLE for an approximation, you could use Bubble’s handy dandy screen width number. Then you’d be able to guess which device people are using. From there you could arbitrate some different vertically positioned dots that you could show and hide based on those widths.
-
If you’re using this on phones… you could do something really sneaky… If this dot that you want centered has been built for a splash page, then this wouldn’t work. However, if this centered thing is something that has some persistence in your site, then howz about this: When your site loads, have some reason to ask the user to tilt their phone horizontally (landscape)… Then at that time… give them something to do (so they feel that they have been productive in sideways mode… At that moment, kablammo, capture the ‘screen width’ that Bubble gives us… Then on turning the phone back to portrait, grab the width again… and you have yerself a hacked width and height. Throw in a few cleverly spaced optionally viewable shapes and your can shimmy your dot (or whatever) into space. You’d have to work this a bit, but that’d work.
-
Obviously you can’t have your desktop clients tilt their screens to any useful outcome. But how about this?
So, you have something for people to do (push a button, click a doodad, drag a box... ) People interact with the screen, all the while outlining the limits of their vertical reach... Of course, people could just scroll down, so you'd have to build the whole deal on a floating group that is attached to the top of the screen.
Anywho, I could imagine that they were gold coins (or some concept that is in line with what you’re doing… ) Anywho, so these gold coins (or something appropriate for your site) would be flashing and people have to grab the coins… They’d be clickin all over the ‘frozen’ (due to the floating group covering the entire screen) space, unable to scroll down and tapping all over their screen… You could detect which buttons were clicked and therefore determine the extent (roughly) of your viewer’s screen size… Apply your viewable blocks and magico presto… Vertically/horizontally aligned content.
-
Hey, here’s a fun idea!
What if you just asked people to center your content? haha... No no, hear me out. Have you played with those draggable groups and their drop zones? They're da bomb. Anywho, If your centered object is near and dear to your heart, you might find that people would grow closer to your object if they are manipulating it. So, here goes trying to explain this whacky idea. It's based on the assumption that you can layer drop zones and that more than one drop zone can register a dropped group (I haven't tested this but I assume it should work... anyone?)
Make a series of drop zones the exact width of your draggable object. They’re set to receive only fitting objects, so you have to be right above them to make a successful drop. Anywho, make a bunch of these drop zones overlapping… several wide but short ones… and several tall but skinny columns… They would overlap across the middle…
Then ask your people to put the thing in the center of the screen. There could be some interesting marketing application as to why you might ask someone to place something dead center.
Then sit back and watch da magic of the bell curve. After a time, your folks (assuming they’re having fun manipulating this object in space) would be “depositing” their perception of there the middle of the screen is… After some time, you could have a big chunk of data… People’s dropped object… vertical position, horizontal position and their screen width (which you can grab from Bubble)… Oh, maybe you’re asking people to sort something or make a stack of something in the middle of the screen…
Later if you like, you could average our your numbers and make a fairly reasonable guess as to the correlation between the device width and its height. Badda bing!
Have a great day!
Ashley
2 Likes
Thanks for the reply!
Hey there Ali!
No problem
Have a great week!
Sincerely,
Ashley
This topic was automatically closed after 70 days. New replies are no longer allowed.