Styles are not being applied (Bs4)

Wappler General How To
#1

======== TEMPLATE BUG FORM ========

Wappler Version : 4.0.0-beta.7
Operating System : Windows 10 Pro
Server Model: NodeJS
Database Type: Local
Hosting Type: Custom

Expected behavior

Style should be applied as I work with elements.

Actual behavior

Styles are not being applied as I work with elements.

ISSUE VIDEO: https://streamable.com/lvmz18

How to reproduce

  1. Install Wappler.4.0.0-beta-7
  2. Create a new Project using the Blank App Template.
  3. Select ‘Custom Hosting’ for Hosting Type
  4. Select ‘NodeJS’ for Server Type.
  5. Add a DB (your choice, but for testing purpose I did it.)
  6. Make a Dynamic Page.
  • Add a Layout to it.
  1. Edit the Page and add elements to it.
  2. Edit styling of the elements, it should not work.

I don’t know what’s causing this, so I will leave it to the experts.

Thank you so much for looking into this.

#2

If you look in the routes tab is the layout linked there also?

1 Like
#3

yup image

#4

Not sure I understand what the issue is. What is the problem here exactly? What should not work? What do you change exactly?

#5

Please see the video, it may explain it better with a picture than what I can write down.

https://streamable.com/lvmz18

And what I meant, “it should not work”, is that if you have the same issue as me, editing the styling of the elements, should not work.

#6

FYI: I have created a PHP Server Model, project, and it does not have this issue… so it must be something with NodeJS

#7

I am having a tough time understanding the video.
It seems that in the middle of it you started browsing frontend components but that doesn’t have anything to do with the issue you are reporting, right?

#8

Welcome to Wappler!

One thing missing from your list of how to reproduce the issue is that you haven’t added the BS Framework in the project settings or to the page?

Could that be it?

1 Like
#9

Yes thats right, I should have edited that out, I was trying to simply point out of that no matter what element/block that I bring into the page, and then editing the style it wouldn’t work.

#10

Hi there Brad, sorry for not replying back to you, and thank you for the welcomes :smiley:

yes BS is shown/added in the Framework project settings…

#11

Hi and welcome,

The problem that you have shown has to do with an attached style sheet where the style rules can be entered. At the moment, you see the style rules for Bootstrap. However, the Bootstrap style sheets should not be touched.

To add your style sheet, go to Styles tab, click the plus button and select Attach CSS file...

image

#12

The only thing I’ve seen in that video is that you add via UI a custom class named “error” to your html element and this is reflected correctly in the code.

What would you expect to happen then?

You also say that no styles are being saved? What style do you expect to be saved and where? Do you have a CSS definition for .error somewhere?

We are all just hard guessing here. If I repeat your step by step I get exactly the same as you but I don’t consider it a bug.

I believe the heart of the matter is here:

But you just go over as it’s not important.
1 to 7 are pretty irrelevant to be honest. I would say you missed 0. Turn on computer. :joy:

Can you expand your point number 8 into 8 in-depth steps?

I’ll leave here this great article about bug reporting https://www.chiark.greenend.org.uk/~sgtatham/bugs.html

#13

Let me walk you through with timestamps:

At 0:24 seconds I do add a new styling class to the element, this of course activates the styles property panel of the element and also applies the corresponding class to the code in the editor as clearly shown.

At 0:32 I try to add padding and margin to the element, and that’s supposed to be applied in real-time to the element, that didn’t happened.

At 0:34 I simply moves the cursor out of the focus of the editor and it actually reset the styles properties panel of the element. Something which it shouldn’t happen, or why would there be such an annoyance that when you are working with an element your styles and properties resets everytime…

#14

I am not really sure i understand the issue you are having in your video, seems quite random to me.
Here’s the documentation explaining how to use the Design Panel:

If you mean that the styles don’t get applied immediately after you create the class - i’ve seen some similar bug reports, where sometimes in some rare cases you just need to remove them (the styles) and add them again - then they will be added correctly.

1 Like
#15

Yes this worked, but I still have other questions or more-so intrigues about how stuff works regarding the UX/DX with Wappler… Here I try to go over with whats going on:

1 Like
#16

I think that you are relying too much on the Design panel. Have a look at how a project can themed using the App Structure panel.

https://www.youtube.com/watch?v=Gi0SvMwZYeM