Anonymous 0

I'm actually not a web designer (programmer, instead), so I'm sorry if this question is a bit rudimentary.

I needed to put a very simple form in order, so I found some nice simple code here: CSS Drive Tableless Forms

This worked for my basic needs, no problem. But now I want to customize it a bit:

I have two dropdown boxes with two accompanying buttons to let you transfer items from one to the other. With the above CSS in play, it looks like this. What I want it to look like is this. This is something that is extremely easy to do in desktop applications...but is sure throwing me a loop to do it with CSS. I know I'm not supposed to use tables, though. Our designer would probably be mad at me if I did that again.

EDIT: I was able to obtain most of what I wanted by adding 'float: left' to each select element as well as the two buttons. Don't have them quite centered, but it's close enough for now. Link here. If someone knows how to vertically center the buttons, that would be fantastic information (the select boxes change in size, so I don't have a specific height to work with).

1 answer

da 40

First, let me applaud your diligence in trying to avoid necessary tables. Indeed, your web designer will thank you.

To answer your question, though, we'd need to see the HTML/CSS.

I'd also consider not using this particular design pattern. It's traditional in windows desktop applications, but you might want to explore a more web-centric solution.

This particular method is click-heavy. Scroll the left list. Click an item. Click the button. Go back to the list. Scroll it. Click it. Click the button. Repeat.

Ultimately, it's emulating a checkbox list and I'd suggest looking at using a more literal visual. With a bit of javascript and CSS you could easily turn this into a one-click operation (whereby clicking an item in the left [which I'd make into a literal checkbox list] could populate a list/log of selected items on the right). That would simplify the interaction, IMHO.

Answered about 7 years ago by da