Hey Guys,
Went to test the new features in 8.1.0.4 . Created a new project and dragged a BS4textarea over. Can’t get it to size. I then dragged a BS3 textarea over and it was fine. Am I missing something?
Odd. I get this when I just drop a BS4 textarea on a new project/blank form:
Is the control in a container?
That is odd. Nope. It was the first control I dropped on the form.
For now, can you just set the dimensions in the properties window, i.e. height, width etc. (In %)
Okay, just tried that. put in some percentages and it would move around BUT as soon as I resized with my mouse, game over. Right back the the weird narrow block. I’ve uninstalled and reinstalled. Tried both Basic and Javascript projects and I get the same thing. Can you think of anything else?
BTW when I run it, it’s still a narrow box but it has the resize corner and I can drag it bigger.
So check this out: I made a new project and choose the first size (I think it’s iphone 320 something something) thinking maybe it has something to do with the form. Dragged over the textarea and I get this
In my first tests, I was using 800x1200 so it seems to be linked to form-window size.
I was just going to reply saying it had to be your project settings. Most likely device chosen (screen size).
BTW, the design height and width settings are very useful.
Chrome has interesting settings for simulating different device screen sizes too.
Weird. I don’t really see what size would matter. I took my project and changed the form size and as soon as I did it, the control shrunk back down again. I think this is a bug. I’m trying to do an 800x1200 form size.
I don’t build mobile apps so a large form size is important to me.
I do want to state again that BS3 textarea seems to be fine. A shame if I would have to use those instead.
Placing the textarea inside of a container is the way to go. If you’re only targeting one device, then go for absolute positioning (a property on containers and some controls). If you want to support many or all devices, you’ll want to look at responsive in the discussion board and in particular this post https://discuss.appstudio.dev/t/app-design-guide-trends-rules/1785/3.
I don’t worry about how items look in the ide. (in windows the controls are really screwed up in the IDE). And if you go responsive, you may find not using the grid approach may fit your needs better. Use inline-grid and/or flex where you want stuff to flow with screen size and add lots of container levels to get the effects you want. But you may not realize up front what that is.
And my last suggestion is to forget about what you think the screen should look like. What? Let the browser flow things and then adjust that flow to get the desired effect. I like the ability to slide the width of the view port on chrome and watch how the flow works as the size changes. (turning on the inspector makes sliding the viewport width easy). The IDE is not WYSIWYG.
I just thought I would give that a try - textarea in a container - no go. Same thing. Nope it doesn’t render correctly when output to the browser either. I don’t need responsive and I don’t support different devices. Locked sizes and windows.
Shame, I’ve been with this tool for years and never had fight a standard control like this. BS3 it is then.
You’re probably running into position styling:
https://blog.appstudio.dev/2016/11/appstudio-6-positioning-controls/
@GaryGorsline is right in saying the way to go is to allow the sizing of controls be defined by the screen size.
I just tried this. I started a new project: javascript. used 1200 x 800
Set the default form to position absolute.
Added a common controls container to the form. set it’s position to absolute.
Then resized and positioned the container on the form.
I then dropped a BS4 textarea on the form. I highlighted it in the project explorer and cut it out, then pasted it into the container. It should show up to the right indented under the container.
I was able to resize the textarea within the container. I added some text to the textarea. I ran it and it was not tall enough to show my text - same issue you had 
. Upon stretching the textarea I could see it nicely.
I changed the number of rows on the textarea to 10 and it worked very nicely. The rows is probably something that defaulted differently in BS3. It defaults to blank, which appears to be 0 rows 
I have a BS4 textarea with 10 rows. Today I noticed that this textarea is displayed with solely 1 row at runtime while it had been fine, showing the height of 10 rows when I had used this before, presumably with a previous version. Had a look at help preferences, Bootstrap 4 TextArea:
header An optional message at the bottom of the list of items. Design Time and Runtime.
height Best left as auto. Use the rows property to set the height. Design Time and Runtime.
I think header should be at the top. Property height is not provided / visible in current version of AppStudio. Either height is missing or the help text could be updated.
BackgroundColor, Color, rows do not work. I solely could get a decent height of the TextArea contents by adding (e.g.) style: txtBody_contents.style.height = “calc(50% - 20px)”;
following the suggestions in help text.