How can I reduce ons-list-item height?


Tags: html,css,html5,onsen-ui

Problem :

I am creating an app using Onsen UI. I would like to reduce the height of of the name field.

I tried to change the value of the following style, but it could not be narrowed to more than it is now.

<ons-list-item style="height:50%;" >

How can I change the height of it ?

HTML

<ons-page>
  <ons-toolbar>
    <div class="right"><ons-toolbar-button>Cancel</ons-toolbar-button></div>
    <div class="center">New Message</div>
  </ons-toolbar>

  <ons-list modifier="inset" style="margin-top: 10px">
    <ons-list-item class="to-wrapper">
      <ons-row>
        <ons-col width="52px">
          <ons-icon icon="fa-user"></ons-icon>
        </ons-col>
        <ons-col>
          <div class="to-name">Graham</div>
          <div class="to-email">@graham</div>
        </ons-col>
      </ons-row>
    </ons-list-item>
    <ons-list-item style="height:50%;" >
      <input type="text" class="text-input text-input--transparent" placeholder="Name (I'd like to change this height.)" style="width: 100%">
    </ons-list-item>
    <ons-list-item>
      <textarea class="textarea textarea--transparent" placeholder="Message" style="width: 100%; height: 100px;"></textarea>
    </ons-list-item>
</ons-page>

CSS

.to-wrapper {
  line-height: 1;
  height: 62px;
  padding: 10px;
}

.to-image {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}

.to-name {
  font-weight: 500;
  font-size: 17px;
  margin-bottom: 4px;
}

.to-email {
  font-size: 14px;
  opacity: 0.4;
}

.text-input {
  margin-top: 4px;
}

.textarea {
  margin-top: 4px;
}
.fa-user{
  font-size: 30px;     
}    


Solution :

<ons-list-item> sets a property min-height, which you need to overwrite. So something like that should work:

<ons-list-item style="height:20px; min-height: 20px" >

    CSS Howto..

    How to calculate sine, cosine in Less?

    CSS how to make a fixed height?

    CSS: How to define spacing between responsive columns

    How to inject a css class into an MvcHtmlString?

    How can i refer to all of my tags in CSS?

    Added ellipsis for long text but it showing below the text

    How to add padding to the left and right side of grid in Bootstrap WITHOUT padding between grid boxes using col-sm-3

    How to make a div fill the height until the next absolutely positioned element

    How to remove Width and Height values of an Image with css?

    How to prevent CSS inline style when Browser Zoom in?

    Jquery Show Hide with attribute

    How to avoid div width increase on hover

    How do you structure css files for a web project?

    How do i add a background image to my header?

    How to use one popup box to display arbitrary number of information respectively?

    How to make nav menu fall onto the page?

    How to make CSS border show on radio button click

    CSS show div background image on top of other contained elements [duplicate]

    How to exclude Hover for Active LI (Menu)?

    How To Display first 50 characters Of Text [closed]

    How can i auto rotate this carousel

    Show child elements into parent by changing its class through jquery

    How to implement padding-free sprites in css?

    How Do I Remove a CSS Value

    How to access an object from a webpage in selenium

    How to ensure a webpage's content extends to the bottom of a webpage using only CSS

    How to declare a div in @page @top-left

    How to clone an element using class name and append it to the body

    How can I use dropdowns in a masonry layout?

    JavaScript or CSS: How can I make a transition of one element to another?