MorganFR MorganFR - 1 year ago 146
CSS Question

Javascript UWA button style

I would like put a button on the left using css style and a UWA button.
This would be the code:

var btn = new UWA.Controls.Input.Button({value: 'Add new',style: {'position:absolute;right:20px;'}}).inject(widget.body);

I am not sure how to write the styles to take them into account.
I have tried:

style: {'position:absolute;right:20px;'} -> syntax error '}'
style:'position:absolute;right:20px;' -> nothing happens, doesn't appear in styles in console
style: {'position':'absolute';'right':'20px;'} -> nothing happens

Proposed syntaxes from answers that didn't work:

style: {'position': 'absolute', 'right': '20px'}

Here is the full code snippet (couldn't make a fiddle work with the references):


<!-- Application Metas Start -->
<!-- Application Metas End -->

<!-- UWA -->
<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript" src=""></script>

<!-- Application JS Start -->
<script type="text/javascript">
/* global widget */
( function () {
baseUrl: '../'
}, ['UWA/Core', 'UWA/Element', 'UWA/Class', 'UWA/Controls/Input'], function(Core, Element, Class, Button) {
'use strict';

UWA.debug = true;

var myWidget = {
onLoad: function() {

try {
var btn = new UWA.Controls.Input.Button({value: 'Add new',styles: {position:'absolute',right:'20px'}}).inject(widget.body);
//btn.setAttributes({color: 'red'});
catch (err){

if (widget.launched)
widget.onLoad = myWidget.onLoad;

}); // -- End of require
}() ) ;
<!-- Application JS End -->

Answer Source

It's probably in the docs. From my cursory glance at it, it looks you should set it through the attributes since style is an attribute:

var btn = new UWA.Controls.Input.Button({
      value: 'Add new',
      attributes: {
           style: 'position:absolute;right:20px;'


or possibly:

var btn = new UWA.Controls.Input.Button({
      value: 'Add new',
      styles: {


EDIT - Since the above doesn't seem to work, perhaps creating your own Element instead of using the built in Button. In this example, I just reused the classes from the Button so they look the same:

 var btn = new UWA.createElement('button', {
                    text: 'Add new', 
                    styles: {
                    class: 'dark-grey uwa-button uwa-button-root uwa-input uwa-input-root active'


see docs for createElement:

NOTE: That once you make this button absolute positioned, you will need to make sure that the surrounding panel has a height.