Resizing component width and make it transparent

The problem is easy, I hope the solution is easy too.
I have an <ion-searchbar> that fill an <ion-list>, like autocomplete feature.
Searchbar and list are placed in <ion-header>.

<ion-toolbar>
	<ion-searchbar 
		[(ngModel)]="queryText"
		(ionInput)="updateSearch()">
	</ion-searchbar>
</ion-toolbar>
<ion-list>
	<ion-item *ngFor="let group of groups">
		{{group.text}}
	</ion-item>
</ion-list>

Clicking on an item, it will be inserted in another list, in <ion-content> this time.
-> I would like the first list occupies only part of the screen, while the remaining one will be transparent. :confused:

Can someone help me?
Thx.

image

edit: I tried to surround the list with an <ion-grid>, and antually is resized, but i can’t achieve the transparency and see the <ion-content> list. Using opacity make list blank/white, but not transparent.

edit2: obviously, removing from page instead of make transparent, would be even better

No one knows how to make transparent (or prevent it from being created) the red zone?

So basically you want to make the list thinner?

1 Like

Yeah… but using, for example, width: 50%, make the list thinner, but now is visible the white header under the list.

This is my <ion-header> (without useless button):

<ion-header>
    <ion-navbar>
		<ion-title>Autocomplete</ion-title>
    </ion-navbar>
    <ion-toolbar no-border>
        <ion-searchbar [(ngModel)]="query" (ionInput)="search()"></ion-searchbar>
    </ion-toolbar>
    <ion-list no-margin>
            <ion-item *ngFor="let group of groups">
                {{group.desc}}
            </ion-item>
    </ion-list>
</ion-header>

I also tried to apply <ion-scroll> (list can have lot of results and going under the keyboard ), but has some UI problems…