CSS dinamisks div izmērs

[AndrisBB]

Varbūt te ir kāds CSS gudrinieks.

 

Netieku skaidrībā ar div izmēriem.

Pieņemsim ir main divs kuram ir divi child, labajā pusē ir fiksēta izmēra side panelis un kreisajā dinamiska izmēra divs.

 

 

Nospiežot menu pogu no kreisās puses parādās menu, paņemot 10% ekrāna (vēlāk uztaisīsu fiksētu) un uzliekot marginu no kreisās uz main div, tādā veidā saspiežot to.

Viss lieliski, bet tas dinamiskais divs uzbrauc pa virsu kreisās puses divam, nevis samazina savu izmēru. Kā šo atrisināt, neesu web programmētājs tāpēc esu iesprūdis te.

Izbraucošais menu ir no šejienes https://www.w3schools.com/w3css/w3css_sidenav.asp

Labots Februāris 21, 2017 - AndrisBB

[rejectee]

Varianti varētu būt izmantot float/position, iespējams vēl citi.

Piemēri uz fikso:

 

https://jsfiddle.net/soL7p33c/

https://jsfiddle.net/v3d4vdpm/

 

[AndrisBB]

Vaina laikam tomēr būs pašā maps componentā, jo ar tukšiem diviem viss strādā kā vajag.

Kautkur dziļi React karšu komponentā ir definēti stili kā absolute, tas te visu jauc

  var mapStyles = {
    container: {
      position: 'absolute',
      width: '100vw',
      height: '100vh'
    },
    map: {
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      top: 0
    }
  };

 Imantoju šo komponentu

https://github.com/fullstackreact/react-yelp-clone

[Eric]

1. Ieliec to karti iframe, tad vw un vh attieksies uz iframe nevis logu un varēsi regulēt kartes izmērus mainot iframe izmēru

2. Dinamiski ar JS maini izmērus kā vajag