При разделении экрана на две части мой текст и кнопка перекрываются - PullRequest
Новая
       6

При разделении экрана на две части мой текст и кнопка перекрываются

0 голосов
/ 30 января 2020

Я работаю над приложением angular, когда я нажимаю кнопку, экран должен разделиться на две части. Проверьте этот URL для изображения Перед разделением

После нажатия кнопки экран разделится на две части. Проверьте URL для изображения После разделения экрана

, поэтому, когда я пытался перетащить экран A до конца, мои заголовок и кнопка перекрывались. Вот снимок , когда кнопка и заголовок перекрываются

Ниже приведен код 

<div class="container">
  <as-split style="height: 200px" gutterSize="10">
    <as-split-area>
      <div class="container">
        <div
          [ngClass]="
            buttonClicked
              ? 'col-lg-12 col-md-12 col-sm-12 col-xs-12'
              : 'col-lg-12 col-md-8 col-sm-6 col-xs-4'
          "
        >
          <div class="jumbotron">
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <h1 >Screen A</h1>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                  <button class="btn btn-primary" (click)="onClick()">
                    click here
                  </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </as-split-area>
    <as-split-area *ngIf="buttonClicked">
      <div class="container">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="jumbotron">
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
              <h1 style="word-break: break-all;">Screen B</h1>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <button class="btn btn-primary">
                  click here
                </button>
            </div>
          </div>          
        </div>
      </div>
    </as-split-area>
  </as-split>
</div>

Я не могу решить эту проблему. Есть идеи, как решить эту проблему?

...