No facility to add a class to the <body>

Feature Request
1

Wappler Version : Beta 1
Operating System : W11

Expected behavior

I would like to add a couple of CSS selectors to the <body> as in

<body id="main" class="h-100 d-flex flex-column">

Actual behavior

Can only hand code in Code view. Class should be added.

image

2

The only way I find is with the Design panel. Hope this work for you.

1 Like
3

Thank you, Juan, had not noticed this.

Despite that, it would be handier to have the class selector where other selectors can be found.

4

You can also use Dynamic Attributes > Styling > Style or Class Toggle

image

5

No, that will not work for

<body is="dmx-app" id="main" class="h-100 d-flex flex-column">
6

The reason for my request, when I create a new Node project, I rearrange the layout page to:

image
image825×1116 5.88 KB

The code to achieve this:

<!doctype html>
<html class="h-100" lang="en">

<head>
  <base href="/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Wappler 7 Beta Playground">

  <title>Wappler 7 Beta</title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
  <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/css/style.css" />

  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
</head>

<body is="dmx-app" id="main" class="h-100 d-flex flex-column">

  <header></header>

  <main is="dmx-view" id="content" class="flex-grow-1">
    <%- await include(content, locals); %>
  </main>

  <footer></footer>

  <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Where <html> and <body> both get a class of h-100, while the <body> is turned into a flex-column container

This is to facilitate <main> to grow to all available space thus pushing <footer> to the bottom of the page.

Note that I also change <div> to <main> for reasons that are explained in

Personally, I feel that this structure should be the default that Wappler produces.

7

I'm not sure this is a bug but perhaps a feature request? I don't see any way to add class to body tags in 6.8.0 either?

8

Good idea :bulb:

Done.

1 Like
10

I do this manually. I dont find other way too.

1 Like
11

Implemented in Wappler 7 beta 4.

Now when using Bootstrap 5 you can specify a lot bootstrap options on any html elements with the property inspector

1 Like