Size of CKEditor field in a form

[mmc]

Hi,

I'm currently learning PW and have almost finalized my first site though I'm struggling with some issues. I have to say PW is an amazing piece of software. According to soma's example code, I've created a simple contact page that uses a ckeditor input field. The form works, but I have to change the size of the ckeditor field in order to align it with the other fields. 

Quote

...
$field = $modules->get("InputfieldCKEditor");
$field->label = "Nachricht";
$field->attr("id+name","nachricht");
$field->required = 1;
$form->append($field);
...

The InputFieldCKEditor class does not seam to have a size attribute. So how can I change the width and height of this field ?

Thanks a lot, Michael

[Robin S]

Hi @mmc, welcome to the forums.

It strikes me as unusual to use CKEditor in a contact form - I don't think I've ever seen a contact form that invites the visitor to submit their message using an RTE. A plain textarea is more typical. But anyway...

For width you can set the inputfield columnWidth property:

$field->columnWidth = 25; // sets width to 25%

Or you can just set the width of the element that contains CKEditor in your CSS.

For height, InputfieldCKEditor extends the InputfieldTextarea class so you can use the rows property:

$field->rows = 3;

 

[mmc]

Hi Robin,

thanks for taking care of this problem. I've changed my code and modifying the rows property works well. However setting the columnWidth property has no effect at all. The width seems to have a standard value that cannot be changed. I've also added a textarea field for comparison reasons but it shows exactly the same behavior.  Any ideas left ?

I'll try to solve this in the css.

[tpr]

It this project online to try? Perhaps it could be solved by CSS only.

[mmc]

Unfortunately not. It is presently accessible from our intranet only.

[BitPoet]

How about calling

$field->setAttribute("cols", 40);

? columnWidth only sizes the Inputfield's wrapper, not the actual HTML input element itself.

[Robin S]

8 hours ago, mmc said:

However setting the columnWidth property has no effect at all. The width seems to have a standard value that cannot be changed. I've also added a textarea field for comparison reasons but it shows exactly the same behavior.  Any ideas left ?

When you create forms using the core Inputfield modules then you are using the same methods as used for the PW admin interface. If you're seeing something different in the admin than in your frontend (e.g. width of textareas) then use your browser dev tools to check the CSS that is applied in the admin. There you'll see that textareas have a width: 100% rule, so that the final width of the element can be controlled by the <li> wrapper (which can have its width style set inline via columnWidth).

[mmc]

In the meantime I've solved this in the CSS. It's pretty easy and works perfectly. On the other hand I've learnd some alternatives here and that's always useful. Thanks.