Adjust Text Area Size

Gabe Belknap September 17, 2020

Hi folks,

I continue to build a Confluence form using Confiforms, and I am now having issues adjusting the size of the Text Area box. I am trying to use width:1000px, but it is not working. 

I have tried a comment box, with the same result.

Does anyone know if you can force the width of a Text Area or Comment box?

Thanks

2 comments

Davin Studer
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 17, 2020

You may need to do it this way.

width: 1000px !important;

There are some other styles in the AUI framework that might be getting in the way. Specifically these ...

form.aui .aui-select2-container .select2-choices, form.aui .multi-select, form.aui .password, form.aui .select, form.aui .text, form.aui .textarea {
    border: 1px solid #c1c7d0;
    border-radius: 3.01px;
    box-sizing: border-box;
    font-size: inherit;
    margin: 0;
    max-width: 250px;
    vertical-align: baseline;
    width: 100%;
}

.large-field { max-width: 380px !important; min-width: 250px; width: 250px !important; }
Gabe Belknap September 17, 2020

Hey Davin,

Unfortunately, !important; did not may any difference.  Perhaps I am SOL?

Thanks

Alex Medved _ConfiForms_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 17, 2020

Hi

If you look at the CSS defined by Atlassian then you will see that there is also a 

max-width

attribute defined.

So, you need to set both (width and max-width), when you want to override the width of a field.

Alex

Srinath S July 25, 2021

Hi Alex,

I have a readonly field where that basically pre-loads data from another form's textarea field with more than 2-3 lines.

The problem I am facing is the texts are going beyond the visible area of the read only field hence I tried to use css to customize the field size so that the users dont need to scroll to read the words beyond the visible area, using below but the words are still not getting word wrapped and the users have to basically scroll:

height:150px; width:200px !important; max-width:200px !important; word-wrap: break-word !important

 

Please help me :(

Alex Medved _ConfiForms_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 25, 2021

Try setting min-width attribute as well. There is plenty of options that you can do with CSS - I suggest to have a look at CSS spec to see what is possible

Srinath S August 4, 2021

Hi Alex,

I am unable to make the read only field word wrap whatever I try :( Please let me know where/how I should find the css spec?

Alex Medved _ConfiForms_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
August 4, 2021

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events