arranging form fields in community events form

[Neil Heird]

Hi. I am using community events and tinkered with the CSS to remove extraneous elements we don’t need, and that is fine. however, im having trouble isolating the SELECT fields in the form so that I can rearrange them. i would like to arrange 3 specific fields on a single line, and the fields are:

Event Start Hour, Minutes and Meridian.

Also, the ‘@’ that follows the event date fields is also tricky to move… any suggestions for this one too?

thanks!

URL: http://oxleyparent.com/portal/events/family/add

[Barry]

Hi Neil 🙂

Ordinarily the hour, minute and meridiem selector will indeed display on the same line as one another.

Perhaps your theme’s CSS/other customizations have gotten in the way of this? Unfortunately though I’m unable to view your submission form as it’s currently behind a login.

[Neil Heird]

Barry,

I just removed the login… sorry about that 🙂

[Barry]

Hi Neil,

No problem!

So I’m not too sure what you want to do with the @ symbol but you can get the start hour/minute/meridiem on one line with some custom CSS like this:

#top #tribe-event-datepickers .timeofdayoptions select {
    display: inline-block;
    width:   50px;
}

You might add this to a tribe-events/tribe-events.css file within your theme.

Does that help?

[Neil Heird]

actually, that’s perfect! just tweaked it a bit with some margin. i assume i can do the same for all other sections…

thanks again!

[Barry]

Yep, you should be able to follow the same pattern – glad it helped 🙂

[Author]

Posts