Hello,

I would like to change the width of a textbox for a mobile? The width is correct on a desktop or on a tablet but it is too long for a mobile.

I also would like to know how to reduce the space between two textbox fields for a mobile phone?

I can send a screenshot of the screen I have right now. I did not find the way to attach one.

Sincerely
Amar Guillen

A liitle up,

i need the answer to continue.
Thanks for your help.

Amar Guillen

Custom CSS media queries, like this
www.w3schools.com/css/css_rwd_mediaqueries.asp

Hello,

I am still trying to set the width for a textbox field in case using a screen less than 480pixels.

Whatever I do, it is not working even using the query instruction.

I wrote in the Form Properties > CSS:

<style type="text/css">

@media (max-width: 480px) {
.formResponsive input, .formResponsive textarea, .formResponsive textbox {
width: 50px;
}
}
</style>

Please would you help to solve my problem?

Thanks
Amar Guillen

Hello,

Is there someone for the support.
I have been waiting for weeks to solve my problem.

Can I get a refund because so far the product does not reach my expectations?

Thanks
Amar Guillen

Do you have a link to the site where you need this I'm happy to take a look for you?

Hi,

right we are working on a test website. You can check the following page:
https://dev.isabelleguillen.com/landingpage03.html

There is a form

- RS form works well on desktop, laptop and screen larger than 600px.
- if the screen size is less than 600 pixels, the size of the textbox type fields exceeds the screen. This is not nice at all.

If you need more information, I will give them.

Sincerely
Amar Guillen

Looks like the rule in the responsive CSS has a setting of 100%!important which overrules everything and has that toooverule an earlier rule with 10%imprtant.
Try putting this in your RSform custom CSS. Don't forget to clear the Joomla cache and also browser cache


.formResponsive .formRow [class*="formSpan"]
{
width: 92%;
}

Thank you very much for your reply.

It does not work. Maybe I do something wrong.
This is what I did:

- open my RSform module.
- click on Edit Form.
- click on Form Properties.
- click on CSS and Javascript.
- Save.
- clear Joomla cache.
- clear my browser cache.

Is it ok for you.
I can give you access to the backend if you give a private email.

Thanks for all
Amar Guillen

Set up a temporary superuser and mail me the login to This e-mail address is being protected from spambots. You need JavaScript enabled to view it I'll see what I can do.

Thought I had it there for a minute but not quite......there's an !important rule in rsform responsive that's causing the problem

Tried lots of variations on a theme but ultimately failed.
The problem lies in this file
dev.isabelleguillen.com/media/com_rsform...nsive/responsive.css
there is a setting on line 765 'width:100%!important and I can't find anywhere (that works) with a higher specificity to place an amended rule.
I would try an overide as suggested here but substituting the reponsive.css file for the front.css in the instructions

www.rsjoomla.com/support/documentation/r...le-in-rsformpro.html

set line 765 to 'width:90%!important;'

I also tried using an alternative layout like bootstrap 3 rather than responsive in the rsform layout setting but that gives some weird results with the required icon disappearing for no reason.

I had a bit of a think and I believe it works now, just needed to find the right selector in the right place. Works on my android anyway. You'll see a bit of CSS in the Rsform that does it, set at 90% but ok up to 93% above that it disappears outside its container.

Thank you very much for your help.

It works well now.
Without you we would have been unable to solve our problem.
I do not understand why other people who purchase the extension did not have the problem.

Anyway, thanks for all.
Sincerely
Amar Guillen

You're welcome

Hi,

I am facing the exact same issue. Comment field is getting too wide on mobile when you enter text.
I checked the front.css but there is no line 765.

So, how to fix that under current/newest version?

Thanks for help.

Regards,
Oliver

There's no guarantee that it will be line 765, depends on the individual site. try your browser's inspector to locate the relevant CSS

Thanks for your reply. Unfortunately I am not such an advanced user. I know where to start developer tools in Chrome and I am able to copy CSS classes etc.
In my case I have implemented the form as an AddOn Joomla module with SP Pagebuilder.
I am a little surprised that this is not working by default...

Regards,
Oliver

do you have a link to the site? Happy to take a quick look.

I am working on it on a subdomain: bf.hieryoga.ch/kontakt

I took the site online for now so you can have a look.

Thanks a lot

Regards,
Oliver

The rule that you are looking for is in the responsive.css but it's line 602.
Try putting this in the css/javascript section of your form

Hi, thanks for your reply.

I copied it into the from CSS like this:

<style>
#Nachricht{
width:90% ;
}
#Senden{
width:120px ;
}
#Nachricht{
height:200px ;
}
@media only screen and (max-width: 650px){

.formResponsive input[type="text"], .formResponsive input[type="password"], .formResponsive textarea, .formResponsive select, .formResponsive input[type="email"], .formResponsive input[type="tel"] {
width: 95% !important;
}

}
</style>

I cleared cache (both). It doesnt change anything. The comment field looks ok but when I click at it (on mobile) it zooms up and is then too big.
Anything else I can try or change?

Thanks,
Oliver

Works for me on several different browsers and an android phone. Don't forget to clear browser caches as well as Joomla caches.
By 'comment' field you do mean the 'Nachricht' (message) field?

responsive on firefox

As long as you dont type something into the form it appears good. It was like that before already.
But as soon as you type into a field (no matter which) it zooms up and then there is the issue.

[url=https://1drv.ms/u/s!AnH_unUAIKLINKglhOBCQKF4PX2b3Ohhpw?e=3KJYGh][/url]

I can't replicate that, everything works for me as I would expect. You could try changing the 'width' to' max-width'
I suspect there must be something else going but I'm at a loss as to to what it might be.

I changed now the form CSS to:

<style>
#Nachricht{
width:90% ;
}
#Senden{
width:120px ;
}
#Nachricht{
height:200px ;
}
@media only screen and (max-width: 650px){

.formResponsive input[type="text"], .formResponsive input[type="password"], .formResponsive textarea, .formResponsive select, .formResponsive input[type="email"], .formResponsive input[type="tel"] {
max-width: 95% !important;
}

}
</style>

Same same.

I asked somebody else with Iphone to check it - same issue. As soon as you type to a filed it zooms up and is to big for the screen.....

I honestly struggle with that since this should be a basic function for a addOn I mean the half world runs Iphone...
What to do?

Regards,
Oliver

I played arround with the 95% and this impacts just the form itself but not when you type to a field.
No impact at all - it always zooms up and whole form is then to big.

Beyond me then, it feels like the css is having a transform applied onEntry by some javascript but I could be way off with that. Sorry I couldn't find a solution