How to stretch Map on a parental element

nikitaMe1nikov commented 6 years ago

Почему размеры передаются через width и height атрибуты? Можно же просто передать className и style в div-wrapper и воспользоваться магией flexbox'а

podvarkov commented 6 years ago

Не вижу в этом особой проблемы. я сделал div wrapper для карты, а самой карте дал width и height 100% и при любом изменении размера wrapper`a размер карты будет меняться.

igordata commented 6 years ago

А как ты ей 100% задал?

igordata commented 6 years ago

OK

class FillContainer extends React.Component {
    state = {width: '100%', height: '100%'};
    render() {
        const {width, height} = this.state;
        return (
            <YMaps>
                <Map state={mapState} width={width} height={height}/>
            </YMaps>
        );
    }
}

podvarkov commented 6 years ago

class FillContainer extends React.Component {
    render() {
        return (
           <div style={{width:'100%', height:'100%', position:'relative'}}
                <YMaps>
                    <Map state={mapState} width='100%' height='100%' />
                </YMaps>
            </div>
        );
    }
}

@igordata ну как то так

xfishernet commented 6 years ago

у меня так кстати не работает :-( в пикселах если задавать ширину и высоту, то норм. а если в %, то не работает :-(

xfishernet commented 6 years ago

почему то если задать height='100%' в компоненте Map, то высота в браузере 0px.

gribnoysup commented 5 years ago

Closed due to inactivity

tschin commented 4 years ago

почему то если задать height='100%' в компоненте Map, то высота в браузере 0px.

такая же проблема, как решить?

igordata commented 4 years ago

почему то если задать height='100%' в компоненте Map, то высота в браузере 0px.

такая же проблема, как решить?

Задать высоту родителя?

tschin commented 4 years ago

я пробовал вот так <div style={{width:'100%', height:'100%', position:'relative'}}>

  <div style={{width:'100%', height:'100%', position:'relative'}}>
          <YMaps>
              My awesome application with maps!
            <Map width='100%' height='100%' defaultState={{ center: [55.75, 37.57], zoom: 9 }} />
          </YMaps> 
          </div>

почему то если задать height='100%' в компоненте Map, то высота в браузере 0px.

такая же проблема, как решить?

Задать высоту родителя?

mmarkelov commented 4 years ago

@tschin @igordata Это особенность верстки в браузере. По умолчанию элементы растягивают по высоте контента и не имеют определенной высоты. При установке процентного значения высоты элемента нужно убедиться, что какой-нибудь из его родителей имеет высоту.

https://learn.javascript.ru/height-percent

Будет работать к примеру так: У родительского компонента position: relative:

 const style = {
    position: 'absolute',
    left: 0,
    top: 0,
    width: '100%',
    height: '70%'
  };

  return (
    <div className="App">
      <header className="App-header">
        <YMaps>
          <Map style={style} defaultState={{ center: [55.751574, 37.573856], zoom: 9 }} />
        </YMaps>
      </header>
    </div>
  );

gribnoysup / react-yandex-maps

How to stretch Map on a parental element #41