Making arrow blocks in CSS is pretty easy. You can manipulate the borders of elements, create outlines with overlapping arrows, and other neat things.
One place where I’ve used this is for letting a user visually step through the process of a guided wizard.
Creating, for example, an arrow pointing to the left, we could use a DIV element like so:
In most of the UI’s I work on lately, it’s necessary to provide start and end date selection. The typical use case is for setting date ranges for searching and storage of effective dates.
Being that these are typically Angular applications, tying into Angular’s form validation makes a lot of sense.
Mutliselect drop-downs are somewhat of a pain. It’s always nice when things are simple and discrete. But, the world is not simple and discrete. Life isn’t simple and discrete.
I find myself many times in need of a good, general purpose multiselect dropdown with checkboxes. There are many options for multiselect, like select2, but for some reason having discrete checkboxes is generally overlooked. This is where rolling my own came into play.
EDIT: Be sure to check out the updated info. for this directive. https://long2know.com/2016/05/angular-multiselect-dropdown-updated/
For any blog discussions, questions, or comments, I’ve started a Slack channel. Feel free to pop in and start up a conversation.
Earlier today, I helped a colleague on a small issue. That issue was giving focus to an element in a modal once the modal is loaded.
This seems trivial, but it’s actually not entirely straight-forward due to Angular’s digest cycle.
As usual, I wanted to wrap this into a reusable directive.
In many of my latest applications, it’s necessary to have data drive what a form-element actually lets the user enter. For example, I may have a drop-down to select a property, and then, based on that property, a common text-box is used for its entry.
Sometimes its nice to have the data-type of the property drive a user-friendly experience.
Over the weekend, I attended Codestock. One of the sessions that I attended dealt with a subject I had wrestled with myself: eliminating string literals.
While the session focused on HtmlHelper extensions for MVC, I have used the same techniques for building general LINQ expressions, queries, and other useful aspects.
Earlier today, I was messing with displaying forms within a dialog.
The basic view was split into a 2-column layout with some information on the left and then the actual form elements on the right. My form happens to have a textarea in it. Additionally, the left-hand column can expand to some predefined max-height with a scroll-bar applied. This works well, but it creates a visual problem in that the left-hand column can be taller than the right-hand column and its form elements.