Software Archive
Read-only legacy content
17061 Discussions

styles and properties of button and text won't change or update

Sey_T_
Beginner
787 Views

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

 

 

 

0 Kudos
1 Solution
Chris_P_Intel
Employee
787 Views

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.

 

 

View solution in original post

0 Kudos
3 Replies
Chris_P_Intel
Employee
788 Views

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.

 

 

0 Kudos
Sey_T_
Beginner
787 Views

thanks Chris, I will try editing from LESS pane.

0 Kudos
Sey_T_
Beginner
787 Views

 Hi Chris.

Thanks. that worked well.

0 Kudos
Reply