Having Trouble Getting my UI to behave
Hi everyone,
I'm experiencing an issue with a 3D model in my project. It's supposed to stay within its bounding box (or allocated area), but when I resize the page, it moves outside of its designated space.
I'm also seeing the same problem on mobile, where the 3D model overlaps the text below it.
Does anyone know how I can ensure the 3D model stays in its correct area, regardless of screen size or device?
Thanks in advance for your help!
6 Replies
Hi @khb. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I apologize, but I don't have enough specific information in the provided knowledge sources to directly answer your question about 3D model behavior in UI resizing. The knowledge sources are focused on Wasp, a framework for building web applications with React, Node.js, and Prisma, and don't contain information about 3D model rendering or responsive design for 3D elements.
However, I can offer some general advice based on web development principles:
1. For responsive design issues, you might want to look into using CSS media queries to adjust the size and positioning of your 3D model container based on screen size.
2. Ensure that the container for your 3D model has appropriate CSS properties like
overflow: hidden to prevent content from spilling out.
3. Consider using relative units (like percentages or viewport units) instead of fixed pixel values for sizing and positioning.
4. For mobile-specific issues, you might need to adjust the layout or scaling of your 3D model for smaller screens.
If you're using Wasp and encountering UI issues, you might find some general UI-related information helpful:
1. Wasp allows you to define a common layout for your application using a root component. You can read more about this in the Client Config documentation.
2. For styling, Wasp projects can use CSS. You can define global CSS in a file like src/client/Main.css and import it into your root component. This is mentioned in a Discord support thread.
If you need more specific help with your 3D model issue, you might want to provide more details about your implementation, including the libraries or frameworks you're using for 3D rendering, and any relevant code snippets.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @khb, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?Here is a picture of the problem, along with a link to the website if you’d like to try recreating it: https://siteengineer.com.au/nozzle-design.
I’ve also included the code in a .zip file. If anyone could provide some pointers to set me in the right direction, I’d greatly appreciate it!
Site Engineer
Site Engineer is a platform for designing and calculating nozzle designs for industrial applications.
I couldn't reproduce the exact issue shown in your first screenshot, but I could get the layout to break. You have the
h-screen class applied to the div containing your canvas, which forces it to 100vh and the canvas overflows depending on the screen height. Remove that class and it will expand to the height of it's contents, which solved the problem in my browsers, at leastwoah nice @genyus. Yeah CSS is always tricky
You got it solved thanks boys 🙂
Glad you got it sorted 👍🏾