Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Problem z wyświetlaniem map na urządzeniach mobilnych, Problem z wyświetlaniem map na urządzeniach mobilnych
krzesik
post 29.05.2020, 09:47:44
Post #1





Grupa: Zarejestrowani
Postów: 476
Pomógł: 1
Dołączył: 25.08.2012

Ostrzeżenie: (0%)
-----

Witam,
trafiłem na problem z którym nie mogę sobie poradzić.
Mam skrypt który wyświetla mapę. W wersji PC jest wszystko OK
w podglądzie mam: style="position: relative; overflow: hidden;"

jeśli wyświetlam na telefonie zmienia się wartość style na:
style="position: relative; overflow: hidden; height: 0px;"

jeśli zmieniam ręcznie height:100% to jest ok, ale gdzie to zmienić w kodzie styli? poroszę o podpowiedź.

sam plik ze stylami wygląda tak:
[HTML] pobierz, plaintext 
  1. #map_canvas { float:left; border:1px solid #000;}
  2. ul#markerTypes { float:left; width:500px; list-style:none; padding:0; }
  3. ul#markerTypes li { padding:10px; }
  4. ul#markerTypes li label{ color: #000; }
  5.  
  6.  
  7.  
  8. html, body, .container-fluid, .row, .map { height: 100% }
  9.  
  10. /*Hide for mobile, show later*/
  11. .sidebar {
  12.     display: none;
  13. }
  14. @media (min-width: 768px) {
  15.     .sidebar {
  16.         position: fixed;
  17.         top: 51px;
  18.         bottom: 0;
  19.         left: 0;
  20.         z-index: 1000;
  21.         display: block;
  22.         padding: 0px !important;
  23.         overflow-x: hidden;
  24.         overflow-y: auto;  /*Scrollable contents if viewport is shorter than content.*/
  25.         background-color: #f5f5f5;
  26.         border-right: 1px solid #eee;
  27.     }
  28. }
  29. .ui-autocomplete {
  30.     background-color: #fff;
  31.     width: 410px;
  32.     border: 1px solid #cfcfcf;
  33.     list-style-type: none;
  34.     padding-left: 0;
  35. }
  36. #nxIK_search {
  37.     position: relative;
  38.     width: 400px;
  39. }
  40. #nxIK_topbar {
  41.     background-color: #000;
  42.     color: #fff;
  43.     position: absolute;
  44.     overflow: hidden;
  45.     z-index: 3;
  46. }
  47. #nxIK_topbar a {
  48.     color: #fff;
  49. }
  50. .map {
  51.     /*width: 75%;*/
  52.     height: 100%;
  53.     position: relative;
  54.     border: 0 red solid;
  55.     padding-right: 0px;
  56.     padding-left: 40px;
  57. }
  58. #nxIK_map {
  59.     width:100%;
  60.     height: 100%;
  61.     height:calc(100% - 0px);
  62.     /*width: 100%;*/
  63.     /*height: 100%;*/
  64.     /*overflow: hidden;*/
  65.     /*max-width: 1600px;*/
  66.     /*max-height: 1000px;*/
  67. }
  68. .nxIK_mono {
  69.     font-family: monospace;
  70. }
  71. #nxIK_lonlat {
  72.     border: none;
  73.     background-color: #aaa;
  74.     font-family: monospace;
  75. }
  76. #nxIK_checkboxContainer {
  77.     position: absolute;
  78.     width: 144px;
  79.     height: 270px;
  80.     border: 1px #000 solid;
  81.     background: #eee;
  82.     left: 20px;
  83.     top: 290px;
  84.     opacity: .65;
  85.     z-index: 3;
  86. }
  87. .inputZoom {
  88.     margin: 0;
  89.     padding: 0;
  90. }
  91. #nxIK_checkboxContainer input {
  92.     margin-top: 10px;
  93. }
  94. .nxIK_clustersize1 {
  95.     font-family: arial;
  96.     display: block;
  97.     position: relative;
  98.     left: -26px;
  99.     top: -26px;
  100.     text-align: center;
  101.     line-height: 52px;
  102.     font-size: 12px;
  103.     font-weight: 700;
  104.     white-space: nowrap;
  105.     color: #000;
  106.     background: url(../img/m1.png) no-repeat 0 0;
  107.     width: 53px;
  108.     height: 52px;
  109. }
  110. .nxIK_clustersize2 {
  111.     font-family: arial;
  112.     display: block;
  113.     position: relative;
  114.     left: -28px;
  115.     top: -28px;
  116.     text-align: center;
  117.     line-height: 55px;
  118.     font-size: 12px;
  119.     font-weight: 700;
  120.     white-space: nowrap;
  121.     color: #000;
  122.     background: url(../img/m2.png) no-repeat 0 0;
  123.     width: 56px;
  124.     height: 55px;
  125. }
  126. .nxIK_clustersize3 {
  127.     font-family: arial;
  128.     display: block;
  129.     position: relative;
  130.     left: -33px;
  131.     top: -33px;
  132.     text-align: center;
  133.     line-height: 65px;
  134.     font-size: 12px;
  135.     font-weight: 700;
  136.     white-space: nowrap;
  137.     color: #000;
  138.     background: url(../img/m3.png) no-repeat 0 0;
  139.     width: 66px;
  140.     height: 65px;
  141. }
  142. .nxIK_clustersize4 {
  143.     font-family: arial;
  144.     display: block;
  145.     position: relative;
  146.     left: -39px;
  147.     top: -39px;
  148.     text-align: center;
  149.     line-height: 77px;
  150.     font-size: 12px;
  151.     font-weight: 700;
  152.     white-space: nowrap;
  153.     color: #000;
  154.     background: url(../img/m4.png) no-repeat 0 0;
  155.     width: 78px;
  156.     height: 77px;
  157. }
  158. .nxIK_clustersize5 {
  159.     font-family: arial;
  160.     display: block;
  161.     position: relative;
  162.     left: -45px;
  163.     top: -45px;
  164.     text-align: center;
  165.     line-height: 89px;
  166.     font-size: 12px;
  167.     font-weight: 700;
  168.     white-space: nowrap;
  169.     color: #000;
  170.     background: url(../img/m5.png) no-repeat 0 0;
  171.     width: 90px;
  172.     height: 89px;
  173. }
  174. #nxIK_Clustering_span {
  175.     display: none;
  176. }
  177. .form-signin {
  178.     max-width: 330px;
  179.     padding: 15px;
  180.     margin: 0 auto;
  181. }
  182. .form-signin .form-signin-heading,
  183. .form-signin .checkbox {
  184.     margin-bottom: 10px;
  185. }
  186. .form-signin .checkbox {
  187.     font-weight: normal;
  188. }
  189. .form-signin .form-control {
  190.     position: relative;
  191.     height: auto;
  192.     -webkit-box-sizing: border-box;
  193.     -moz-box-sizing: border-box;
  194.     box-sizing: border-box;
  195.     padding: 10px;
  196.     font-size: 16px;
  197. }
  198. .form-signin .form-control:focus {
  199.     z-index: 2;
  200. }
  201. .form-signin input[type="email"] {
  202.     margin-bottom: -1px;
  203.     border-bottom-right-radius: 0;
  204.     border-bottom-left-radius: 0;
  205. }
  206. .form-signin input[type="password"] {
  207.     margin-bottom: 10px;
  208.     border-top-left-radius: 0;
  209.     border-top-right-radius: 0;
  210. }
  211. .omb_btn-facebook  {
  212.     background: #3b5998 !important;
  213.     color: white !important;
  214. }
  215. .omb_btn-facebook:hover {
  216.     background: #3b5998 !important;
  217.     color: white !important;
  218. }
  219. html, body {
  220.     height: 100%;
  221.     width: 100%;
  222. }
  223.  
  224. @media (min-width: 1000px) {
  225.     .navbar {
  226.         padding-right: 15px;
  227.         margin-bottom: 0px;
  228.     }
  229. }
  230.  
  231. .fa-2 {
  232.     font-size: 2em !important;
  233.     margin-right: 10px;
  234. }
  235. .mt5 { margin-top:5px; }
  236. .mt7 { margin-top:7px; }
  237. .mt10 { margin-top:10px; }
  238. .mt15 { margin-top:15px; }
  239. .mt17 { margin-top:17px; }
  240. .mt30 { margin-top:30px; }
  241. .mb5 { margin-bottom:5px; }
  242. .mb7 { margin-bottom:7px; }
  243. .mb10 { margin-bottom:10px; }
  244. .mb15 { margin-bottom:15px; }
  245. .mb17 { margin-bottom:17px; }
  246. .mb30 { margin-bottom:30px; }
  247. #footer {
  248.     color: #101010;
  249.     margin-bottom: 10px;
  250. }
  251. #map-canvas {
  252.     width:570px;
  253.     height:400px;
  254. }
  255.  
  256. /*******************************
  257. * MODAL AS LEFT/RIGHT SIDEBAR
  258. * Add "left" or "right" in modal parent div, after class="modal".
  259. *******************************/
  260. .modal.left .modal-dialog,
  261. .modal.right .modal-dialog {
  262.     position: fixed;
  263.     margin: auto;
  264.     width: 320px;
  265.     height: 100%;
  266.     -webkit-transform: translate3d(0%, 0, 0);
  267.     -ms-transform: translate3d(0%, 0, 0);
  268.     -o-transform: translate3d(0%, 0, 0);
  269.     transform: translate3d(0%, 0, 0);
  270. }
  271.  
  272. .modal.left .modal-content,
  273. .modal.right .modal-content {
  274.     height: 100%;
  275.     overflow-y: auto;
  276. }
  277.  
  278. .modal.left .modal-body,
  279. .modal.right .modal-body {
  280.     padding: 15px 15px 80px;
  281. }
  282.  
  283. /*Left*/
  284. .modal.left.fade .modal-dialog{
  285.     left: -320px;
  286.     -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  287.     -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  288.     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  289.     transition: opacity 0.3s linear, left 0.3s ease-out;
  290. }
  291.  
  292. .modal.left.fade.in .modal-dialog{
  293.     left: 0;
  294. }
  295.  
  296. /*Right*/
  297. .modal.right.fade .modal-dialog {
  298.     right: -320px;
  299.     -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  300.     -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  301.     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  302.     transition: opacity 0.3s linear, right 0.3s ease-out;
  303. }
  304.  
  305. .modal.right.fade.in .modal-dialog {
  306.     right: 0;
  307. }
  308.  
  309. /* ----- MODAL STYLE ----- */
  310. .modal-content {
  311.     border-radius: 0;
  312.     border: none;
  313. }
  314.  
  315. .modal-header {
  316.     border-bottom-color: #EEEEEE;
  317.     background-color: #FAFAFA;
  318. }
  319. .text-white {
  320.     color: #fff;
  321.     font-weight: 100;
  322. }
  323. #list-column {
  324.     padding-left: 0px;
  325.     padding-right: 0px;
  326. }
  327. #list-column .panel {
  328.     border-radius: 0px;
  329. }
  330. #list-column .panel-heading {
  331.     border-radius: 0px;
  332. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.04.2024 - 20:12
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn