Skip to main content
Nintex Community Menu Bar
Question

Styling textarea in Mobile

  • July 9, 2024
  • 4 replies
  • 145 views

Forum|alt.badge.img+7

A textarea (long text field) input in Skuid looks different in regular web-browsers and in iPad/mobile. In the regular box it is resizable but not in the mobile. This seems to be a JQM issue since the TextInput on their web (http://demos.jquerymobile.com/1.4.2/textinput/) behaves exactly the same. Is there a way to enable the resize in Skuid on mobile devices? Is there an easy way to change start settings like height etc on a global or per field basis (CSS resource and Field renderer i guess).

A feature request for Skuid would be to expose many more of the settings possible in moible composer, either as properties or by adding classes in a textbox for each field. I had a problem where the checkbox. In regular Skuid iit s language independent but in mobile Skuid it’s all of a sudden a flipswitch with On/Off.  This looks a bit strange on a localized Swedish page so after some poking around in the CSS i found this CSS to translate:


input[type=checkbox]:before {
   content: ‘NEJ’;
}
input[type=checkbox]:checked:before {
   content: ‘JA’;
}

Fairly simple but it does take quite some time to look around for settings like these. I realize there are gazillions of them but the more common ones would be very nice to have as properties. And maybe a good subject for a Guide on how to find and change these types of settings in SKUID.


This topic has been closed for replies.

4 replies

Forum|alt.badge.img+13

Hi Peter, this Mobile Boolean renderer was an experimental feature we recently introduced, in version 4.15 of Skuid it will be internationalized, so that you can go to Setup > Custom Labels, and find the “Boolean_On” and “Boolean_Off” Labels included with the Skuid app and provide Swedish translations of them to “NEJ” and “JA”. 


Forum|alt.badge.img+7

I like the boolean render but think it should be optional either box or flipswitch. Customising labels for international support is good but I think being able to change labels on a per field basis would be even better. YES/NO, ON/OFF, HOT/COLD and other combinations dependning on context.


Forum|alt.badge.img+7

I was wrong, the textArea on jQueryMobile does autosize but the Skuid textarea is fixed size and rather small. I change the textArea css to globally make it a bit bigger but it would be nice if it was possible to enable autosize and/or set size per each field.


Forum|alt.badge.img+7

This seems to work for rendering a specific textarea:

Inline CSS:

.bigTextArea {<br> height: 200px !important;<br>}<br><br>textArea {<br> height : inherit;<br>}

Custom field renderer

var field = arguments[0], value = arguments[1]<br> $ = skuid.$;<br> field.element.addClass("bigTextArea"); <br> skuid.ui.fieldRenderers.TEXTAREA[field.mode](field,value);

Is this the recommended way or is there a better solution?