Horizontal layout

Anonymous

#5138

Hi,

is it possible to have the form in a horizontal layout? If so, can you please support?

Thanks,
Matthias

Ross Moderator

#5245

Hey Matthias

I’m just working on some updates right now, I’ll come back on to this tomorrow – it should be pretty straight forward to make it horizontal as long as you are happy adding some CSS to your theme.

Thanks
Ross

Anonymous

#5305

Hi Ross,

sure, adding css code is no problem.
Looking forward to your reply.

Thanks,
Matthias

Anonymous

#5849

Hi Ross,

can you please describe, how I can put the form in a horizontal layout?

Thanks,
Matt

Ross Moderator

#5937

Hey Matt

I’m away atm moment – sorry I left this so long – its not so hard so I’ll be able to help quickly on my return 🙂

Thanks
Ross

Ross Moderator

#6143

Hey Matt

Ok, so to make it horizontal all you need to do is add the following css to your theme:

.searchandfilter > ul
{
	margin:0;
	padding:0;
}
.searchandfilter > ul > li
{
	display:inline-block;
	padding-right:10px;
}

This means everything display in a single row – like text would.

So you need to make sure that the container that Search & Filter is inside of is wide enough and then this should work 🙂

If you don’t see these rules working, then try adding important rules like this:

.searchandfilter > ul
{
	margin:0 !important;
	padding:0 !important;
}
.searchandfilter > ul > li
{
	display:inline-block !important;
	padding-right:10px !important;
}

Thanks

Anonymous

#9484

I have attempted both of these CSS codes individually with no luck in getting my check boxes displayed horizontally. I am by far no wiz with this, any ideas?

Anonymous

#9496

Figured it out with firebug, my ul was “.sf-field-tag” instead of “.searchandfilter” (copy of the changes below). I don’t actually understand why its different but it works.

.sf-field-tag > ul
{
margin:0 !important;
padding:0 !important;
}
.sf-field-tag > ul > li
{
display:inline-block !important;
padding-right:10px !important;
}

Ross Moderator

#9854

Glad you got it working Ashley 🙂

Anonymous

#24787

Hi Ross,
I need to know if there is any form to put a custom class for every search box, for example: I have a vertical form for my sidebar and an horizontal form for a top sidebar, they have different styles one is black and the other is white. Can you put de form id number in the form class to easily customize this search forms?

[Author]

Posts