Input boxes too small to see text

Hi Tuan
How can I change the size of the input boxes, please - see screenshot with person's details blanked out - the customer can't see the text they are adding.
The site will be 'live' on Friday so a bit urgent...!


Sue

This is a CSS issue that keeps popping up with some templates.
Please try applying the fix that I've posted here:
www.joomdonation.com/forum/events-bookin...kout-page.html#97818

If this CSS doesn't work, then I'll need to take a look at a live example (post a link if your site is live), or you'll need to have the Dev team fix it via a support ticket request.

@Tuan -- In addition to the sites your template developer has fixed, I think I've posted fixes to this issue at least 6 times for different users. Let's get your developer to fix it in the core release

Thanks James. Could you please help making a pull request with this css fix so that we can get it merged into core package? I trust your css skill

Tuan

I can't replicate the error; its others who have told me so I can't tell yet if the css has worked or not - feel free to look
steelcity2017.co.uk/booking/conference-booking
Is there a way to make the input box for the "Number of People" in the Group setting smaller , please? The large box makes people think they have to add names EVEN THOUGH it says "number of..."!

Thanks

Thanks for posting the link!

Yes -- the CSS you applied has fixed the issue. I use FireFox, which is prone to this CSS issue (as is Safari on the Mac and iOS platforms), and by toggling the "fix" off and on in the CSS inspector, I can see the problem appear and disappear on your site due to the applied CSS.

As for the "Number of Registrants" box, it looks like your template's CSS rules are overriding bootstrap's default behavior for all input elements and causing this "input-mini" input element to be pushed to 100% width instead of the 60px width that Bootstrap defines the "input-mini" class.


I also noticed that some of your text fields are appearing higher than others, this time caused by the Gantry 5 framework that your template uses, pushing the height to a min 28px instead of the default 20px.


LET'S FIX IT!!!!!!!!!!!!!!
Replace my previous block of CSS with the following:
Seeing as your template is causing the "input-mini" classed text boxes to expand to 100%, you might want to apply the CSS rule to your TEMPLATE's custom CSS (if your template provides an option for custom CSS). If you don't know where the option is, or if there isn't an option for it, then just include it in Event Booking's Custom CSS and your registration forms will at least look right

Tuan Pham Ngoc wrote: Thanks James. Could you please help making a pull request with this css fix so that we can get it merged into core package? I trust your css skill
Tuan

Creating a pull request via Git now.

Thank you, thank you, thank you!
You have answered all the questions I have, before I even asked them!
I've added the input mini to the custom.css - not sure if thats working though....I'll need to explore further.

BUT...THANK YOU!!!