0

これは非常に奇妙な問題です。Reveal Form (「Price and Save My Shopping List」のオンクリック) で、何らかの理由でテキスト ボックスとドロップダウンが無効になっていると思いました。これはそうではありません; ただし、コントロールの右端にあるそれらをクリックすることしかできません。ドロップダウンを「小」から「中」に増やして、まったく操作できるようにする必要がありました。なぜこれが起こっているのかわかりませんし、Googleに何を考えることさえできませんでした. だから私はFoundation Revealに関連するすべてを調べたが無駄だった。

これがjsfiddleですが、私のサイトでは機能しますが、jsfiddleでは機能しません。実際の動作を見たい場合は、私のサイトへのリンクをお送りします: http://jsfiddle.net/jenborn/TQjm9/

jsfiddleにリンクする場合、明らかにコードを含める必要があるため、モーダルフォームは次のとおりです。

  <form id="saveShoppingList" action="" method="POST" class="custom">
   <div class="small-12 columns">
     <div class="small-6 small-centered columns"><h4>Your Shopping List</h4></div>
     <div id="makemebold" class="large-4 columns"><!--label for="name"-->Name it: <!--/label--></div>
     <div class="small-8 columns"><input type="text" id="name" name="name" /></div>
     <div id="makemebold" class="small-4 columns"><!--label for="style"-->Style: <!--/label--></div>
     <div class="small-8 columns"><select id="beer_style"  class="medium"><? echo $style_opt ?></select></div>
     <div id="makemebold" class="large-4 columns">Keep Private:</div>
     <div class="small-3 left columns"><div class="switch tiny round"><input id="private" name="private" type="radio"><label for="private" onclick="Off">On</label><span></span></div></div>
   </div>

  <div class="row">
   <div class="small-6 large-centered columns">
     <button type="submit" class="button radius">Go</button>
     <button type="reset" class="button radius alert">Reset</button>
  </div>
  </form>
4

1 に答える 1

0

Foundation のグリッドの使用に関して、いくつかの重大な問題があります。後続の列を合計すると 12 をはるかに超え、行を挟むことなく他の列内にネストされた列があります。Foundation Docs のグリッド セクションに目を通し、それに応じてコードを書き直せば、問題が解決されるはずです。「グリッドを無限にネストする」というタイトルのセクションに特に注意してください。

また、フォーム ラベルに要素を使用するなどの基本的な改善も提案labelします。ブラウザーはそれらの使用方法をより適切に認識できるようになるからです。もちろん、セマンティクスについてもです。

于 2013-10-24T19:30:28.237 に答える