• open dock
  • Home
  • Professional Services
    • Business Improvement
    • Data Optimisation Services
  • Our Approach
    • maBI
    • Data-Driven Decision Model
  • Portfolio
    • Case Studies and Portfolio
    • Timeline
  • Contact Us
Change this Limited
  • Home
  • Professional Services
    • Business Improvement
    • Data Optimisation Services
  • Our Approach
    • maBI
    • Data-Driven Decision Model
  • Portfolio
    • Case Studies and Portfolio
    • Timeline
  • Contact Us

Creating A Scale Using CSS Styles

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:

Finished Scale

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.

SharePoint_CSS_Scale_01

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:

SharePoint_CSS_Scale_02

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.

SharePoint_CSS_Scale_03

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.

SharePoint_CSS_Scale_04

On preview, you will have the first part of your scale bar:

SharePoint_CSS_Scale_05

Now we’ll do the same for the other two values.

SharePoint_CSS_Scale_06

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);
}

SharePoint_CSS_Scale_07

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.

SharePoint_CSS_Scale_08

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.

SharePoint_CSS_Scale_09

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:

SharePoint_CSS_Scale_10

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.

SharePoint_CSS_Scale_11

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>

SharePoint_CSS_Scale_12

.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 (&nbsp;) 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 &nbsp; 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!

Finished Scale

We now have a completed clickable scale in a SharePoint form.

  • 05 Sep
  • Ian Wheeler
  • SharePoint
  •  0 Comments
  •  Like

Share This

Sentiment Analysis for Social Media →← Celebrating 10 years in business
0

Comments

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Recent Posts

    • Change this Christmas Dash-er-board
    • Expo round-up and prize draw answers
    • Change this at Birmingham Business Expo – 14 Nov 2017
    • Power BI Custom Visual – Play Axis – Review
    • File Naming Conventions and Best Practice
  • Archives

    • December 2018
    • November 2017
    • June 2017
    • March 2017
    • February 2017
    • January 2017
    • December 2016
    • November 2016
    • September 2016
    • August 2016
    • July 2016
    • May 2016
    • April 2016
    • March 2016
    • February 2016
    • January 2016
    • December 2015
    • September 2015
    • June 2015
    • May 2015
    • April 2015
  • Categories

    • Case Studies
    • Excel
    • Insight
    • News
    • Portfolio
    • Power BI
    • SAP Dashboards
    • SharePoint
  • Search our site

  • Social

  • Recent Blog Posts

    • Change this Christmas Dash-er-board
    • Expo round-up and prize draw answers
    • Change this at Birmingham Business Expo – 14 Nov 2017
    • Power BI Custom Visual – Play Axis – Review
    • File Naming Conventions and Best Practice
  • © 2016 Change this Limited
    Website by Change this
    Standard Terms of Business
    Privacy Policy

    Delivering the difference

This website uses some cookies to improve your experience within the website.


We also use cookies to understand how visitors use our website Accept


To find out what cookies we use and for more information, Read More.
Privacy & Cookies Policy

Necessary Always Enabled

Non-necessary