[Resolved] defining sizes in rows and cols for textareas

[Author]

Posts

[fabriceS]

Hi !

I don't find how to specify a number of rows and cols for the texture in a form. I'm not using : output="bootstrap".
I designed my form with flex, but in this case it is specified somewhere rows="5" cols="1" and I need to overwrite that...

[Nigel]

Can you not just set the dimensions of the textarea with CSS? This will override the rows and cols settings of the textarea.

So if you have

<textarea rows="5" cols="20" class="area">

...

.area {
  width: 400px;
  height: 600px;
}

then the size of the textarea will be determined by the CSS, not by the rows and cols attributes.

[fabriceS]

Hi Nigel,

The problem with the definition in pixels is that then it's fixed.
With the cols and rows within a flexbox, when you resize the window it's adaptive with the width...
That's why I'm trying to define it like this...

[Waqar]

Hi,

Thanks for writing back.

To overwrite the default "rows" and "cols" attributes for a textarea type field, you can use a custom script, for example:

jQuery(document).ready(function() {

	// set rows value for the textarea field "description"
	jQuery('textarea[name="wpcf-description"]').attr('rows', 10);
	// set cols value for the textarea field "description"
	jQuery('textarea[name="wpcf-description"]').attr('cols', 20);

});

Note: The above code can be included in the form's JS editor and you can extend it to target other textarea fields too.

regards,
Waqar

[fabriceS]

Hi Waqar,

Unfortunately it does not overwrite it...

[fabriceS]

I don't know if it's related, but I have a few other issues with this form.

Here is the idea:

I make a research for a property. if the user don't find any with his criteria's a form is displayed to send a feedback to the real estate agency in order to find the kind of a property the client is looking for.

If you type "7" in "nombre de chambres" search item, the result will be "nothing found" and so display the form.

1st issue: I can't size the "message" box in order to have the max width of the form "box". (this is surely the lack of knowledge I have in programming...)

2nd issue: the Recaptcha box is not displaying next to the "envoyer" button.
When you send your form the recaptcha is then displayed and also a error message telling you have to check Recaptcha checkbox.

3rd issue : if you don't fill a mandatory field, it display an error message (which is ok), but when you reinitialise the search and make again a selection where a "nothing found" is returned, it's displaying again the form (good 'til there) but also the error message for the missing email even if you didn't fill anything yet. The Recaptcha is now displaying....

Is there something I'm doing wrong ? Can you help me (again 😊) ?

To reassure you, once it's done, my website is finished 😉.

Do you still have the credentials ?

[Waqar]

I've admin access to your website, thank you.

But can you please share the link to the specific page(s), where each of these issues can be seen?

[fabriceS]

Good morning Waqar !
Sure ! here it is 😊

hidden link

Thank you so much for your help !

[fabriceS]

Can you also tell me how to avoid being in the middle of African waters when results are "none" ?
Is it possible to specify a center map by default in a block view ?

[Waqar]

Thank you for the link.

> 1st issue: I can't size the "message" box in order to have the max-width of the form "box". (this is surely the lack of knowledge I have in programming...)

- To make the message box fill the full available width, you don't need the custom script to change the text area's rows and cols values.

You can simply include some inline CSS code to set 100% width to its container "div", for example:

<div class="noresult-form-item" style="max-width: 100%; width: 100%;"> [cred_field field='ir-message' force_type='field'] </div>

> 2nd issue: the Recaptcha box is not displaying next to the "envoyer" button.
When you send your form the recaptcha is then displayed and also a error message telling you have to check Recaptcha checkbox.

- I see that the Recaptcha box is showing inline with the "envoyer" button.
( screenshot: hidden link )

The space between them is due to the styles added to the parent div with the class "noresult-form-subblock".
( screenshot: hidden link )

If you'd like the Recaptcha box to be right next to the "envoyer" button, you can remove the class "noresult-form-subblock" from the parent div and then adjust the padding, margin and float CSS properties, as needed.

Note: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

> 3rd issue : if you don't fill a mandatory field, it display an error message (which is ok), but when you reinitialise the search and make again a selection where a "nothing found" is returned, it's displaying again the form (good 'til there) but also the error message for the missing email even if you didn't fill anything yet. The Recaptcha is now displaying....

- That is happening because the view is set to update the results (when the search or pagination is processed) using AJAX and without reloading the page. As a result, the form doesn't get a chance to reset itself and the same instance of the form keeps showing.

To avoid this, you'll have to change the AJAX options in the view's "Pagination and Sliders Settings" and "Custom Search Settings" sections.

> Can you also tell me how to avoid being in the middle of African waters when results are "none" ?
Is it possible to specify a center map by default in a block view ?

- When no results are found, the map has no map marker information from the source view.

You can change that by adding a map marker inside the view's "wpv-no-items-found" tag, similar to how you're showing the form.

Step 1:
hidden link

Step 2:
hidden link

Step 3:
hidden link

[fabriceS]

Hi Waqar,

Thank you so much for your so great help ! It's time for me to finish 😉
Last question about the map and the no items marker. Can I specify a zoom value also for that marker only in order to have a large view in case of no-result ?

[fabriceS]

My issue is resolved now. Thank you!