When using the built in checkbox widgets, you are given 2 very limited layout choices. Horizontal, Vertical.
I have a checkbox group with 12 options, and I’d like them to be placed in a grid. NOT all in one line.
Is there a straightforward way to do that?
Moving this post to the General Discussions
Just an FYI, the problem I was really trying to solve was how to have a checkbox group not take up a ton of space. First I thought of making a grid, but after posting this and getting no answers for a week, I figured there was actually no straightforward way to do this.
Since the problem was screen real estate, and not specifically wanting a grid, I solved this by creating a custom dropdown with the checkbox group inside. I saw some other examples using repeaters. I didn’t use one. I just put a checkbox group inside a container box, and called expand/collapse on mouseIn/mouseOut of the surrounding container box. If anyone is interested in the code, let me know.
How does it look like, your SOLUTION ?
Perhaps an EXAMPLE ?
Getting back to this…My solution is only okay. I ended up abandoning it because…edge cases.
It looks terrible on mobile, especially if you have more than one expandable/show/hide menu
Getting it to OVERLAY an item instead of PUSHING IT DOWN is a pain in the butt, and utterly unpredictable.
Getting the mouseIn/mouseOut/onClick to correctly expand or show the menu is tricky. I want to mouse over something to expand the menu, but then only collapse the menu when you mouse out of the menu. If the mouseOver target is not inside the same container as the menu, you don’t always get the right behavior. If the mouseOver target is inside the same container as the menu, getting it to overlay instead of pushing down is a nightmare of hacks, which look questionable on desktop and outright shitty on mobile. Mobile is a bit more straightforward because you have to use click events instead of mouseIn/out events. However, the LAYOUT on mobile for any of this is crappy and hard to control.
The original problem that I was trying to solve was creating a single container/panel with a bunch of inputs for search filters. I need that box to be small enough not to push the search results below the fold. The problem was that I have some filters that require multi select checkboxes, and they have up to 12 options. Wix gives you almost no control over how to lay out checkboxes. You either get horizontal or vertical. I wanted a multiselect dropdown, which doesn’t exist in Wix, or as a compromise, a grid, which also doesn’t exist on Wix.
I ended up solving MOST of what I needed by using a lightbox instead. I used the side lightbox (simulates a drawer). I put all of the search filter inputs inside a lightbox and then sent the selections back to the page. The page applies the selections to the filter.
Problems with this:
I REALLY wanted to be able to filter as you type. Lightboxes cannot communicate with the page underneath them while they’re open, so this is impossible. You have to close the lightbox in order to pass data back and forth between the page and the lightbox.
Because the lightbox is in a separate context, there’s no state preserved between open/close events. It’s not a page element that is expanded/collapsed/shown/hidden. It’s a separate “page” with its own context and lifecycle. When you open the lightbox, you have to send in all the state (the current selections) from the page and redraw the filters with the correct items checked/input/etc. Doable, but it’s an extra hoop that you have to jump through if you don’t have the ability to do an overlay within the page context.
I want to be able to mouseover a button that expands the lightbox. Of course, this doesn’t fly on mobile. So you need two sets of open/close logic, one for mobile and one for desktop and you need to check the formFactor to apply the right logic (This isn’t a shortcoming of Wix. And its also true of the homemade menus too…it’s true of everything, I guess. If you use mouseIn/mouseOut events for anything, you have to accommodate mobile separately)
It would be nice if I had more control over the position of my lightbox
I want to be able to make separate VISUAL contexts(*) within a single page that don’t affect each other’s positioning, BUT are within the same page, so you can communicate between the elements.
Lightboxes are more limited only because of the inability to send and receive messages/events on the client side. wix-realtime is a client/server pub sub feature…I didn’t look into it to see if it’s even possible, since I don’t know if the underlying page even has an active context to receive the pubsub while the drawer is open. Even if it is possible, I think this is a terribly hacky way to do this. Send a message from the overlay to the backend, then have the backend broadcast a message back to the client, and have the page subscribe…uh…
Since the built in lightboxes are already tested/functional on mobile and desktop, and just “do the right thing”, I decided to just compromise on the whole idea of filter as you type.
(*) Something like a stacking context, but less of a friggin’ nightmare than stacking contexts.
@russian-dima Below, I posted what I thought was a solution. But it won’t work either. After coding it all, I tested it out, and it takes a lightbox SEVERAL SECONDS just to open. I thought maybe I was causing the problem by passing in large objects, so I literally removed all passed objects, all code, and nearly all DOM elements and it made no difference. I looked around on Wix forums and found dozens of complaints about lightboxes being unusably slow to open, so it’s not anything I’m doing. I can’t wait 2-4 seconds every time a user wants to change a search filter, so I’m back to the drawing board. The biggest problem I’m having is getting the menu to 1. overlay what’s below it instead of pushing it down the page, and 2. look decent on mobile. I’ve not had success with either of those.
hi where can you control the vertical and horizontal option, I don’t see it.
Added a reply in your topic here:
This topic is an older one, so I’ll close it out for now 