Ionic selection without label
I have an Ionic selection on the same line as the input, so I want to show the SELECT without a label.
The code looks like this:
<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 is displayed as follows:
Apart from the obvious size difference (which I assume has to do with the FONT SIZE of the label?).
How can I remove a shortcut, leaving only input and selection?
If I remove the label:
<div class="input-label">G</div>
I get the following:
Update Thanks to Jess Patton's 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:
This is much closer to the desired result, but the size difference is still worrying and unacceptable for deployment.
UPDATE 2:
Changing the inlet strip is not an option as it is part of a larger shape.
source to share
I think I got it, the selection still works and displays without a 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:
UPDATE . I add the following:
.item-select {
height: 100%;
}
and got the following:
UPDATE 2: Finally got the css: / * 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:
source to share
Just remove the "item-input" class and the label input element. Then set the parameter style = "max-width: 100%"
<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.
source to share