Styling textarea in Mobile

  • 1
  • Question
  • Updated 5 years ago
  • Answered
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.


Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb

Posted 5 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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". 
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
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.
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
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.
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
This seems to work for rendering a specific textarea:

Inline CSS:

.bigTextArea {
height: 200px !important;
}

textArea {
height : inherit;
}
Custom field renderer

var field = arguments[0], value = arguments[1]
$ = skuid.$;
field.element.addClass("bigTextArea");
skuid.ui.fieldRenderers.TEXTAREA[field.mode](field,value);
Is this the recommended way or is there a better solution?