Issue with Inline Styles

Hello All,

I am working in Wappler Beta 7.0-b28.
I created a new project, however, the content is not visible in the editor. Also, the Text & Background Color options are all white & even after applying these Font Color & Background Color the page opens with default state.

Below are the screenshots of the issue:

In the below code, i have applied primary for H1, primary-emphasis for Paragraph & btn-primary for btn1, however, when the page is run none of the style is applied:

<div class="container">
    <div class="row">
        <div class="col">
            <h1 class="text-primary">Fancy display heading</h1>
            <p class="text-primary-emphasis">A nice paragraph</p>
            <button id="btn1" class="btn btn-primary">Button</button>

        </div>
    </div>
</div>

Output of the page:

image

I reinstalled the Beta version, still the issue persists. The project which were created previously are working fine.

Hello @miu,
It's a nodejs project?
Take a look at your layout page, is bootstrap there?

Check if framework is loaded:
image

You probably need to re-save main layout page and restart server

Yes, i have Bootstrap 5 local enabled.

I tried to close & restart Wappler still the issue persists.

As @franse mentioned, please check your layout page that bootstrap is actually added to the page.

If you need to, post the contents of the tag here.

Also check within the Content page that the bootstrap tags have been added to it (first line in the page at the top)...

<!-- Wappler include head-page="layouts/somelayout" is="dmx-app" id="someappid" appconnect="local" bootstrap5="custom" .......... -->

Can see you have the 'weird' problem whereby the Properties Panel for the page is not showing the colors for the text classes (the panel on the right of the Design area).... I can't find the Bug Report but this was reported some time back and thought it was resolved?

I re-applied all the Frameworks & it started working.

Thanks @brad @franse @Cheese for your help.

2 Likes