- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi, Please see the images. nothing changes after I apply color or font styles to text. Likewise, button's color won't change after I select a different color style. Is this a bug or my computer is too slow or what? can someone help me please? Thanks
- Tags:
- HTML5
- Intel® XDK
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Looks like a bug. But it's easy to workaround, and a learning opportunity.
If you look at the "HTML Preview" tab you might see something like this:
<div class="navbar inner-element uib_w_1 tt hhh" data-uib="framework7/header" data-ver="0"> <div class="navbar-inner"> <div class="left"></div> <div class="center">Header</div> <div class="right"></div> </div> </div>
and if you look at the Less preview for that text style, you might see something like this
@media all { .hhh a { color:#2037d9 !important; } }
Now, in my example, I made a simple text style that only sets color and its name is "hhh"
So, you can pretty easily see that the selector in the LESS file is wrong. It is .hhh a
but it should be .hhh .center
So the solution is to click the EDIT LESS button from the LESS Preview pane and change the selector. Here is mine modified
@media all { .hhh .center { color:#2037d9 !important; } }
And after making and saving that change and switching back to App Designer, things are working. Of course, if I use that style again, it won't parse out the values correctly, and it'll clobber my changes when it updates. But that's easily avoidable.
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Looks like a bug. But it's easy to workaround, and a learning opportunity.
If you look at the "HTML Preview" tab you might see something like this:
<div class="navbar inner-element uib_w_1 tt hhh" data-uib="framework7/header" data-ver="0"> <div class="navbar-inner"> <div class="left"></div> <div class="center">Header</div> <div class="right"></div> </div> </div>
and if you look at the Less preview for that text style, you might see something like this
@media all { .hhh a { color:#2037d9 !important; } }
Now, in my example, I made a simple text style that only sets color and its name is "hhh"
So, you can pretty easily see that the selector in the LESS file is wrong. It is .hhh a
but it should be .hhh .center
So the solution is to click the EDIT LESS button from the LESS Preview pane and change the selector. Here is mine modified
@media all { .hhh .center { color:#2037d9 !important; } }
And after making and saving that change and switching back to App Designer, things are working. Of course, if I use that style again, it won't parse out the values correctly, and it'll clobber my changes when it updates. But that's easily avoidable.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
thanks Chris, I will try editing from LESS pane.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi Chris.
Thanks. that worked well.

- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page