I want the ons-list to be in two columns.

Asked 2 months ago, Updated 2 months ago, 1 views

As per the title, I would like to make it into two columns, but the line has been broken and the display is different from what I expected.I'm sorry, but could someone tell me the basics?

ons.bootstrap()
.controller('main', function($scope){
  $scope.disable=false;
  $scope.push=function(page){
    $scope.disable=true;
    setTimeout(function(p){
      myNavigator.pushPage(p);
    }, 1500, page);
  }
  $scope.postPush=function(){
    $scope.disable=false;
  }
});
.list-container{
  width —100%
}

.niretsu {
  width: 50%;
}
head>
  <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>
  <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"/>
</head>

<bodying-controller="main">
    <ons-navigator var="myNavigator" page="page1.html"ons-postpush="postPush()">
    </ons-navigator> 
</body>

<ons-template id="page1.html">
  <ons-page>
      <ons-list class="list-container">
        
          <ons-list-header>2 columns</ons-list-header>
        
          <ons-list-item id="1-1" class="niretsu">1-1</ons-list-item>
          <ons-list-item id="1-2" class="niretsu"> 1-2</ons-list-item>
        
          <ons-list-item id="2-1" class="niretsu">2-1</ons-list-item>
          <ons-list-item id="2-2" class="niretsu">2-2</ons-list-item>
        
          <ons-list-item id="3-1" class="niretsu">3-1</ons-list-item>
          <ons-list-item id="3-2" class="niretsu">3-2</ons-list-item>

        
          <ons-list-header>Tappable Numbers</ons-list-header>
          <ons-list-item modulator="tapable">Tap Me</ons-list-item>
          <ons-list-item modulator="tapable">Tap Me</ons-list-item>
          <ons-list-item modulator="tapable">Tap Me</ons-list-item>
          <ons-list-item modulator="tapable">Tap Me</ons-list-item>
          <ons-list-item modulator="tapable">Tap Me</ons-list-item>
          <ons-list-item modulator="tapable">Tap Me</ons-list-item>
        </ons-list>
  </ons-page>
</ons-template>

<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center">Page2</div>
    </ons-toolbar>

    <div style="text-align:center">
      <h1>Page2</h1>
      <ons-button onclick="myNavigator.popPage()">
        Pop Page
      </ons-button>
    </div>
  </ons-page>
</ons-template>

html monaca css

2022-09-30 11:49

1 Answers

In the case of Chrome, I think you can arrange it horizontally with a DIV tag.

<ons-template id="page1.html">
  <ons-page>
    <div style="width:50%;float:left;">
      <ons-list>
        <ons-list-header>2 columns</ons-list-header>
        <ons-list-item id="1-1" class="niretsu">1-1</ons-list-item>
        <ons-list-item id="1-2" class="niretsu"> 1-2</ons-list-item>
        <ons-list-item id="2-1" class="niretsu">2-1</ons-list-item>
        <ons-list-item id="2-2" class="niretsu">2-2</ons-list-item>
        <ons-list-item id="3-1" class="niretsu">3-1</ons-list-item>
        <ons-list-item id="3-2" class="niretsu">3-2</ons-list-item>
      </ons-list>
    </div>
    <div>
      <ons-list>
        <ons-list-header>Tappable Numbers</ons-list-header>
        <ons-list-item modulator="tapable">Tap Me</ons-list-item>
        <ons-list-item modulator="tapable">Tap Me</ons-list-item>
        <ons-list-item modulator="tapable">Tap Me</ons-list-item>
        <ons-list-item modulator="tapable">Tap Me</ons-list-item>
        <ons-list-item modulator="tapable">Tap Me</ons-list-item>
        <ons-list-item modulator="tapable">Tap Me</ons-list-item>
      </ons-list>
    </div>
  </ons-page>
</ons-template>

Additional
I also checked the Monaca preview.
Enter a description of the image here


2022-09-30 11:49

If you have any answers or tips


© 2022 OneMinuteCode. All rights reserved.