Resizing component width and make it transparent


#1

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.

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


#2

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


#3

So basically you want to make the list thinner?


#4

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…