Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,364,440
Community Members
 
Community Events
168
Community Groups

Adjust Text Area Size

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

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; }

Hey Davin,

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

Thanks

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

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 :(

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

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?

Comment

Log in or Sign up to comment
TAGS

Atlassian Community Events