

例えばSwitchのコード

[code]

    <label class="switch">
      <input type="checkbox" class="switch__input">
      <div class="switch__toggle"></div>
    </label>
    
[/code]

を（ダイアログではなく）普通に`<ons-page></ons-page>`内に書くと  
<http://ja.onsen.io/reference/css.html#switch>  
の見た目で表示されるのですが、

ダイアログ内に書くと、次のようになってしまいます。  
![ダイアログに表示した場合のSwitch](https://i.stack.imgur.com/9nlbi.png)  
これはチェックボックスらしい表示になってはいますが、チェックすることはできないです。

この他、Radio Button, Segmentなども表示が壊れて操作ができないです。  
ダイアログに選択系のコントロールを配置する方法があれば教えていただけないでしょうか。


CC BY-SA 3.0
2015-04-13T07:31:52.157
9105
2015-08-11T18:01:35.363
question
onsen-ui
Onsen UI Guide の「ダイアログを使う」のダイアログに選択系のコントロールを使用するには


[ons-dialog](http://ja.onsen.io/reference/ons-dialog.html)をベースにやってみたら大丈夫そうでした。

[code]

    ons.bootstrap()
    
    .controller('DialogController', function($scope) {
      $scope.dialogs = {};
       
      $scope.show = function(dlg) {
        if (!$scope.dialogs[dlg]) {
          ons.createDialog(dlg).then(function(dialog) {
            $scope.dialogs[dlg] = dialog;
            dialog.show();
          });
        }
        else {
          $scope.dialogs[dlg].show();
        }
      }
    });
[/code]

[code]

    ons-dialog p {
      margin-left: 10px;
      margin-right: 10px;
    }
    
    input {
      width: 100%;
    }
    
    div#switch {
      text-align: center;
    }
    
    div#segment {
      width: 280px;
    }
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>
    
    <ons-page>
      <ons-toolbar>
        <div class="center">Dialog</div>
      </ons-toolbar>
      <ons-list ng-controller="DialogController">
       <ons-list-item ng-click="show('login.html')" modifier="tappable">
         Show Dialog
       </ons-list-item>
      </ons-list>
    </ons-page>
    
    <ons-template id="login.html">
      <ons-dialog var="dialog" cancelable>
        <ons-toolbar inline>
          <div class="center">
            Dialog
          </div>
        </ons-toolbar>
    
        <h4>Switch</h4>
        <div id="switch">
          <label class="switch">
            <input type="checkbox" class="switch__input">
            <div class="switch__toggle"></div>
          </label>
        </div>
    
        <h4>Segment</h4>
        <div id="segment" class="button-bar">
          <div class="button-bar__item">
            <input type="radio" name="segment-a" checked>
            <button class="button-bar__button">One</button>
          </div>
          <div class="button-bar__item">
            <input type="radio" name="segment-a">
            <button class="button-bar__button">Two</button>
          </div>
          <div class="button-bar__item">
            <input type="radio" name="segment-a">
            <button class="button-bar__button">Three</button>
          </div>
        </div>
    
        <h4>Radio Button</h4>
        <label class="radio-button">
          <input type="radio" name="r" checked="checked">
          <div class="radio-button__checkmark"></div>
          Label1
        </label><br>
        <label class="radio-button">
          <input type="radio" name="r">
          <div class="radio-button__checkmark"></div>
          Label2
        </label><br>
      </ons-dialog> 
    </ons-template>
[/code]


CC BY-SA 3.0
2015-04-13T15:39:13.920
9127
2015-04-13T15:39:13.920
3516
9105
answer