Clear button for md-select arrow overflow

Question

I have a md-select inside md-grid-list which is part of md-card content that looks like this:

<md-grid-tile>
     <md-select id="typ" [(ngModel)]="doc.docType" placeholder="Typ Dokumentu">
         <md-option *ngFor="let state of states" [value]="state">{{ state}}</md-option>
     </md-select>

     <button class="clear" [hidden]="!doc.docType" (click)="clear('docType')">X</button>

</md-grid-tile>

As you can read, 'X' buttor renders when there is value selected and clears it on click event. Just sets md-select model property to undefined

Now, I would like to position 'X' button over the mat-select-arrow to hide/cover it.

Can you help me to css style the 'clear' button to move a bit left and hide that arrow? When setting margin-right it only moves the whole md-select left but does not cover the arrow.

I believe this can be helpful to many.

Thanks!

Answer 1

This is the basic example for css positioning if you need to shift x to right side you have to play with position just like a following example.

.box {
  width: 300px;
  height: 30px;
  position: relative;
  background: #ddd;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.cross {
  position: absolute;
  top: 5px; /* You can play with this property */
  right: 5px; /* You can play with this property */
  font-size: 14px;
  color:#000;
  cursor: pointer;
}

<div class="box">
  <span class="cross">x</span>
</div>