We have a pretty complicated application with lots of dependencies. And I am trying to get the design section area to work for us when multiple files are referenced in a singe view do be able to edit and style elements.
A lot of the elements generated on the page are not DOM elements… is there a way to modify these elements from the design area in this instance??
Really hoping that Wappler could save us from needing to work in a bunch of separate files at once.
What kind of elements are those? Can you show the source code?
Thanks George,
Here’s a quick screen-share of what we are trying to do:
https://share.nextstep.io/NQuKNbAA
Hi,
What I understand from the video is that you are trying to integrate another UI-based HTML page builder library inside Wappler’s builder UI. And I don’t think that is possible.
When in preview mode, Wappler’s builder actually loads the page as it would in the browser. What you see has been rendered by the PHP server where your files are hosted, and also all sorts of complex JS has run on the runtime to generate various UI components and CSS on the DOM.
What Wappler builder UI allows is to modify elements that are part of the PHP or HTML page - and not what will be rendered.
So from my understanding, what you are trying to to is not possible.
Also, since what you are using is a page builder, the purpose of it IS to be used in the browser, where it creates the final HTML page which can then be rendered to the end user. A page builder library cannot be used inside another IDE while development from my experience.
As for the modals.php page, the missing styles that you are reporting is most likely because there are no styles applied directly on the page. Rather, CSS is being applied either after page is rendered by PHP server or by the library’s JS on the runtime.
There were issues with styling on includes and content pages sometime back, but I think they were resolved later. So, if you see there are classes being used in the modals.php HTML, and attaching styles file does not apply CSS, you should file it as a new BUG report.
Thanks @sid,
That has been our experience thus far trying to get a front end GUI for development to work for this particular project.
modals.php (while being referenced in index.php) has class names and id’s specified on elements in the file itself.
So, it probably is a bug with this instance for that. When I load up index.php and pull up something from the design emulator that calls modals.php, then the CSS does render over there… just not in the “design” view for modals.php. When I connect the stylesheet it doesn’t seem to keep past a refresh of the design/styles tab. So, the bug might lie in there.
Wappler has been really nice to use though on the elements that do load however. We may still end up using wappler anyway 
.
Now my next question is this… would I be able to reference index.php while I am editing modals.php or other similar files, so that I can have the design emulator have the complete look as if I was working in a browser? The intention of that being that as long as my front-end devs know where the files are, they can always still use the design area within the whole rendered version of index.php as it would in a browser with all of it’s dependencies to be able to design and build components in the appropriate scripts/files.
If that is possible, that would be still a pretty optimized workflow for the front-end devs of this particular project and would be very helpful in terms of speed of development.
