Styles Panel not functioning as expected

Wappler General
#1

Hi-

So after upgrading to 1.7 the Styles panel is not functioning.

I do have an additional css included but I cannot access it.

Options > Systems > Experimental is toggled on. Options > CSS are all on with browsers 2 versions on.

The styles label is blue but the search, toggle overloaded, insert new rule and attach stylesheet are gray.

Please advise.

Thanks,

Howard

<!doctype html>

<html><head>

<title>The Tanner Cast &amp; Crew</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="[https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css)" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link href="[https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css](https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css)" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- Custom CSS styles-->

<link rel="stylesheet" href="css/style.css">

<script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>

<script type="text/javascript" src="[https://code.jquery.com/jquery-3.3.1.slim.min.js](https://code.jquery.com/jquery-3.3.1.slim.min.js)" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

</head>

<body is="dmx-app" id="cc">

<div class="container-fluid">

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand mr-auto" href="#">

<img height="30" alt="">the tanner

</a>

</nav>

<header>

<h1 class="text-center pb-5"><small class="text-muted">The Tanner Talent</small></h1>

</header>

<div class="card-deck">

<div class="card">

<img class="card-img-top" alt="Card image cap">

<div class="card-body">

<h4 class="card-title">Amber Dawn Lee as Amber</h4>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

<a href="#" class="">

<i class="fab fa-instagram"></i>

Go somewhere</a>

</div>

</div>

<div class="card">

<img class="card-img-top" alt="Card image cap">

<div class="card-body">

<h4 class="card-title">Joanna Vanderham as Caitlin</h4>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

<a href="#" class="">

<i class="fab fa-instagram"></i>

Go somewhere</a>

</div>

</div>

<div class="card">

<img class="card-img-top" alt="Card image cap">

<div class="card-body">

<h4 class="card-title">Sara Murphy as Becky</h4>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

<a href="#" class="">Go somewhere</a>

</div>

</div>

</div>

<div class="row" style="padding: 10px;"></div>

<div class="card-deck">

<div class="card">

<img class="card-img-top" alt="Card image cap">

<div class="card-body">

<h4 class="card-title">Shellie Sterling as Charlotte</h4>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

<a href="#" class="">Go somewhere</a>

</div>

</div>

<div class="card">

<img class="card-img-top" alt="Card image cap">

<div class="card-body">

<h4 class="card-title">Joe Chambrello as Jamie</h4>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

<a href="#" class="">Go somewhere</a>

</div>

</div>

<div class="card">

<img class="card-img-top" alt="Card image cap">

<div class="card-body">

<h4 class="card-title">Zoe Sloane as Babe</h4>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

<a href="#" class="">Go somewhere</a>

</div>

</div>

</div>

</div>

from demo:

<section class="bg-white">

<div class="container">

<div class="row">

<div class="col-12 text-center">

<h3 class="section-title">Contact Form</h3>

</div>

</div>

<div class="row">

<div class="col-10 col-sm-10 col-md-8 col-lg-6 ml-auto mr-auto">

<form>

<div class="form-group">

<label for="fname">Name:</label>

<input type="text" class="form-control form-control-lg" id="fname">

</div>

<div class="form-group">

<label for="email">Email address:</label>

<input type="text" class="form-control form-control-lg" id="email">

</div>

<div class="form-group">

<label for="message">Message:</label>

			  <textarea rows="5" class="form-control form-control-lg" id="message"></textarea>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</div>

</div>

</section>

<footer id="page-footer" class="bg-light">

<div class="container">

<span class="text-muted">Copyright Your Name</span>

</div>

</footer>

<script type="text/javascript" src="[https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js)" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script type="text/javascript" src="[https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js](https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js)" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body></html>
Undo not working
#2

Can I ask if all this code was created in Wappler directly, or if you converted an existing document into a Wappler one, or manually adjusted things?

The reason I ask is because my code looks quite different to yours.

