3

So I can create custom CSS styles for various widgets (Sample: Dropdowns) 

*.app-Dropdown--RobotoBolded {
  font-family:'Roboto Condensed';
  font-weight: 600;
  font-size: 15px;
  text-align: right;
  align-items: center
}*

No problems calling out specific widgets either: 

*.app-TestPage-Field6 {
  font-weight:bold;
}*

However this does not seem to work with TextBoxes that are displaying data (like in a table).

Example: 

*.app-TestPage-Field7 {
  font-weight:bold;
}*

Doesn't work. 

*.app-TextBox {
  font-weight:bold;
}*

Doesn't work. 

.app-TextBox-Input {
  font-weight:bold;
}

Works. But then it applies to ALL text boxes, not just the specific one(s) I would like.

Is this a bug? Or am I just not understanding something.

Any help would be appreciated. Thanks!

Adam Bergeron
  • 535
  • 3
  • 11

2 Answers2

3

What I would do is add a class bold to the style of the text boxes you want to be bold

property editor

Then define this style:

.app-TextBox.bold .app-TextBox-Input{
  font-weight: bold
}

Now any text box having this style will be bold.

Tony BenBrahim
  • 7,040
  • 2
  • 36
  • 49
2
.app-TestPage-Field7-Input {
  font-weight:bold;
}

Should work if you want to call out a particular widget, this is pretty poorly documented right now. You can add only of the general widget styles documented under styles here to a specific widget as well as to all widgets.

BTW, "*" is generally not necessary, unless you're trying to add specificity.

Devin Taylor
  • 825
  • 5
  • 11
  • Yea, I figured calling out the specific widget should work, but for some reason it doesn't. The same code works just fine for everything EXCEPT TextBoxes. (And sorry, the "*" were from me trying to italicize the code) – Adam Bergeron Jan 24 '17 at 22:08
  • As a good practice, you generally want to avoid styling specific widgets. For one, it is a lot to manage on your stylesheet if you have to do a lot them. Furthermore, if you later rename the widget, you would also have to update the styles. You generally want to use style classes to style widgets (or HTML elements on a web page more generally) – Tony BenBrahim Jan 24 '17 at 22:16
  • Using styles sounds like a good solution, until you begin refactoring :) At first, it is way easier to edit text then revisit dozens and hundreds boxes and make even more clicks. Secondly, you can easily analyze app styling if you are taking over some existing project. Btw, App Maker will rename css rules for you, once you change widget name. – Pavel Shkleinik Jan 24 '17 at 22:24
  • I guess it is in the eye of the beholder. Looking at hundreds of style declarations in that little narrow style panel on the right is not my idea of better, the less I can have in there, the better it is for me. – Tony BenBrahim Jan 24 '17 at 22:30
  • To clarify, the main reason styling the specific widget didn't work is you were missing the "Input". It's weird to me that font-weight doesn't inherited by the inner input, looking into things it looks like that's because App Maker adds "font-weight:400" to -Input, so that's overriding the one you set on .app-TextBox. I wonder if we shouldn't move those styles up to app-TextBox, the only "problem" with that is it would mean your label would become bold as well since .app-TextBox styles the entire widget, but I think that makes sense. (It's better than what happens now, which is nothing.) – Devin Taylor Jan 25 '17 at 02:14