Избавьтесь от пробелов в нижней части диалогового окна Mat - PullRequest
Новая
       149

Избавьтесь от пробелов в нижней части диалогового окна Mat

0 голосов
/ 02 августа 2020

Я использую Angular Материал для своего Angular приложения. В настоящее время у меня есть диалоговое окно, в котором отображается информация о публикации. Тем не менее, в нижней части диалогового окна есть много раздражающих пробелов, от которых я хочу избавиться. Как это сделать?

Вот изображение:

enter image description here

HTML

S CSS

  body{
    position: relative;
  }


.postImage{
  height: 80%;
  width: 100%;
}

.bigImage{
  text-align: center;
  display: block;
}

#postForm{
  height: 80vh;
  width: 100%;
  display: box;
}


mat-dialog-container{
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 10px !important;
  padding-bottom: 0px !important;
}

Ответы [ 3 ]

1 голос
/ 02 августа 2020

Вы должны убрать высоту из #postForm. A height: 80vh заставляет его занимать 80% высоты экрана.

Поскольку вы предоставляете ему фиксированную высоту, останется пустое место, если изображение не займет все пространство .

Также ваш postImage имеет высоту 80%, оставшееся место будет пустым.

0 голосов
/ 02 августа 2020 
.postImage{
  height: auto; or 100%
  width: 100%;
}

или вообще не указывать высоту

0 голосов
/ 02 августа 2020 
  body{  
  position: relative;  
  }  
  .postImage{  
               /* height: 80%;   this is your bug */  
  width: 100%;  
  }  
  .bigImage{     /* you don't need this level and even if use <figure></figure> not <div></div> */  
  text-align: center;  /* this means empty space on sides when text is to short to fill, this class hasn't setted width, so it should adjust to content witch is an img - block element without any wraps */
  display: block;   
  }   
  #postForm{  
  height: 80vh;       /* this one may caused problems too */  
  width: 100%;   
  display: box;      /* incorrect value */   
  }  
  mat-dialog-container{  
  /* padding-right: 30px; */    
  /* padding-left: 30px; */   
  /* padding-top: 10px !important; don't use !important instead of debugging */    
  /* padding-bottom: 0px !important; */  
  padding: 10px 30px 0;  /* nice and readable instead of 4 lines */  
  }

Если вы установите строгое значение высоты, не удивляйтесь, если оно сохранится. Хорошо подготовленный css - это инвестиция, работает должным образом и без головной боли в обслуживании.

...