Search code examples
javascriptcssdesktop-applicationmaterializejavafx-webengine

How to decrease size of all widgets of materialize.js?

Is there an easy way to decrease the size of all material.js widgets (smaller padding, smaller font sizes, ...)?

I want to use materialize.js for a desktop application (inside JavaFx WebView).

While the widgets would be fine on a touch screen for a web app, the widgets are too large for my "rich client desktop app" ... that I don't control with my thumb but with a mouse pointer.

I don't want to manually modify the css properties of each individual widgets and I tried to adapt the zoom level, but that only affects the font size.

  • Is there some sort of global css scaling factor I could apply?

  • Or is there a theme or a fork of materialize that targets desktop applications?

(In the past I used SWT. Now I consider switching to html & css because I had some hard time with that "old" SWT technology, especially with its rigid layouts.)

enter image description here

Example for collapsible widget:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"  media="screen,projection">
</head>
<body>
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>

<ul class="collapsible" data-collapsible="expandable">
    <li>
      <div class="collapsible-header">header</div>
      <div class="collapsible-body">body</div>
    </li>

  </ul>


</body>
</html>
Solution

  • Many of the materialize css sizes are specified in the unit rem. That unit scales with the font size of the root elememt (html-tag).

    => Choosing a small font size for the root (e.g. 3 px) decreases the size of the widgets.

    The font inside the widgets would now be too small ... but setting a larger font size (e.g. 12 px) for the body element yields the wanted result. (I also adapted the font family to better fit the fonts used by my desktop application.)

    Modified example:

    enter image description here

    <!DOCTYPE html>
<html style="font-size:3px;font-family: 'Segoe UI', Consolas, monospace;">

<head>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"  media="screen,projection">
</head>
<body style="font-size:12px;">
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>



<ul class="collapsible" data-collapsible="expandable">
    <li>
      <div class="collapsible-header">header</div>
      <div class="collapsible-body">body</div>
    </li>

  </ul>


</body>
</html>