Welcome to the second part of our ‘Clickable Scale’ walk-through. In this section, we’ll be working with the data bars to create a coloured scale using CSS.
In our last SharePoint walk-through Horizontal Radio Buttons in SharePoint (Part One), we used JQuery to align the radio buttons horizontally.
The finished project will look something like this:
Creating The Bars
Now that the buttons are displayed horizontally, we can use CSS to turn them into scale bars. As mentioned in Part One, it’s good practise to have your CSS in an external file but, again, for this walk-through we’re adding everything to the main body. Continuing from Part One, directly under the </script> tag for the end of your JavaScript, open a <style> tag. SharePoint automatically adds a closing tag; create your CSS between them.
The first thing we need to do is ‘hide’ the original radio buttons – except we want to be able to click them, so they can’t actually be hidden. For this, we use margins* and opacity.
* In Part One, the mention of not including cross-browser issues relates directly to margins; style the browser you use, and you can always tweak for other browsers later if necessary. I am styling for Firefox in this walk-through, so any margins used will be higher than those necessary for IE, for example.
Tip: Using the :not(old) negation pseudo-selector ensures that any browsers not up to date with current CSS3 standards will still display the original radio buttons by ‘hiding’ these style rules from older browsers. We use this because we are also using the pseudo-class :checked later in the walk-through, and so without the :not(), browsers that don’t support CSS3 pseudo-selectors would display the first set of rules (hiding the original radio buttons) but would not display the :checked styles, meaning the form would give no indication to the user of which option was chosen. Adding the negation (but not targeting it to any actual code we’re using) ensures that browsers which won’t support :checked – and therefore also will also not support :not() – will ignore the styling on the radio buttons. The parentheses can contain anything that is not used in your HTML – for example, it could be :not(x) instead – however using the word ‘old’ gives our negation context.
The grey border is added so that you can see the new buttons and ensure they display correctly before being styled as a scale. When you remove the border later, you can add the extra 2px to the width, or 1px and edit the margin by +1. See which works best for your design.
input[type=radio]:not(old){
display:inline-block;
width:0px;
margin:-4px;
padding:0;
opacity:0.01;
z-index:-1;
}
input[type=radio]:not(old) + label{
display:inline-block;
width:132px;
height:30px;
overflow:hidden;
background:white;
color:white;
border:1px grey solid;
margin-left:-5px;
On preview, your form should now be displaying as so:
With that done, the buttons are laid out correctly and are ready to be coloured.
Styling The Scale
Each button within a question has a unique value, and it is the same for every question; i.e., the first button for each question has a value of ctl00, the second has a value of ctl01, the third a value of ctl02. You can find the values for all your input areas using the Inspector tool.
Using these, we can skin each choice differently, which will enable us to create the scale bar. For this, we will use linear gradients on the background, and the alpha channel to hide the label text. All up to date browsers support gradients now, so you should only need the ‘standard syntax’ linear gradient and the plain background for this, but I have included the vendor-specific list for reference.
Visit w3schools for more information on CSS3 gradients: http://www.w3schools.com/css/css3_gradients.asp
Using the rgba() syntax for the text, we can set the text to match the plain background for browsers that won’t support alpha channel values. You can think of the alpha channel as the ‘opacity:’ selector, in that it requires a value between 0 (fully transparent) and 1 (fully opaque).
Gradients display top-bottom as standard, so the ‘90deg’ tells the gradient to turn 90 degrees clockwise.
On preview, you will have the first part of your scale bar:
Now we’ll do the same for the other two values.
You can also remove those grey borders from the buttons now. On preview, you will now have full scale bars, transitioning from red to yellow to green.
input[value="ctl00"]:not(old) + label{
background: red;
background: linear-gradient(90deg, red, red, orange);
color:rgba(255,0,0,0);
}
Adding Hover and Checked Styles
Well, they definitely look like scale bars, but there is nothing to tell the user what they’re clicking on. For this, we need to create some styles for how the buttons look on hover, and when selected (checked).
On hover, I want it to be very obvious which value is being hovered over, so I have added a blue background with bold, white text.
This is added using the :hover pseudo-selector, which is added after input[type=radio].
input[type=radio]:hover:not(old) + label{
background:rgb(0,102,204);
color:white;
text-align:center!important;
font-weight:bold;
line-height:30px;
}
When an item is selected, on the other hand, I want the original scale to be showing, plus the selected label. I make the label black, and give it a text-shadow value to create a white outline around the text for increased visibility.
This is added using the :checked pseudo-selector, which is added after input[type=radio].
input[type=radio]:checked:not(old) + label{
color:black;
text-shadow: 1px 1px 1px white,1px -1px 1px white,-1px 1px 1px white,-1px -1px 1px white;
text-align:center!important;
font-weight:bold;
line-height:30px;
}
Below shows the CSS used for these styles:
Add a Legend Key
All that is left to do is to add a small key at the top to explain the colour system at a glance – the colours, and probably the wording of the questions in a ‘real’ version of this form, make it obvious that it could be a bad-good scale. However, such scales come with a huge variety of labels, that adding a key is always good practise, in case the user assumes a different meaning to the one intended.
To add a key, use CSS to define boxes of colour – using your gradients again, but a simple red-orange rather than a ‘double’ red – and one class for the key text to define your spacing.
To add the key to your scale, create a new table row above the row in which your scale begins, below the Title (or, in my case, Reviewer Name’) input box. You need your key to be in the second column, above the scale bars, so add <td></td> before opening the <td> tag you’ll use. Centre the key by using a style within the td tag, rather than using td align=“center” – while it does work in SharePoint, it is no longer standard in HTML5 and should generally be avoided.
<tr><td></td><td style="text-align:center"><div class="poor"></div><div class="keytext">Poor</div><div class="okay"></div><div class="keytext">Okay</div><div class="good"></div><div class="keytext">Good</div></td> </tr>
.poor {
display:inline-block;
height:10px;
width:20px;
background: red;
background: linear-gradient(90deg, red, orange);
}
.keytext {
display:inline-block;
padding:10px 20px 12px 3px;
}
Tip: SharePoint doesn’t like ampersand symbols (&) and the no-break space ( ) code causes the form not to display, and you will receive an error message when you try to preview. When you close and re-open SharePoint Designer, it will also automatically add where there are spaces between classes, despite it not liking them, and so next time you open your form to work on the coding, it will no longer display. Due to this little quirk, make sure you don’t leave any spaces between the classes in your key! E.g.; </div><div class… and not </div> <div class…
Once you’ve added your key, preview again, make any edits to the padding so the spacing is as you’d like it to be, and then you’re done!
We now have a completed clickable scale in a SharePoint form.
Comments