So, what I am trying to achieve is a Gui that looks like this:
However after testing it on several other devices it looks like this:
As you can see it compresses both the horizontal scrolling frame as well as the buttons on the left. I have researched for a fix however I could not find one. Does anyone have any idea what the problem could be? Thank you!
The problem here is pretty simple, you need to scale your frames. You can use AutoScale Plugin but it would be better if you know how to scale manually. However, scrollingframes are a bit complicated, scrollingframes cannot be scaled with plugins so you need to manually scale it from its properties. Make sure to use UIAspectRatioConstraint to your main frames. In simple words, always use “Scale” instead of “Offset” in Roblox GUI.
I have tried using these UIAspectRatioConstraint, however when I test it the UI is still compressed. I also can’t achieve the desired look I want when putting them in specific buttons. Is there anything else it can be? I’ve noticed that in my scrolling frames I have UIGridLayout and it forces my buttons to have offset scaling could that be part of the issue?
You don’t put the UIAspectRatioConstraint in the buttons, you put them in the main frame or the button’s parent frame. And yes that is the issue, you have to manually scale the properties of UIGridLayout, maybe put some other UI Elements to help you there too such as UIPadding and etc. If you want your scrollingframe to not look compressed, you navigate to the UIGridLayout properties and click the arrow button in the “Sizes” I believe, and set the “Offset” to 0 then re-size them using “Scale”.
Hey! I played around with what you said and the scrolling frame stuff works now. But the buttons themselves are still a little weird the text on the fixed version looks enlarged. The buttons on the left side are also a bit to tight. What would you recommend for these issues?
Fixed:
Old:
Desired look:
In other words is there any way to lock those buttons in place on the left?
Nice, I’m glad you did it. Can you ss the StarterGui? I don’t see why you can’t scale them. Also, if you have AutoScale plugin, you can simply just select the texts that is in the frame because they’re a little too big if you haven’t scaled them yet.
Alright so I fixed the little stat boxes. But I was not able to fix the text boxes on the left with the plugin, so not sure what I should do about that. And as seen in the desired UI there are gaps and the borders look a tad but to big unless its a simple narrowing of the borders. But, the UI is also not centered but is when I am in studio any ideas as to why these issues are happening. Also, thank you for the help so far, I have no idea what I would’ve done had you not replied.
Current:
Non-Centered GUI:
Desired:
You didn’t send the StarterGUI, I can’t see the problem., and no problem.
Sorry, Would you like it as a model?
You can just ss the StarterGUI.
Here ya go, I wasn’t able to get everything in the screenshot but the rest should be able to be deduced. The Ape scroll frames are also below the customization menu on the actual GUI, and are not visible as the class button enables those.
I’m guessing the buttons on the left are labeled as “TextButton”, now add a frame and size it where the buttons can fit inside. Put the buttons inside the frame (In StarterGUI and on screen). Then, once you do that you’re gonna want to scale it (don’t forget) and set the background transparency to 1. Select the frame you made, go to AutoScale and click “AddConstraint”. Make sure the buttons are scaled too.
Alright that seemed to have worked. I did everything that you’ve told me as well as adding some anchor points that I probably should have put there but in the past didn’t seem to have needed them, and after testing it on several devices it is centered. The only issue I have left and it isn’t a big one, and I just wanted to see what’d you’d do in this situation, the border on small devices seems to enlarge and am not sure why.
Iphone View:
Laptops, Tablets, Consoles:
If the TextButton has “UIStroke” as the border, you have to script it to make it compatible to all devices.
For this I just used BorderSizePixel to obtain the border. But I guess the issue itself, is the border’s seem to enlarge themselves. However, it only happens when I am on a small device like a phone. Would scripting this solve this issue?
I’m not yet familiar with BorderSizePixel but usually when things get larger in mobile screen, it is a scaling problem, if you can’t scale the BorderSizePixel through its properties then I think it can be solved with script
I wasn’t sure how to go about the script stuff however I can live with it on smaller devices. I appreciate all of your help! My gui looks much better than it was when I first started, thank so very much!
