Styjun

Behavior of the zero and negative/sign flags on classic instruction sets

Integral clarification

What is this old "lemon-squeezer" shaped pan

Why is "dark" an adverb in this sentence?

Alternatives to using writing paper for writing practice

Why didn't Al Powell investigate the lights at the top of the building?

HackerRank: Electronics Shop

Did the Shuttle's rudder or elevons operate when flown on its carrier 747?

Confused about 誘われて (Sasowarete)

(algebraic topology) question about the cellular approximation theorem

Variation in the spelling of word-final M

do not have power to all my breakers

What are the arguments for California’s nonpartisan blanket primaries other than giving Democrats more power?

Is killing off one of my queer characters homophobic?

Crab Nebula short story from 1960s or '70s

How to make "plastic" sounding distored guitar

Was adding milk to tea started to reduce employee tea break time?

Why linear regression uses "vertical" distance to the best-fit-line, instead of actual distance?

Will it hurt my career to work as a graphic designer in a startup for beauty and skin care?

Doing research in academia and not liking competition

Remove intersect line for one circle using venndiagram2sets

Is it rude to tell recruiters I would only change jobs for a better salary?

How are "soeben" and "eben" different from one another?

Align by center of symbol

Angular : add a fixed search barch to a mat-select dropdown

How to style a <select> dropdown with only CSS?Bootstrap - input-group-btn wants to float rightbootstrap-select plugin height issueHow can I get new selection in “select” in Angular 2?Binding select element to object in AngularJS Add action to change classStyling mat-select in Angular MaterialBootstrap (4.0) dropdown in navbar cannot position right in relation to viewportMat select dropdown with incremental searchAngular mat-autocomplete not showing options

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

1

I'm using a mat-select widget (of Angular-Material) in my app

I'm implementing a search bar at the top of the select drowpdown to filter options:

 <mat-select placeholder="Selectionner la boutique"
 id="libelleShop">
 <div id="custom-search-input" class="m-1 navbar-fixed-top">
 <input #shopKeyword matInput placeholder="Search" class="search-input" (keyup)="filterShopsByLibelle(shopKeyword.value)">
 <span class="input-group-btn">
 <button class="btn btn-danger" type="button">
 <span class="glyphicon glyphicon-search"></span>
 </button>
 </span>
 </div>

 <mat-option *ngFor="let shop of bad3ShopsListSortedByName"
 [value]="shop.edoId">
 shop.storeName
 </mat-option>
 </mat-select>

