Monaca Onsen UI Discord Chat Github Repo

center the text in a list



  • How to center the text 22/10/2018. in the list

    <ons-list>

    <ons-list-item ><div class=“left”> Monday </div><div class=“trn”> 22/10/2018</div> <div class=“right”>350</div>
    </ons-list-item>
    <ons-list-item>Tuesday<div class=“right”>400</div> </ons-list-item>
    <ons-list-item>Wednesday<div class=“right”>500</div> </ons-list-item>
    <ons-list-item>Thursday<div class=“right”>200</div> </ons-list-item>
    <ons-list-item>Friday<div class=“right”>400</div> </ons-list-item>
    <ons-list-item>Saturday<div class=“right”>500</div> </ons-list-item>
    <ons-list-item>Sunday<div class=“right”>300</div> </ons-list-item>

    <ons-list>



  • @smidhunraj

    I would use ons-col and ons-row tags to do this
    v-ons-col documentation

       <ons-list>
          <ons-list-item>
              <ons-row>
                <ons-col width="33.333%" class=“left”> Monday </ons-col>
                <ons-col  width="33.333%" style="text-align: center" class=“trn”> 22/10/2018</ons-col>
                <ons-col  width="33.333%" style="text-align: right" class=“right”>350 </ons-col>
              </ons-row>
          </ons-list-item>
          <ons-list-item>
            <ons-row>
              <ons-col width="33.333%" class=“left”> Tuesday </ons-col>
              <ons-col  width="33.333%" style="text-align: center" class=“trn”></ons-col>
              <ons-col  width="33.333%" style="text-align: right" class=“right”>400 </ons-col>
            </ons-row>
          </ons-list-item>
          <ons-list-item>
            <ons-row>
              <ons-col width="33.333%" class=“left”> Wednesday </ons-col>
              <ons-col  width="33.333%" style="text-align: center" class=“trn”></ons-col>
              <ons-col  width="33.333%" style="text-align: right" class=“right”>500 </ons-col>
            </ons-row>
          </ons-list-item>
          <ons-list-item>
            <ons-row>
              <ons-col width="33.333%" class=“left”> Thursday </ons-col>
              <ons-col  width="33.333%" style="text-align: center" class=“trn”></ons-col>
              <ons-col  width="33.333%" style="text-align: right" class=“right”>200 </ons-col>
            </ons-row>
          </ons-list-item>
          <ons-list-item>
            <ons-row>
              <ons-col width="33.333%" class=“left”> Friday </ons-col>
              <ons-col  width="33.333%" style="text-align: center" class=“trn”></ons-col>
              <ons-col  width="33.333%" style="text-align: right" class=“right”>400 </ons-col>
            </ons-row>
          </ons-list-item>
          <ons-list-item>
            <ons-row>
              <ons-col width="33.333%" class=“left”> Saturday </ons-col>
              <ons-col  width="33.333%" style="text-align: center" class=“trn”></ons-col>
              <ons-col  width="33.333%" style="text-align: right" class=“right”>500 </ons-col>
            </ons-row>
          </ons-list-item>
          <ons-list-item>
            <ons-row>
              <ons-col width="33.333%" class=“left”> Sunday </ons-col>
              <ons-col  width="33.333%" style="text-align: center" class=“trn”></ons-col>
              <ons-col  width="33.333%" style="text-align: right" class=“right”>300 </ons-col>
            </ons-row>
          </ons-list-item>
          </ons-list>