Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67411

How to resolve 3 overlapping buttons?

$
0
0

I have 3 dropdown buttons, on mobile view instead of displaying horizontally they are overlapping on each other. I think .filter-check:checked+label class properties needs to be reviewed. What changes can I make in my code so that buttons are displayed horizontally?

Here is my scss code

@media (min-width: 700px) {
  .filter-button {
    display: none;
  }

  .filter-check {
    display: none;
  }
}

@media (max-width: 700px) {
  .filter {
    display: none;
  }

  .filter-check {
    display: none;
  }
}

@media screen and (max-width: 700px) {
  .filter-button {
    background: white;
    border: 1px solid black;
    border-radius: 2px;
    color: dark-gray;
    float: right;
    font-family: font-family-nimbus-sans-bold;
    font-size: 18px;
    height: 48px;
    text-align: left;
    width: 100%;
  }
}

// sass-lint:disable force-pseudo-nesting

.filter-check:checked+label {     ---------------> I think this class properties needs to be checked
  +.filters {
    .filter {
      background-color: white;
      display: block;
      height: 100%;
      left: 0;
      overflow-y: auto;
      padding-bottom: 65px;
      position: fixed;
      top: 0;
      width: 100%;
    }

    ::ng-deep {
      .overlay-drop {
        height: auto;
        position: relative;
      }

      .open {
        ul {
          position: relative;
          top: auto;
        }
      }
    }
  }
}


.filters {
  display: flex;
  flex-wrap: wrap;


  @media screen and (min-width: 700px) {
    .filter {
      background-color: white;
      border: 1px solid black;
      border-radius: 2px;
      flex-basis: 100%;
      flex-grow: 1;
      flex-shrink: 1;
      height: 72px;
      margin-right: 10px;
      max-width: 224px;

      &.disabled {
        border-color: silver-chalice;
        color: silver-chalice;
        opacity: .4;
        pointer-events: none;

        &:hover {
          cursor: no-drop;
        }
      }
    }
  }
}

Here is my html code

<ng-container>
    <label class="filter-button" for="button" (click)="xy()">Coders</label>
    <div class="filters">
      <div class="filter">
        <overlay-drop [dropdownLabel]="i18nService"
          [modelDropdown]="a">
        </overlay-drop>
      </div>
      <div class="filter">
        <overlay-drop [dropdownLabel]="i18nService"
          [modelDropdown]="b">
        </overlay-drop>
      </div>
      <div class="filter">
        <overlay-drop [dropdownLabel]="i18nService"
          [modelDropdown]="c">
        </overlay-drop>
      </div>
      <div class="filter">
        <overlay-drop [dropdownLabel]="i18nService"
          [modelDropdown]="shareClassData"></overlay-drop>
      </div>
    </div>

  </ng-container>
 /ng-container>


Viewing all articles
Browse latest Browse all 67411

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>