Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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
Community showcase
Published in Confluence

Welcome to the Confluence Holiday Workshop 🎁

Welcome to Confluence’s Holiday Workshop, where knowledge and collaboration collide! This year come celebrate the holidays with brand-new Confluence features to kickoff your new year, best practice...

361 views 11 28
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you