0

I have a block which will take on different heights depending on how much content users decide to put into. Inside of the block across the left hand side, I want to put a vertical progress/meter bar that runs the full length from top to bottom of the containing block regardless of it's size and displays some value.

My current approach is to use a element and rotate it using the transform attribute (per the answer here: Is It Possible to Create a Vertical Meter With HTML5?). Here is my JS Fiddle: http://jsfiddle.net/zt98w/2/

When I do this, however, and I set the 's "height" to 100%, it still thinks of itself as a horizontal element, and becomes equal to the width of the parent element, not the height.

Additionally, the container element's width seems to be stretched by the height of the meter bar and therefore also creates all this "extra padding" to the right of the meter bar. It seems the rotation transform seems act on the meter bar from it's center, and it's containing div doesn't seem to take it's new position into effect when determining it's own boundaries. Consider the red boundary of the meter bar and the green of the parent container...the red meter bar is only half inside! I imagine I would need to set it's position to relative and then adjust it's 'top' and 'left' attributes to "fake" it looking "inside" the container, but then I come across with the issue of determining just how much would I need to set those values to in order to work for all cases (and not just this one).

I would like something which is compatible cross-browser and strictly involves css and html (not JavaScript), so a solution as presented here doesn't work: CSS Vertical Progress Bar)

Any thoughts?

HTML:

<form>

    <meter min="1" max="5" value="2"></meter>
    <label> Task 1</label>
        <br>
    <label> Task 2</label>
        <br>
    <label> Task 3</label>
        <br>
    <label> Task 4</label>
        <br>
    <label> Task 5</label>
        <br>
    <label> Task 6</label>
        <br>
    <label> Task 7</label>
        <br>
    <label> Task 8</label>
        <br>
    <label> Task ...</label>
</form>

CSS:

form {
    position:absolute;
    margin: 10px;
    border:1px dashed green;
}

meter{
    border:1px dashed red;

    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);


    width:100%;   /* This "width" still assumes that the meter is horizontal and takes         on the width of the form, not the height which is intended */
}
Community
  • 1
  • 1
Afflatus
  • 2,302
  • 5
  • 25
  • 40
  • Can you try using the [`orient`](https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-orient) css property? Although I'm not sure about cross-browser compatibility. Here's a working example (FF only): [https://developer.mozilla.org/samples/cssref/orient.html](https://developer.mozilla.org/samples/cssref/orient.html) – gtramontina Jun 16 '14 at 00:51
  • The issue there is that while the bar is vertical (at least it looks like that), the progress is still demarcated horizontally...pretty ugly and hard to read. See: http://jsfiddle.net/Z3UMY – Afflatus Jun 16 '14 at 12:15
  • Try opening this jsfiddle up in Firefox, as the property is -moz-orient. – gtramontina Jun 16 '14 at 18:40
  • Good point -- duh. Unfortunately, when I open the jsfiddle (and the website for that matter) in firefox, neither meters even show up. Anyway, I really do need a cross-browser solution, so having it only work in FF would be unacceptable. – Afflatus Jun 16 '14 at 18:57
  • I'd then go with a poorman's implementation (`divs` and `spans` – [example here](http://css-tricks.com/css3-progress-bars/)), and use aria attributes to make it accessible. – gtramontina Jun 16 '14 at 22:57

0 Answers0