Skip to main content ↑ ↓
Topic: changing size of textarea in edit page (Read 2399 times) previous topic - next topic

changing size of textarea in edit page

I wou; like to have a larger size, wider and higher, of the text area in the edit page, changing with of the field or changing the col-md setting in the page does not do it.
as an example the view page displays wider and shows the whole text.

any suggestions?

Re: changing size of textarea in edit page

Reply #1 –
@franklin‍ the following should help, image below for reference.

Do this for Width
1. Click on Page Design.
2. Select the page you want to work on.
3. Click on the Main Page View's Column(Direct parent in the tree, like in the image below)
4. Select the ColumnWidthClass you want, note that col-md-12 is the max-width class which deals with the percentage of its containing <div></div>. col-md-12 means %100.

Do this for height
5. Click on App Custom CSS and add the following and click okay the preview.

If you are using the HTML editor in textarea use this 👇
Code: [Select]
.note-editing-area{ /* use this to target textarea that has UseHtmlEditor set to True */
     height: 200px;
 }

and this 👇 if you want to apply the height to the textarea with no HTML editor
Code: [Select]
 textarea#ctrl-name{/* use this to target textarea that has UseHtmlEditor set to False */
     height: 200px;
 }

Note: Replace the "ctrl-name" in the second code with "ctrl-{name of the field you are working on}" and replace  "200" with any number you want the height to be.


Re: changing size of textarea in edit page

Reply #2 –
@franklin‍ you can also switch FormLayoutType to Vertical in Edit Page Properties or Add Page Properties to put the label at the top of its input box, you can explore the other options available there to see which one is ok with you.

Re: changing size of textarea in edit page

Reply #3 –
You can use the NumRows property to increase the height of the Textarea.

Re: changing size of textarea in edit page

Reply #4 –
the num row does not seem to impact the height of the field

Re: changing size of textarea in edit page

Reply #5 –
max with in indeed limited to col-md-12.
the other adaptations in the App Custom CSS had no effects on the layout.
the fields I am trying to change have are MEDIUM TXT in mySQL

Re: changing size of textarea in edit page

Reply #6 –
I have got the html editor syntax working (my local installation did not show it but the production env. did)
the syntax
textarea#ctrl-Expectations{/* use this to target textarea that has UseHtmlEditor set to False */
     height: 200px;
 }
seem not to work, field name is Expectations

Re: changing size of textarea in edit page

Reply #7 –
Quote from: franklin –
I have got the html editor syntax working (my local installation did not show it but the production env. did)
the syntax
textarea#ctrl-Expectations{/* use this to target textarea that has UseHtmlEditor set to False */
    height: 200px;
 }
seem not to work, field name is Expectations
 @franklin‍ the "Expectations" should be a lower case "e" not uppercase "E". it should be exactly the same way the field name appears on the Add Page Fields or Edit Page Fields.

Re: changing size of textarea in edit page

Reply #8 –
tried that but did not make a difference the field name in mySQL is with capital E
so I tried it with another field
   " textarea#ctrl-description{/* use this to target textarea that has UseHtmlEditor set to False */
     height: 200px;"
no luck either
HTML works fine though

Re: changing size of textarea in edit page

Reply #10 –
working on it phprad just crashed waiting Interrupt problem

Re: changing size of textarea in edit page

Reply #11 –
don't know what happened but it works know, went to the add page, changed the num rows and it now displays the right height.
changed the num rows back to default value and it still displays the right height, so it works now