Google наносит на карту InfoWindow - вертикальный свиток появляется только, используя <br/>

I'm using Google Maps info window which gets populated with the text from 3 input fields. First input field is TITLE, second ADDRESS (uses standard Google autocomplete) and third DESCRIPTION. So everything looks user friendly I added
between them so each input is shown separated in info window. This is how i did it:

return (name || "") + "
" + (addressOrCoordinates || "") + "
" + (additionalDetails || "");

Но то, когда адрес - просто немного более длинный вертикальный свиток, появляется, который является странным, потому что, если вы пишете 300 знакам в области описания, информационное окно не показывает вертикальный свиток, это приятно приспосабливает infowindow размер...

So i tried removing
and everything works without vertical scroll even if address is miles long. So I thought that
is messing with address, so i tested litlle bit more and it seems address is affected with
if its infront of adress but not if its after...

So it seems if infowindow contains normal text it dosent show verticall scroll even if there is alot of text and even if this text is separated with
but why does verticall scroll apperas when using
infront of the adress? Is there any other way i can make adress input go to new line in infowindow without this verticall scroll appearing?

Переполнение BTW CSS не работает, и я использую API v3

2
htmlEncode() не важен для этого примера. я отредактировал свой вопрос и удалил его
добавлено автор Dreadlord, источник
Да натягивают, содержит места (не  )
добавлено автор Dreadlord, источник
но преподаватель скрипки показывает свиток даже с длинным адресом и
, таким образом, кажется, что проблема решена там?
добавлено автор Dreadlord, источник
попытка печатая этот адрес: Ulica Grada Vukovara, Загреб, Hrvatska или этот: Ulica у меня есть Marinkovića 12, Риека, Hrvatska
добавлено автор Dreadlord, источник
Больше, чем длина текста или использование s здесь важно, если текст содержит знаки, где браузер может сломать линию (например, пространство). Это неясно до сих пор, тем более, что долго, поскольку никто не знает, какой htmlEncode() делает.
добавлено автор Dr.Molle, источник
Вы все еще didn' t говорят, есть ли места в последовательности (кроме  ). Браузер может только сломать линию в конкретных знаках.
добавлено автор Dr.Molle, источник
та же самая проблема здесь? jsfiddle.net/doktormolle/UPWAK
добавлено автор Dr.Molle, источник
почему хотели бы Вы осуществлять его когда it' s та же самая проблема в скрипке?
добавлено автор Dr.Molle, источник
Меня посетили ваша карта ( auto-karta-hrvatske.com/prerelease3 ). Можете вы, пожалуйста, отправлять адрес в качестве примера, который вызывает scrollbars (для меня там isn' t любая проблема)
добавлено автор Dr.Molle, источник
В котором браузере это происходит (также никакие проблемы для меня с этими адресами)?
добавлено автор Dr.Molle, источник
Пожалуйста, опубликуйте код, с которым вы добираетесь, "производят", когда это происходит.
добавлено автор Dr.Molle, источник

4 ответы

Это, кажется, одна из самых сумасшедших ошибок, которые я видел в течение долгого времени.

Я не могу сказать вам, почему это происходит, но для меня это работает, когда я удаляю смелую отмеченную часть (семейство шрифтов) followingCSS:

#mapE { text-align:center; font-family:Arial, Helvetica, sans-serif; color:#333; font-size:14px; overflow:hidden; }

Это не проблема ширины шрифта (там, например, не проблема, когда я использую Verdana, который намного более широк, чем Arial ).The, API должен вычислить размер infoWindow, прежде чем это откроется, кажется, что это - пункт, где что-то пошло не так, как надо, когда использование Arial .

Таким образом, я предложил бы использовать другой основной шрифт окон, чем Arial (, Tahoma должен быть прекрасным, никакая проблема там для меня),

4
добавлено
это на самом деле работает!:) ха-ха я не делаю beleave это. СПАСИБО!!!!
добавлено автор Dreadlord, источник
Хорошо работает для меня 10x;)
добавлено автор Hristo Enev, источник
Я на самом деле решил ту же самую проблему, легко добавляющую один или несколько   в конце

так, чтобы коробка расширилась достаточно и исчезает scrollbar!: D не уверенный, насколько сильный это решение жестко!

добавлено автор Anze, источник

это также работает, если вы добавляете его к своему CSS:

.gm-style-iw div {overflow:visible !important;}

в зависимости от содержания вашего infowindow это удаляет ужасные вертикальные полосы прокрутки полностью. Это переписывает вычисленный стиль, обеспеченный API Google.

2
добавлено

Таким образом, я был в аналогичной ситуации, как вы были. Я хотел, чтобы содержание в моем infoWindow завилось (просто Y, завиваются не X свитков), но я хотел отключить автоматический свиток Google API infoWindow, потому что это покрывало мое содержание. Как многие люди я обернул свое infowindow содержание в отделение и дал ему id #info_window. Тогда я хотел удостовериться, что содержание имело maxheight и было устроено так, чтобы его полоса прокрутки не покрывала содержание (и мне была нужна полоса прокрутки, чтобы только завиться вертикально, другое соображение). Наконец, я использовал один из ответов, которые, как находят здесь, гарантировали, что только МОЯ полоса прокрутки разоблачала не автоматический Google один. Таким образом, мой CSS закончил тем, что был похож на это:

#info_window{
  width: 350px;
}

.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
  max-height: 280px;
  padding: 0px 10px 5px 5px;
  overflow-y: scroll;
  overflow-x: visible;
}

.gm-style-iw div {
  overflow:visible !important;
}
1
добавлено

Я нашел что добавление пробел: nowrap; к содержанию infowindow также, кажется, решает проблемы с scrollbars. Является ли это жизнеспособным вариантом, конечно, зависит от фактического содержания, но это мог бы быть выбор.

1
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском