Styjun

Manager is asking me to eat breakfast from now on

Difference between string += s1 and string=string +s1

Making an example from 'Clean Code' more functional

How deep is the Underdark? What is its max and median depth?

Why do we need an estimator to be consistent?

Why are flying carpets banned while flying brooms are not?

Why didn't Balak request Bilam to bless his own people?

How to tell readers that I know my story is factually incorrect?

A Real World Example for Divide and Conquer Method

Why is this guy handcuffed censored?

Can a creature sustain itself by eating its own severed body parts?

Why does airflow separate from the wing during stall?

What's the difference between 1kb(64x16) and 1kb(128x8) for EEPROM memory size?

ESTA Travel not Authorized. Accepted twice before!

Has anyone ever written a novel or short story composed of only dialogue?

Applying for jobs when I have an obvious scar

Have any lunar probes used a cold shield?

How far off did Apollo 11 land?

When will the last unambiguous evidence of mankind disappear?

BIP-23 criticism: Is bitcoin PoW actually sha256+merkleGeneration? Or have I misunderstood coinbase/append?

What does a Nintendo Game Boy do when turned on without a game cartridge inserted?

Host telling me to cancel my booking in exchange for a discount?

setcounter is not affecting numbering

Will copper pour help on my single-layer PCB?

Angular : how to keep a header fixed and always appearent when scrolling a dropdwon options list

How to code a div to be fixed while rest of content is scrollingJquery, show and layer divs when their checkboxs are selectedIs there a way to stop a vertical scrollbar from interfering with a horizontally flexed list with a fixed header?How to detect when an @Input() value changes in Angular?Dynamically align item with CSSHow to make 100% height behave as expected within a scrolling, fixed position header?Angular 4 focus on item on arrow down and scrollBorder css changes faster than transform rotateCSS To Make Vertical Scrolling Region Under Fixed Header?Javascript change currency always choosing first <option> from <select> dropdown list

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

-1

Under my App , i ve a mat-select widget, it's a list of options which i'm used to scroll within the list to see all the options:

I want to add a header on the top of the the options list , thus , it keeps always appearent while scrolling

<mat-select placeholder="Selectionner la boutique"
 id="libelleShop"
 #inputSelectShop
 [(value)]="selectedlibelleShopoValue"
 ngDefaultControl
 formControlName="libelleShop"
 (selectionChange)="onShopSelectionChanged($event)">
 /* THIS IS MY HEADER DIV */
 <div id="myHeader" class="m-2">
 <span class="myHeaderClass"></span>
 </div>
 <mat-option *ngFor="let shop of bad3ShopsListSortedByName"
 [value]="shop.edoId">
 shop.storeName
 </mat-option>
</mat-select>

How may i fix this div to be always on the top , and prevent it to diseppear while scrolling to the bottom of the list

Suggestions ?

html css angular twitter-bootstrap flexbox

share|improve this question

asked Mar 26 at 12:27

firasKoubaafirasKoubaa

1,49966 gold badges2323 silver badges5454 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  have you tried CSS position : sticky; ?
  
  – Adil
  Mar 26 at 12:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Adil it s no making any change
  
  – firasKoubaa
  Mar 26 at 12:36
  

  
  
  
  

add a comment | 

-1

Under my App , i ve a mat-select widget, it's a list of options which i'm used to scroll within the list to see all the options:

I want to add a header on the top of the the options list , thus , it keeps always appearent while scrolling

<mat-select placeholder="Selectionner la boutique"
 id="libelleShop"
 #inputSelectShop
 [(value)]="selectedlibelleShopoValue"
 ngDefaultControl
 formControlName="libelleShop"
 (selectionChange)="onShopSelectionChanged($event)">
 /* THIS IS MY HEADER DIV */
 <div id="myHeader" class="m-2">
 <span class="myHeaderClass"></span>
 </div>
 <mat-option *ngFor="let shop of bad3ShopsListSortedByName"
 [value]="shop.edoId">
 shop.storeName
 </mat-option>
</mat-select>

How may i fix this div to be always on the top , and prevent it to diseppear while scrolling to the bottom of the list

Suggestions ?

html css angular twitter-bootstrap flexbox

share|improve this question

asked Mar 26 at 12:27

firasKoubaafirasKoubaa

1,49966 gold badges2323 silver badges5454 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  have you tried CSS position : sticky; ?
  
  – Adil
  Mar 26 at 12:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Adil it s no making any change
  
  – firasKoubaa
  Mar 26 at 12:36
  

  
  
  
  

add a comment | 

Under my App , i ve a mat-select widget, it's a list of options which i'm used to scroll within the list to see all the options:

I want to add a header on the top of the the options list , thus , it keeps always appearent while scrolling

<mat-select placeholder="Selectionner la boutique"
 id="libelleShop"
 #inputSelectShop
 [(value)]="selectedlibelleShopoValue"
 ngDefaultControl
 formControlName="libelleShop"
 (selectionChange)="onShopSelectionChanged($event)">
 /* THIS IS MY HEADER DIV */
 <div id="myHeader" class="m-2">
 <span class="myHeaderClass"></span>
 </div>
 <mat-option *ngFor="let shop of bad3ShopsListSortedByName"
 [value]="shop.edoId">
 shop.storeName
 </mat-option>
