Ionic select no label

3
votes

I have an Ionic select in the same row as an input, therefore I want to show the SELECT without a label.

The code is as follows:

<ion-list>
      <div class="row">
        <div class="col no-padding">
          <label class="item item-input">
            <input placeholder="Identificación" name="identificacion" type="text" ng-click="registro.msg = null" ng-model="registro.identificacion" required>
          </label>
        </div>
        <div class="col no-padding">
          <label class="item item-input item-select" name="tipo_id" ng-model="registro.tipo_id">
            <div class="input-label">G</div>
            <select ng-model="registro.tipo_id">
              <option ng-repeat="tipo in defaultTipo" value="{{tipo.id}}" ng-selected="{{tipo.selected}}">{{tipo.tipo}}</option>
            </select>
          </label>
        </div>
      </div>
</ion-list>

It displays as follows:

enter image description here

Besides the obvious difference in size (which I assume is due to the FONT SIZE of the label?).

How do I disappear the label, leaving just the input and the select?

If I delete the label:

<div class="input-label">G</div>

I get the following:

enter image description here

Update Thanks to Jess Patton solution:

.item-select select {
    -moz-appearance: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    padding: 0px 45px 0px 0px;
    max-width: 100%;
    border: medium none;
    background: #FFF none repeat scroll 0% 0%;
    color: #333;
    text-indent: 0.01px;
    text-overflow: "";
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
    direction: rtl;
}

And changing the HTML to:

<label class="item item-select" name="tipo_id" ng-model="registro.tipo_id">

I get the following result:

enter image description here

It is much closer to the needed result, but still the difference in sizes are worrisome and not worthy for deployment.

UPDATE 2:

Changing the input padding isn't an option as it is part of a larger form.

3
ionic-frameworkionic

3 Answers

2
votes

Think I got it, the select still works and is shown with no label. I used this html: 

<div class="item item-select">
    <select>
      <option>Blue</option>
      <option selected>Green</option>
      <option>Red</option>
    </select>
    </div>

and this css: 

.item-select select {
    -moz-appearance: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    padding: 0px 45px 0px 0px;
    max-width: 100%;
    border: medium none;
    background: #FFF none repeat scroll 0% 0%;
    color: #333;
    text-indent: 0.01px;
    text-overflow: "";
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
    direction: rtl;
}

Got this result:

enter image description here

UPDATE: I add this: 

.item-select {
  height: 100%;
}

and got this:

enter image description here

UPDATE 2: Finally got the css right: /* Styles here */

.item-select select {
    -moz-appearance: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    padding: 0px 45px 0px 0px;
    max-width: 100%;
    background: #FFF none repeat scroll 0% 0%;
    color: #333;
    text-indent: 0.01px;
    text-overflow: "";
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
    direction: rtl;
}
.item-select {
  height: 100%;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
.item-input{
  padding: 0 0 0 0;
}

Looks like this:

enter image description here

0
votes

Just remove "item-input" class and input-label part. Then, set style="max-width: 100%" to select,

<label class="item item-select select_input">
    <select ng-model="s.selected" style="max-width: 100%">
        <option value="">None</option>
        <option ng-repeat="item in items">
            {{ item }}
        </option>
    </select>
</label>

Hope! It might help someone.

0
votes

Here is the CSS that works for me in Ionic v1:

.item-select select {
  max-width: 100%!important;
  width: 100%!important;
  right: auto!important;
  direction: ltr!important;
  padding-left: 0!important;
}