0

ユーザーが入れるコンテンツの量に応じて、高さが異なるブロックがあります。左側のブロックの内側に、ブロックのサイズに関係なく、含まれているブロックの上から下まで全長にわたって実行され、値を表示する垂直の進行状況/メーター バーを配置したいと考えています。

私の現在のアプローチは、要素を使用し、transform 属性を使用して回転させることです (ここの回答: Is It possible to Create a Vertical Meter With HTML5? )。ここに私の JS フィドルがあります: http://jsfiddle.net/zt98w/2/

ただし、これを行って の「高さ」を 100% に設定すると、それ自体を水平要素と見なし、高さではなく親要素の幅と等しくなります。

さらに、コンテナー要素の幅はメーター バーの高さによって引き伸ばされているように見えるため、メーター バーの右側にこのすべての「余分なパディング」も作成されます。回転変換はメーターバーの中心から作用しているように見えます.divが含まれていると、それ自体の境界を決定するときに新しい位置が有効にならないようです. メーター バーの赤い境界線と親コンテナーの緑を考慮してください...赤いメーター バーは半分しか内側にありません! 位置を相対的に設定し、「上」と「左」の属性を調整して、コンテナの「内側」に見えるように「偽造」する必要があると思います。

クロスブラウザーと互換性があり、css と html (JavaScript ではない) に厳密に関係するものが欲しいので、ここに示す解決策は機能しません: CSS Vertical Progress Bar )

何かご意見は？

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 */
}
4

0 に答える 0