Create Custom Input Field for ip address / mask about pfsense HOT 11 CLOSED

Found what we want.

http://getbootstrap.com/components/#input-groups-buttons-dropdowns

from pfsense.

Looks good, but it has two downsides;

• the 'select' prevents the keyboard from being used
• it won't display the selected value

from pfsense.

What do you mean prevents keyboard from being used? Right now that dropdown is not a form but an action. So that would need to be ripped out. I was thinking something like this:

http://codepen.io/anon/pen/EadvjB

This is also a good example of where adding raw HTML to a Form_Group would be beneficial. as the span would need to be between the two. #27

from pfsense.

Ah, I thought you meant to leave it static html but the codepen looks good and prevents both issues.

As for raw HTML, I'd rather introduce a stricter wrapper for Input+Dropdown so the html can be reused instead of copy/pasted :)

from pfsense.

Sounds good. The one thing that I don't like about the codepen is the '/' separator. It seems a bit small and doesn't need to be on a blue background. I'll play around and throw some different css on it.

from pfsense.

Take a look at it now. Added some CSS to make it look a little better and more unified.

http://codepen.io/anon/pen/EadvjB

from pfsense.

LGTM, any comments from @SanderVanLeeuwen ?

from pfsense.

I'm assuming that we would implement this in PHP as a subclass. But of what? Group? Input?

My vote is for group as it is a group itself. But on the other hand it's treated like an input every other way.

On second thought Input would be the right choice.

from pfsense.

I would like to propose a slightly different approach @ http://codepen.io/anon/pen/VYgEdP .

This example uses the default input structure we use, and the existing bootstrap .input-group-addon (which is only applied when the input is actually in a group). I've added an .input-group-inbetween to remove the double border.

Unfortunately, it's not possible (or at least not cross-browser and platform) to remove the rounded border on the select, so it looks like this on my mac:

from pfsense.

I have added the relevant class+css; please comment. The setup allows for other functionality such as Form_IpAddress::setFamily(6) and Form_IpAddress::forceRange(127.0.0.1/24)

from pfsense.

No comment. Looks good :)

from pfsense.