My purpose is how to keep the search Bard div (#custom-search-input) fixed on the top.

I've tried position: fixed but it seems to not work

Suggestions ??

css angular flexbox bootstrap-4

share|improve this question

edited Mar 26 at 7:41

Mukesh Verma

46555 silver badges99 bronze badges

asked Mar 26 at 6:35

firasKoubaafirasKoubaa

1,49466 gold badges2323 silver badges5353 bronze badges

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  better to use auto-complete of material with filter:material.angular.io/components/autocomplete/overview
  
  – לבני מלכה
  Mar 26 at 6:40
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  1. fixed top to what? 2.show us your css if you have
  
  – לבני מלכה
  Mar 26 at 6:50
  

  
  
  
  

add a comment | 

0

1

I'm using a mat-select widget (of Angular-Material) in my app

I'm implementing a search bar at the top of the select drowpdown to filter options:

 <mat-select placeholder="Selectionner la boutique"
 id="libelleShop">
 <div id="custom-search-input" class="m-1 navbar-fixed-top">
 <input #shopKeyword matInput placeholder="Search" class="search-input" (keyup)="filterShopsByLibelle(shopKeyword.value)">
 <span class="input-group-btn">
 <button class="btn btn-danger" type="button">
 <span class="glyphicon glyphicon-search"></span>
 </button>
 </span>
 </div>

 <mat-option *ngFor="let shop of bad3ShopsListSortedByName"
 [value]="shop.edoId">
 shop.storeName
 </mat-option>
 </mat-select>

My purpose is how to keep the search Bard div (#custom-search-input) fixed on the top.

I've tried position: fixed but it seems to not work

Suggestions ??

css angular flexbox bootstrap-4

share|improve this question

edited Mar 26 at 7:41

Mukesh Verma

46555 silver badges99 bronze badges

asked Mar 26 at 6:35

firasKoubaafirasKoubaa

1,49466 gold badges2323 silver badges5353 bronze badges

• 
  
  
  

  
  3
  

  
  
  
  
  
  

  
  
  better to use auto-complete of material with filter:material.angular.io/components/autocomplete/overview
  
  – לבני מלכה
  Mar 26 at 6:40
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  1. fixed top to what? 2.show us your css if you have
  
  – לבני מלכה
  Mar 26 at 6:50
  

  
  
  
  

add a comment | 

I'm using a mat-select widget (of Angular-Material) in my app

I'm implementing a search bar at the top of the select drowpdown to filter options:

 <mat-select placeholder="Selectionner la boutique"
 id="libelleShop">
 <div id="custom-search-input" class="m-1 navbar-fixed-top">
 <input #shopKeyword matInput placeholder="Search" class="search-input" (keyup)="filterShopsByLibelle(shopKeyword.value)">
 <span class="input-group-btn">
 <button class="btn btn-danger" type="button">
 <span class="glyphicon glyphicon-search"></span>
 </button>
 </span>
 </div>

 <mat-option *ngFor="let shop of bad3ShopsListSortedByName"
 [value]="shop.edoId">
 shop.storeName
 </mat-option>
 </mat-select>

My purpose is how to keep the search Bard div (#custom-search-input) fixed on the top.

I've tried position: fixed but it seems to not work

Suggestions ??

css angular flexbox bootstrap-4

share|improve this question

edited Mar 26 at 7:41

Mukesh Verma

46555 silver badges99 bronze badges

asked Mar 26 at 6:35

firasKoubaafirasKoubaa

1,49466 gold badges2323 silver badges5353 bronze badges

 <mat-select placeholder="Selectionner la boutique"
 id="libelleShop">
 <div id="custom-search-input" class="m-1 navbar-fixed-top">
 <input #shopKeyword matInput placeholder="Search" class="search-input" (keyup)="filterShopsByLibelle(shopKeyword.value)">
 <span class="input-group-btn">
 <button class="btn btn-danger" type="button">
 <span class="glyphicon glyphicon-search"></span>
 </button>
 </span>
 </div>

 <mat-option *ngFor="let shop of bad3ShopsListSortedByName"
 [value]="shop.edoId">
 shop.storeName
 </mat-option>
 </mat-select>

css angular flexbox bootstrap-4

css angular flexbox bootstrap-4

share|improve this question

edited Mar 26 at 7:41

Mukesh Verma

46555 silver badges99 bronze badges

asked Mar 26 at 6:35

firasKoubaafirasKoubaa

1,49466 gold badges2323 silver badges5353 bronze badges

share|improve this question

edited Mar 26 at 7:41

Mukesh Verma

46555 silver badges99 bronze badges

asked Mar 26 at 6:35

firasKoubaafirasKoubaa

1,49466 gold badges2323 silver badges5353 bronze badges

edited Mar 26 at 7:41

Mukesh Verma

46555 silver badges99 bronze badges

edited Mar 26 at 7:41

Mukesh Verma

46555 silver badges99 bronze badges

asked Mar 26 at 6:35

firasKoubaafirasKoubaa

1,49466 gold badges2323 silver badges5353 bronze badges

asked Mar 26 at 6:35

firasKoubaafirasKoubaa

1,49466 gold badges2323 silver badges5353 bronze badges

1 Answer
1

active

oldest

votes

0

Solution 1

<mat-select-search [formControl]="formControlName"></mat-select-search>

Add this tag inside mat-select and follow the steps in app.component.ts of StackBlitz

Solution 2

You can use Autocomplete of Angular material

https://material.angular.io/components/autocomplete/overview

share|improve this answer

answered Mar 26 at 6:44

Seba CherianSeba Cherian

87911 silver badge1414 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55351099%2fangular-add-a-fixed-search-barch-to-a-mat-select-dropdown%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Solution 1

<mat-select-search [formControl]="formControlName"></mat-select-search>

Add this tag inside mat-select and follow the steps in app.component.ts of StackBlitz

Solution 2

You can use Autocomplete of Angular material

https://material.angular.io/components/autocomplete/overview

share|improve this answer

answered Mar 26 at 6:44

Seba CherianSeba Cherian

87911 silver badge1414 bronze badges

add a comment | 

0

Solution 1

<mat-select-search [formControl]="formControlName"></mat-select-search>

Add this tag inside mat-select and follow the steps in app.component.ts of StackBlitz

Solution 2

You can use Autocomplete of Angular material

https://material.angular.io/components/autocomplete/overview

share|improve this answer

answered Mar 26 at 6:44

Seba CherianSeba Cherian

87911 silver badge1414 bronze badges

add a comment | 

Solution 1

<mat-select-search [formControl]="formControlName"></mat-select-search>

Add this tag inside mat-select and follow the steps in app.component.ts of StackBlitz

Solution 2

You can use Autocomplete of Angular material

https://material.angular.io/components/autocomplete/overview

share|improve this answer

answered Mar 26 at 6:44

Seba CherianSeba Cherian

87911 silver badge1414 bronze badges

<mat-select-search [formControl]="formControlName"></mat-select-search>

share|improve this answer

answered Mar 26 at 6:44

Seba CherianSeba Cherian

87911 silver badge1414 bronze badges

answered Mar 26 at 6:44

Seba CherianSeba Cherian

87911 silver badge1414 bronze badges

answered Mar 26 at 6:44

Seba CherianSeba Cherian

87911 silver badge1414 bronze badges