Change the font size for all objects

Targets Web
1

How do you change the font size for all objects on one screen in Xojo Web?

I want to ask the forum for different ideas on how to solve this problem.

Take note. Do not apply to the entire project. The changes occur only on one screen.

Problem. The client wants to see all his data captured on a single screen. The objects involved are WebTextField, WebTextArea, WebDatePicker and WebPopupMenu.

I would appreciate any ideas.

2

The best way would be to use a custom Bootstrap theme that sets the --bs-body-font-size CSS value (or $font-size-base variable in SCSS), but this may not work the way you expect in some instances. Extreme changes may cause text to be cut off vertically depending on how it’s implemented in each control. The default theme uses 1rem as the value. You might try this in App.HTMLHeader:

<style>
  :root {
    --bs-body-font-size: 1.2rem !important;
  }
</style>

Again, there are a few different variables at play in Bootstrap, so this may not work the way you expect.

EDIT: Just saw that you don’t want it everywhere. In that case you’d use me.style.FontSize = 14 in the Opening events of those controls and probably hope for the best. To apply to DateTimePicker popups and WebPopupMenu popups, that’s a whole other level of customization that would require you (or someone) to inspect the DOM and write the CSS necessary.

I’d probably suggest the user familiarize themselves with the browser zoom functionality if I were in your shoes.

1 Like
3

Thanks Anthony.