Wpis z mikrobloga

Mam diva z tekstem <div> { text } </div>, raz na polskim, raz na angielskim języku w #react
- w języku polskim zmienna text ma tekest (lorem ipsum), więc diva ma jakąś wysokość,
- ale w języku angielski, jest on pusty,

natomiast div ma dalej wysokość, tylko mniejszą. Dlaczego? Czyżbym źle korzystał z reacta? Może powinno być { text[lang] } gdzie lang to po prostu oznaczenie języka i wtedy react by wszystko dobrze przeliczył?

Używam referencji do mierzenia wysokości: aboutMeRef.current.clientHeight

#javascript #programowanie
  • 9
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@pyroxar: opcje masz przynajmniej 2:
1. wstaw

<div> { text || '&nbsp;'} </div>
2. Daj min height na div z wysokością line-height tekstu

Puste divy jedynie wysokość z paddingów bądź ustawionych min-height/height mają
  • Odpowiedz
@pyroxar: wrzuć na jakiś sandbox bo pusty div nie może mieć takiej wysokości (no chyba, że ma style) albo wrapper to grid/flex i się div dostosowuje.
  • Odpowiedz
  • 0
@lobo: @Pasterz30 proszę bardzo:
https://codesandbox.io/p/sandbox/quirky-benji-59tl3s?file=%2Fsrc%2FApp.js&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cly8kn9n100062v6faiaksl50%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cly8kn9n100022v6f1bidpklj%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cly8kn9n100032v6fjpovnr5x%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cly8kn9n100052v6foudwfggk%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B100%252C0%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cly8kn9n100022v6f1bidpklj%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cly8kn9n100012v6f3ham6at1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522cly8kpopt003l2v6fqtwuy4r3%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A17%252C%2522startColumn%2522%253A29%252C%2522endLineNumber%2522%253A17%252C%2522endColumn%2522%253A29%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cly8kn9n100022v6f1bidpklj%2522%252C%2522activeTabId%2522%253A%2522cly8kpopt003l2v6fqtwuy4r3%2522%257D%252C%2522cly8kn9n100052v6foudwfggk%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cly8kn9n100042v6f42h9xohm%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cly8kn9n100052v6foudwfggk%2522%252C%2522activeTabId%2522%253A%2522cly8kn9n100042v6f42h9xohm%2522%257D%252C%2522cly8kn9n100032v6fjpovnr5x%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cly8kn9n100032v6fjpovnr5x%2522%257D%257D%252C%2522showDevtools%2522%253Afalse%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
  • Odpowiedz
  • 0
@lobo: no to nie wiem, u mnie jest w takim razie coś źle bo mam wysokość 1200px i 1080 (dla pustego). Może to css gdzie walnięte, flexa mi się zachciało i wariuje teraz.
  • Odpowiedz
  • 0
@lobo: "It's likely that the Sandbox you're trying to access doesn't exist or you don't have the required permissions to access it."
  • Odpowiedz