0

フローチャートの標準決定ボックスを生成しようとしていますが、次のことを行う必要があります。

  1. キャプション/値を設定でき、「クリック可能」な標準の HTML ボタンのように動作します。
  2. テキスト入力の長さに基づいて決定ボックスのサイズを調整できるようにします。
  3. したがって、通常は長方形のテキスト ボックスが外側の決定ボックス内に完全に収まるとします。問題は、テキスト ボックスの 4 辺すべてのスペースが無駄になっていることです。そのスペースをより良い方法で使用して、意思決定ボックスを小さくする良い方法が思い浮かびません。

背景の決定形状イメージをテキスト ボックス オーバーレイと共に使用し、2 つの三角形をパッチして決定ボックス形状を作成し、その上にテキスト ボックスを重ねてみましたが、これらはすべて、これを単純にするための非常に複雑な手段のようです。決定ボックス。

以下のコードサンプルを追加しました....決定ボックスの上にテキストボックスを表示するようにまだ取得していないため、おそらく正しくありません...しかし、これが機能したとしても、テキストの折り返しのスペース使用に関する私の問題決定ボックス内はまだ解決されていません。

私は Javascript よりも HTML/CSS に慣れていますが、説明があればどちらも気にしません。

まだ完全ではありませんが、使用している 2 つの三角形の CSS を次に示します。

====== CSS ===

.triangles{
width: 160;
height:150;
z-index:1;
}

.decisiontext{
position:relative
left:0px;
top:-50px;
z-index:2;
}

#left-triangle {
width: 30;
height: 0px;
float:left;
border-right: 79px solid orange;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;

-webkit-transform: rotate(0.05deg);
-moz-transform: scale(1.1);
-o-transform: rotate(0.05deg); /* Didn't check Opera yet */
transform: rotate(0.05deg);
}
#right-triangle {
 width: 40;
 height: 0;
 float:left;
 border-left: 79px solid red;
 border-top: 50px solid transparent;
 border-bottom: 50px solid transparent;

-webkit-transform: rotate(0.05deg);
-moz-transform: scale(1.1);
-o-transform: rotate(0.05deg); 
transform: rotate(0.05deg);
}

====== ここにHTMLがあります==============

  <div class="decisionbox">

      <div id="left-triangle"; class="triangles">
      <!-- end .left-triangle -->
      </div>        
      <div id="right-triangle"; class="triangles">
      <!-- end .right-triangle --></div>   

      <div class="decisiontext">

      <button type="button" style=" max-width:100px; white-space:normal; font-    size:10px">I am using the regular button here but needs something that uses space inside         the decision box better.</button>  

      <!-- end .decisiontext -->
      </div>

  <!-- end .decisionbox -->
  </div>

===============================

4

0 に答える 0