You have [] surrounding all your href links for some unknown reason and then a duplicate of the same link in (), to be honest I do not know why. But this is what I would have expected, try pasting my code over yours and see if it works maybe.

Head Section

<!-- Bootstrap CSS -->

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- Custom CSS styles-->

<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Just before the closing body tag

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
#3

Paul-Thank you sooo much for responding so quickly!!

This code was created in Wappler directly but is edited slightly.

I don’t see what you mean about the brackets instead of parentheses…

With respect to the style panel, I deleted

<!-- Custom CSS styles-->

saved, closed Wappler, restarted, opened the file. The styles panel came back live , and attached the css again but the css box doesn’t show.

Also I rearranged the the head entries like this: ( I don’t see any )

<!doctype html>
<html><head>
  <title>The Tanner Cast &amp; Crew</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <link rel="stylesheet" type="text/css" href="ccstyle.css">

  <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

  <script type="text/javascript" src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js"></script>

  </head>
  <body is="dmx-app" id="tl">

maybe its the order in which I applied the js and the css?
I would really like to get the CSS designer box model back.

#4

Hi Howard, its a pleasure, so about the brackets, which now, your new pasted code does not have, so it is now correct, the first time you posted your code it looked like this.

That square bracket should not be there, I think your code was actually correct though, and i think because you posted to the forum from email, it added all these square brackets.

Wappler does add the head entries in the order it wants them, so generally I do not adjust where they are placed. it should have been placed like this if you left it as Wappler had placed them, and there may be some ordering issue you are having.

<meta charset="UTF-8">
<title>The Tanner Cast &amp; Crew</title>
<script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="ccstyle.css">
<script type="text/javascript" src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js"></script>

To be very honest, I have also had to fight a little sometimes to get my newly attached style sheet to actually start taking effect. I think this is because Wappler is previewing and parsing styles from either local or the live uploaded file etc. It causes a delay and I need to hit the refresh after save a couple times before it actually does what I want.

For your testing purposes I would attach your custom css file, then save your main file, select the css file that should be open, save that too. Make sure all are uploaded to your local or remote testing environment, and hit the refresh button in the design view, if it works great, if not, restart Wappler and see if it comes right.

By the way, mine works fine and I am on a mac, if that helps.

#5

The order of the includes doesn’t matter for the styles panel. Could you post a screenshot of the styles panel, does it show any styles or is the whole panel empty?

#6

On one page it’s completely empty. On two others its populated but no box model.

I’m running it on MAMP.
iMac 10.14.3
8g ram

#7

Hi Howard,

Could you restart Wappler with logging, reproduce the empty panel and include the log here as described in:

#8

This is probably a very very silly thing to even mention, but, it you have nothing selected at all in Design View, then the styles panel is completely blank, do you actually have an element selected in Design View?

#9

I think this is a very sensible thing to mention. I’m sure it would prevent some confusion if a message like this was displayed:

image

#10

screenshot_54
screenshot_54.jpg2176×2210 238 KB

I don’t have a submit error report option…yes I restarted with logging.

Checking LFTP installation and version…
LFTP | Version 4.8.4 | Copyright © 1996-2017 Alexander V. Lukyanov

LFTP is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with LFTP. If not, see http://www.gnu.org/licenses/.

Send bug reports and questions to the mailing list lftp@uniyar.ac.ru.

Libraries used: libiconv 1.11, OpenSSL 1.0.2p 14 Aug 2018, Readline 7.0, zlib 1.2.11
LFTP is correctly installed.

Checking NodeJS installation and version…
/bin/bash: node: command not found
NodeJS is missing!

Please download and install the latest from:


Make sure you restart Wappler after the installation.

Node is not installed. You might need it if you want to publish Mobile Apps!

Checking GIT installation and version…
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
GIT is missing!

Git is not installed. You might need it if you want to publish with Git!

Still no styles show up on this page… 12/23/19