2017-09-06 2 views
0

htmlテキストの入力フィールドをオーバーラップを完了させたい/親divを組み込む。サイド入力バー全体に垂直入力を完全にフィットさせる方法は?

入力要素にposition absolute、top:0、bottom:0、left:0、right:0を試して、親divの四隅に伸ばしてみました。私は高さを試しました:100%、幅:100%、回転はそれを役に立たなくします。

*{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
html,body{ 
 
    height:100%; 
 
    width:100%; 
 
} 
 
div{ 
 
    height:100%; 
 
    width:20%; 
 
    background:#111; 
 
} 
 
.field{ 
 
    transform: rotate(-90deg); 
 
    background: none; 
 
    border: none; 
 
    outline: none; 
 
    color:blue; 
 
    position:absolute; 
 
    top:0;bottom:0;left:0;right:0; 
 
}
<div> 
 
    <input class='field' type='text' placeholder='Enter zipcode'> 
 
</div>             
 

答えて

1

私はあなたのシナリオを満たすための試みを行いました。ただし、コードスニペットでは機能しません。

HTML

<div id="container"> 
    <input id="textbox-element" class='field' type='text' placeholder='Enter zipcode'> 
</div> 

CSS

*{ 
    padding:0; 
    margin:0; 
} 

html,body{ 
    height:100%; 
    width:100%; 
} 

div{ 
    height:100%; 
    width:20%; 
    background:#111; 
} 

.field{ 
    transform: rotate(-90deg); 
    transform-origin: top left; 
    background: none; 
    border: none; 
    outline: none; 
    color:blue; 
    position:absolute; 
} 

Javascriptを私はここでやっていることは入力「を設定することです

document.addEventListener("DOMContentLoaded", function(event) { 
    var dimensions = document.querySelector("#container").getBoundingClientRect(); 
    var element = document.querySelector("#textbox-element"); 
    element.style.bottom = -dimensions.width; 
    element.style.width = dimensions.height; 
    element.style.height = dimensions.width; 
}); 

DOMがロードされた後のローテーションが適用された後の位置とサイズ

+0

に基本的に私はちょうど格納式サイドバーの入力フィールドちょっとの事をしたいです。私は、このサイド入力フィールドを後退させるボタンをつけるつもりです。 – user132522

+0

このように:https://codepen.io/Hello911/pen/MvZyXr。 'x'付きの側で – user132522

+0

あなたはCodePenで動作しません。 https://codepen.io/Hello911/pen/XawRWv?editors=1010 – user132522

1

基本的にこれはかなり難しいです(不可能ではない場合)ただ CSSとして幅は&高さを決定することはできません。

回転は純粋に視覚的で、周囲の要素のレイアウトには影響しません。

親divに合わせて回転要素の高さと幅を設定することをお勧めします。

(jQueryのを使用して)このような何か

$(window).on("resize", function() { 
 

 
    var width = $("div").height(); 
 
    var height = $("div").width(); 
 

 
    $(".field").css({ 
 
    width: width, 
 
    height: height 
 
    }); 
 
}).resize();
* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
div { 
 
    height: 100%; 
 
    width: 20%; 
 
    background: green; 
 
} 
 

 
.field { 
 
    transform-origin: bottom left; 
 
    transform: translateY(-100%) rotate(90deg); 
 
    display: block; 
 
    background: pink; 
 
    border: none; 
 
    outline: none; 
 
    color: blue; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input class='field' type='text' placeholder='Enter zipcode' /> 
 
</div>

Codepen Demo

+0

私は本質的に引込め可能な入力フィールドを作りたいと思います。これは私の移動可能なナビゲーションバーです:https://codepen.io/Hello911/pen/MvZyXr。私は入力フィールドを 'x'の側に置いておきたいです。 – user132522

+0

'(ウィンドウ).on(" resize "、function(){.....})と何をしていますか?resize();' '.resize()'は最後に行うのですか?ウィンドウが変わるたびに入力のサイズを変更する必要があります。 – user132522

+0

これは、ページのロード時にただちにサイズ変更関数を呼び出します。つまり、私は2つではなく1つの関数しか必要としません。 –

関連する問題