MorganFR MorganFR - 3 months ago 22
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):

<head>

<!-- Application Metas Start -->
<title>TEST</title>
<!-- Application Metas End -->

<!-- UWA -->
<link rel="stylesheet" type="text/css" href="http://uwa.netvibes.com/lib/c/UWA/assets/css/standalone.css" />
<script type="text/javascript" src="http://uwa.netvibes.com/lib/c/UWA/js/UWA_Standalone_Alone.js"></script>

<!-- Application JS Start -->
<script type="text/javascript">
/* global widget */
( function () {
require({
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){
alert(err);
}
}
};

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

}); // -- End of require
}() ) ;
</script>
<!-- Application JS End -->
</head>
<body>
</body>
</html>

Answer

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;'
      }
}).inject(widget.body);

See https://uwa.netvibes.com/docs/Uwa/html/Input.UWA.Controls.Input.html

or possibly:

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

See https://uwa.netvibes.com/docs/Uwa/html/Element.html

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: {
                       'position':'absolute',
                       'left':'20px'
                    },
                    class: 'dark-grey uwa-button uwa-button-root uwa-input uwa-input-root active'
                    }).inject(widget.body);

Fiddle: https://jsfiddle.net/nmde8m75/

see docs for createElement: https://uwa.netvibes.com/docs/Uwa/html/Element.html

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

Comments