Maslow Home Maslow Community Garden Newsletter

Somewhat Off Topic: Need help with CSS

Is there anyone here that understands CSS and in particular Boostrap4 and flex? I’m trying to tweak the layout of webcontrol and banging my head on something. I know I can ask stackoverflow, but I figured I’d ask here (because they’d be familiar with what I was talking about) before I did.

I haven’t touched them in many years but I’ll take a look if you point me to where the issue is.


(some of the css you see isn’t being used… like .my-sidebar)

What I’m trying to do is use flex boxes to fill the entire screen without scroll bars (horizontal and vertical). I’ve succeeded in doing so by separating the gcode display and the control display as two separate columns with the controls a fixed width (460 px) and the gcode display set to flex-grow. What I’m trying to do is in the control column, fill up the bottom portion with a scrollable div to contain the messages that come from the controller. I can make it work by setting the scrollable div to have a height of 20vh… but that works on my 1920x1080 monitors. However, I don’t think that works on monitors of different resolution. If I don’t make it a fixed height, then the div grows as I send messages to it and it keeps on expanding causing scroll bars to appear on the main screen (not just within the scrollable div). I’m trying to stop that from happening. I don’t know if that explains it well enough. I just need to get the “controllerMessage” div to expand to what space is left rather than tell it what percentage of the viewport height to use or how many pixels to use.


I see what you are getting at. I remember something about using percentage constraints. I’ll have time to give it a closer look tomorrow morning.

1 Like

Thanks… I’ve tried to use percents, but because I don’t really know what I’m doing, I’m not succeeding.

I tried to turn the control column into a flex column where are the buttons, etc. are flex items but the entire screen turned into a jumbled mess so I don’t know you can embed a flex inside a flex.

Weird. At 1440x900 it looks like “canvas” is dictating the vertical height and the scroller it taking what ever is available. I’ve tried constraining the canvas and body elements but it always ends up with a view height that is about 120% of screen.

BTW, the camera is a cool feature!

I use Jinja and flask and the frontpage3d.html is the content component of base.html. In base HTML the header/menu is set. Could that explain the 120%?

Not a clue, sorry. It doesn’t want to stay within the constraints. I tried adjusting yours and throwing several others but it just won’t stay inside the view area. Prolly a question for stack exchange or that guy over at w3school.

Thanks for looking at it.

I managed to get it to work. Not the solution I was hoping for, but for the two flex columns (display and the controls) I set

height: calc(100vh - 85px)

where 85px approximately represented the height of the navbar.

For the controllerMessage scrollText, I set

height: calc(100vh - 720px)

where 720px represented the height of the navbar + controls.

Sorta hackish but it works for screens 900px high and the controller messages div grows larger for higher resolution screens. I’d have to go to a responsive setup to handle screens smaller than 900px and that’s a whole lot more work.

there’s probable not going to be many cases for going lower than 900 vertical pixels. This laptop is 6+ years old and older desktops will do at least 1280x1024. prior to that the openGL 2.0 thing will kill it before getting to webcontrol. PS, it looks great on my phone also. the browser just formats it as a single column.

The phone has its own frontpage_mobile.html file. That was easier to do because only real solution is to stack it all vertically. I didn’t bother with a landscape mode.

HD monitors aare 1920x1080, mointors that were 1024 wide were normally 768 high,
so you should aim to supprot down to that size.

David Lang

You can zoom out in the webrowser and make it fit fine with a 1024x768 monitor (surprised how well that actually works). I’d have to do a lot of work with responsive elements to make it fit in native resolution.

Setting flex-direction for the page as row and flex-direction for the sidebar as column will help keep everything where it should be width wise. For the sidebar menu, you can use flex ratios to maintain the proper sizing vertically. Then you can apply your overflow scroll or auto to the scrolling section without any impact to the sidebar height because the flex ratios won’t allow the div to grow as content is added to it. I have some time this evening and can do a theming pass on this if you haven’t sorted it out already.

Any help would be appreciated… I got it to work fairly well, but it might not be the “most correct” implementation.