Is it possible to set the Ionic 2 ion-col to a set pixel size rather than a percentage?

Question

I just want to set a column to a set px size, and then have the other column take up the rest of the space.

I have the following where I want the first col to be say 10px

    <ion-grid>
        <ion-row>
               <ion-col width-X='10px' style='width:10px;background-color:red'></ion-col>
                <ion-col>
                    <div><b>item 1</b></div>
                    <div>item 2</div>
                    <div>item 3</div>
             </ion-col>
         </ion-row>
    </ion-grid>

But the first column is always 50%.

Is there a way to use a fixed px?

Thanks in advance

Answer 1

You could use flex-basis to achieve what you're looking for. In your Sass...

ion-row {

    ion-col {

        &:first-of-type {

            flex: 0 0 10px;

        }
    }
}

Flex's shorthand property allows you set it to and the you'd like the element to take up.

See here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

You can specify a min width to the column as mentioned in ionic doc. In mycase, the first column will stay fixed and the column around will resize.

<ion-grid>
    <ion-col class="accordion" col-2></ion-col>
    <ion-col></ion-col>
</ion-grid>

.accordion{
   min-width: 224px;
}