Having previous experience in Ruby, Rails, and JavaScript, working with Angular was different but also eye-opening. It is a lot of fun creating the functionality of a client app with components, modules, and services.

One of my biggest challenges was styling a select dropdown to match our designs. Thankfully the team ( Dom Miller!) created a JCF module that can be easily imported into an Angular project.

The JavaScript Custom Forms library (JCF) is a really great tool to customize form elements with CSS.  Once it’s imported to the project, you can place the jcf attribute in the desired element. Adding the attribute will style the element with the default jcf styles.

<select id=“dropdown-example” jcf>
    <option>Pick me</option>
    <option>No, Pick me!</option>
</select>

It is possible to include options with the jcf attribute for the select element. I’d like my dropdown to only show three options at a time. That would look something like this:

<select id=“dropdown-example”         
        jcf='{"maxVisibleItems": 3}'>
    <option>I’m option 1</option>
    <option>I’m option 2</option>
</select>

Now that the default styles and other options are set, we can add in our own styles by selecting and overriding the appropriate jcf classes. To do this, I created a file like this one within my assets folder:

project-name/src/assets/scss/base/_jcf_overrides.scss

.jcf-scrollbar-vertical {
 display: none;
}

.jcf-scrollbar-horizontal {
 display: none;
}

.jcf-list .jcf-option {
 font-size: 18px;
 font-weight: bold;
 background-color: $white;
 padding: 11px 20px;
 margin: 0px;
 text-align: left;
 border-top: 1px solid #ccc;
 cursor: pointer;
}

You can view the different jcf classes by opening your chrome dev tools on the page where the element is located, and looking near the bottom of the html. You’ll see the jcf classes created by the module.

There you have it! You now have a customized form element.

The post Styling Select Elements with JCF appeared first on Trim Agency.