</mat-select>

How may i fix this div to be always on the top , and prevent it to diseppear while scrolling to the bottom of the list

Suggestions ?

html css angular twitter-bootstrap flexbox

share|improve this question

asked Mar 26 at 12:27

firasKoubaafirasKoubaa

1,49966 gold badges2323 silver badges5454 bronze badges

<mat-select placeholder="Selectionner la boutique"
 id="libelleShop"
 #inputSelectShop
 [(value)]="selectedlibelleShopoValue"
 ngDefaultControl
 formControlName="libelleShop"
 (selectionChange)="onShopSelectionChanged($event)">
 /* THIS IS MY HEADER DIV */
 <div id="myHeader" class="m-2">
 <span class="myHeaderClass"></span>
 </div>
 <mat-option *ngFor="let shop of bad3ShopsListSortedByName"
 [value]="shop.edoId">
 shop.storeName
 </mat-option>
</mat-select>

html css angular twitter-bootstrap flexbox

html css angular twitter-bootstrap flexbox

share|improve this question

asked Mar 26 at 12:27

firasKoubaafirasKoubaa

1,49966 gold badges2323 silver badges5454 bronze badges

share|improve this question

asked Mar 26 at 12:27

firasKoubaafirasKoubaa

1,49966 gold badges2323 silver badges5454 bronze badges

asked Mar 26 at 12:27

firasKoubaafirasKoubaa

1,49966 gold badges2323 silver badges5454 bronze badges

asked Mar 26 at 12:27

firasKoubaafirasKoubaa

1,49966 gold badges2323 silver badges5454 bronze badges

1 Answer
1

active

oldest

votes

0

add the following to your css (you are missing the top: xxx px value) as this determines where to stick to exactly.

.m-2 
 position: sticky;
 top: 0px;
 z-index:1000;
 margin-bottom: <whatever you need>px;

share|improve this answer

edited Mar 26 at 14:49

answered Mar 26 at 13:22

jcuypersjcuypers

1,39611 gold badge1111 silver badges1919 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  that s better yeah , but something is missing , initially it's good , but when scrolling the options seems to be displayed in the same plan space with the searrch input , i think there is some margin to put
  
  – firasKoubaa
  Mar 26 at 14:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you can use z-index if needed, and I guess margin too. I dont know exactly what you want or how big everthing is or should be
  
  – jcuypers
  Mar 26 at 14:43
  
  

  
  
  
  

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%2f55357165%2fangular-how-to-keep-a-header-fixed-and-always-appearent-when-scrolling-a-dropd%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

add the following to your css (you are missing the top: xxx px value) as this determines where to stick to exactly.

.m-2 
 position: sticky;
 top: 0px;
 z-index:1000;
 margin-bottom: <whatever you need>px;

share|improve this answer

edited Mar 26 at 14:49

answered Mar 26 at 13:22

jcuypersjcuypers

1,39611 gold badge1111 silver badges1919 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  that s better yeah , but something is missing , initially it's good , but when scrolling the options seems to be displayed in the same plan space with the searrch input , i think there is some margin to put
  
  – firasKoubaa
  Mar 26 at 14:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you can use z-index if needed, and I guess margin too. I dont know exactly what you want or how big everthing is or should be
  
  – jcuypers
  Mar 26 at 14:43
  
  

  
  
  
  

add a comment | 

0

add the following to your css (you are missing the top: xxx px value) as this determines where to stick to exactly.

.m-2 
 position: sticky;
 top: 0px;
 z-index:1000;
 margin-bottom: <whatever you need>px;

share|improve this answer

edited Mar 26 at 14:49

answered Mar 26 at 13:22

jcuypersjcuypers

1,39611 gold badge1111 silver badges1919 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  that s better yeah , but something is missing , initially it's good , but when scrolling the options seems to be displayed in the same plan space with the searrch input , i think there is some margin to put
  
  – firasKoubaa
  Mar 26 at 14:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you can use z-index if needed, and I guess margin too. I dont know exactly what you want or how big everthing is or should be
  
  – jcuypers
  Mar 26 at 14:43
  
  

  
  
  
  

add a comment | 

add the following to your css (you are missing the top: xxx px value) as this determines where to stick to exactly.

.m-2 
 position: sticky;
 top: 0px;
 z-index:1000;
 margin-bottom: <whatever you need>px;

share|improve this answer

edited Mar 26 at 14:49

answered Mar 26 at 13:22

jcuypersjcuypers

1,39611 gold badge1111 silver badges1919 bronze badges

.m-2 
 position: sticky;
 top: 0px;
 z-index:1000;
 margin-bottom: <whatever you need>px;

share|improve this answer

edited Mar 26 at 14:49

answered Mar 26 at 13:22

jcuypersjcuypers

1,39611 gold badge1111 silver badges1919 bronze badges

answered Mar 26 at 13:22

jcuypersjcuypers

1,39611 gold badge1111 silver badges1919 bronze badges

answered Mar 26 at 13:22

jcuypersjcuypers

1,39611 gold badge1111 silver badges1919 bronze badges