CSS Class for Custom Fields

I would like to be able to adjust the appearance of the width of the textbox for some of my custom fields. I know I can change the Size, but that doesn't change the appearance.

In looking at the page source code, I saw that the class for the input box is empty. So I entered a name in the "CSS Class" field of the custom field data form, thinking that then I could try to adjust the textbox width using that class. The name isn't showing up in the input line or anywhere else that I can find.

Is there any way I can assign a custom class to the input tag?

Thanks!!
Debra

Hi

You can use a different css class to change the size. The extension use twitter bootstrap, so you can use the following css classes to control the size of the input :

input-mini
input-small
input-medium
input-large
input-xlarge
input-xxlarge

So in this case, try to edit custom field, enter one of the css class name above into Css class property of the custom field and It should solve the issue !

Tuan

OK. Should I put it in a particular css file? Wait, I found the classes in the bootstrap.css file. I'll try it over the weekend.

Thanks!!
Deb

Yes Deb. No need for put it into the css file, these are standard css classes in twitter bootstrap framework. Just try and you will see how it works (I believe it will solve the issue).

Tuan

I tried "input-mini" in the css class field for Age and it didn't work. I'll submit this on the ticket with the "NOT_AUTHORIZED" error message problem. We can "talk" about it there.

Update : It was a small bug in the custom fields library of Events Booking. I updated it and It works well now. Please go to your site to check ti and let us know the result !

Tuan

It works perfectly for the text boxes! Thank you!!


Any chance we can make it also work for the dropdown boxes? I've got a custom field that just has years - 4 numbers. The system is forcing the class to be input-large on this too. I tried one of the smaller input classes but no-go. This isn't a big deal, but it would be nice.

(Sorry it has take so long for me to respond on this - we had a couple emergencies)

Thanks, Deb

Guess I need to check the whole code of the custom field class again. Will get back to you with a working version for all custom fields on tomorrow !

Regards,

Tuan

You're the best!!
Thanks Tuan!

Hi Tuan,
I figured out another way around the problem for the dropdown box for the graduation date. I should have just used the same solution that I had for the dropdown boxes later in the form.

I used the #eb_gradDate css field, adding it to the style.css file with a different width (80px). It worked very nicely!

So, if you want to skip figuring out what's up with the bootstrap input-???? fields, it's fine with me.

Thanks so much for your help. We're live with the registration system and the client is happy!
Debra