Как сделать веб-страницу (панель управления) отзывчивой, включая карту (листовку) в angular - PullRequest
Новая
       19

Как сделать веб-страницу (панель управления) отзывчивой, включая карту (листовку) в angular

0 голосов
/ 12 июля 2020

Я хочу, чтобы моя страница панели инструментов была отзывчивой, и она также включает карту ** (Leaflet OpenStreet map) **. Я пробовал, но она не показывает идеальных результатов.

панель инструментов .component. css

#map{
  height: 550px;
  width: 920px;
  border: 1px solid brown;
margin-left: 5px;
position: relative;
}
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;

  padding: 8px;
  color: white;
  text-decoration: none;
  font-size: 20px;
 
}
.text{
  position: absolute;
margin-top: -589px;
 margin-left: 950px;
   width:400px;
   padding: 19px;
   background:transparent;
   border-radius:0px;
   border:0px;
   border-bottom: 1px solid grey;
   font-size: 17px;
   color: white;
   height: 40px;
   }
.list{max-height:88vh;
  margin:0;
  overflow:auto;
  padding:0;
}

** Я использовал медиа-запросы css для отзывчивых страниц **

 @media only screen and (max-width: 480px) {

  .navbar a {
    float: none;
width: 100%;   
                    }
            #map{
              margin: 0;
               padding: 0;
                width:100%;
                height: 400px;
overflow: auto;
            }
    
.text{
  width: 100%;
display:block;
  font-size: 15px;
  bottom: 0px;
float: left;
margin-left: 0px;
margin-top: 100%;
}

.list{max-height:100vh;
  margin-top:135px;
  overflow: auto;
  padding:0;
}


}

dashboard.component. html

<div class="navbar" >
      <img src="assets/img/img.jpeg" height="45" width="45" style="mix-blend-mode: multiply;opacity: 0.6;"  >
        <a class="active" href="#"> Home</a> 
        <a href="#"> About</a> 
        <a href="#" > Notifications</a>
        <a href="#" > Settings</a>
        <a href="#">User Info</a>
       <a href="#">Profile</a>
        <a href="#"> Logout</a>
    
    </div>
    

        <div id="map">
      </div>
    <div class="text">
      <br>
    <ul class="list">
        <li *ngFor="let x of data" class="fetch">
         {{x.data1}}<br>
         {{x.data2}}
      
    </li>
</li>
</div>

Я пробовал много способов, но он не реагирует. Я хочу, чтобы моя страница реагировала на карту Google.

1 Ответ

0 голосов
/ 14 июля 2020

Кстати, ваша выше HTML наценка не работает и недействительна или закрывается должным образом. Может вызвать проблемы в браузерах, особенно с визуальным представлением. См. Двойные закрывающие теги в строке перед последней строкой вашей разметки HTML. 

<div class="navbar">
  <img src="assets/img/img.jpeg" height="45" width="45" style="mix-blend-mode: multiply;opacity: 0.6;"/>
  <a class="active" href="#"> Home</a>
  <a href="#">About</a>
  <a href="#">Notifications</a>
  <a href="#">Settings</a>
  <a href="#">User Info</a>
  <a href="#">Profile</a>
  <a href="#">Logout</a>
</div>


<div id="map"></div>

<div class="text">
  <ul class="list">
    <li *ngFor="let x of data" class="fetch">
      {{x.data1}}<br>
      {{x.data2}}
    </li>
  </ul>
</div>
...