Can I override the default List item layout

Ionic Framework ionic-v3
1

I have a page where I want to have a prompt and value at the top of my page (and a graph underneath).

I use the following markup…

sccs..

     slide-zoom {
	   // I seemed to need to do this to get top alignment
	   vertical-align: top;
	   text-align: top;
	   height: 100%;
	 }

	 .select-label {
		text-align: center;
		width:30%
	  } 

	  .select-control {
		text-align: left;
		width:70%
	  } 

<ion-list>
    <ion-item>
       <ion-label class='select-label'>Value</ion-label>
       <ion-select #valSel class='select-control'> 
          [ngModel]='selectedCode' (ionChange)='onChanged($event)'>
          <ion-option *ngFor='let d of data' value="{{d.code}}">{{d.description}}</ion-option>
       </ion-select>
    </ion-item>
  </ion-list>

I want to align the label left, so there is just enough room for the label and then use the rest for the select control. As can be seen I run out of room for the select…

image

I am struggling to override the layout, I have them both at 50% at the moment. I have tried applying all sorts of styling but cannot get it (I can’t find the style that sets them at 50% width)

Is there a way to override this?

Thanks in advance for any help!

2

Found it. It was just the max-width…

 .select-control {
     text-align: left;    
     max-width:100%;
   }