Autocomplete takes full width of grid instead of column

[fortuneNext]

When ion-auto-complete is embedded in an ion-col, it ignores the bounds of it.

For example the following code: <ion-content padding> <ion-grid> <ion-row> <ion-col col-2> <ion-auto-complete> </ion-auto-complete> </ion-col> <ion-col> <button ion-button>BUTTON</button> </ion-col> </ion-row> </ion-grid> </ion-content>

leads to this output:

Greetings and thanks for your good work!

[sandervankasteel]

I've had the same issues.. I fixed by using the following CSS. You do need to modify it for your own requirements.

ion-auto-complete ul {
  left: 0px;
  width: 99.9%;
}

[McRosbeef]

I have the same issue and @sandervankasteel your solution does not work for me. @fortuneNext did you solve your problem and how ?

[Jhonsensf]

@McRosbeef I solved it just changing width: 90vw; by width: 100%; on the auto-complete.css file

ion-auto-complete {
  overflow    : hidden !important;
  display: block;
  width: 100%;
  display: inline-block;
  ion-searchbar {
    padding: 1px !important;
  }

[JeongJun-Lee]

@McRosbeef Thank you for your solution, but is there any other solution without modifying auto-complete.css file directly? How can I override the value?

[vulkanosaure]

you can add

ion-auto-complete ul{
	left:17px; right:17px;
	width:auto;
}

anywhere in your custom css files to override auto-complete.css Adjust the margin to your needs