Лучшая на месте дополнительная ширина убивает расположение

Question

Я использую лучший на месте рельс для обработки inline-редактирования.

как вы можете видеть в этом примере, элемент ввода выскакивает, как только вы нажимаете на лучший текст на месте: Leon Bambrick

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

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

Answer 1

Я только что проверил вашу проблему с помощью инструмента разработчика, из styles.css загружается стиль для встроенного текста. и ширина:80%. Уверен, что если вы уменьшите это, ваша проблема будет решена.

Answer 2

Если вы посмотрите на страницу best_in_place GitHub, гем поддерживает следующие параметры, которые будут соответствовать вашим потребностям:

1. : html_attrs: Хеш аргументов html, таких как maxlength, default-value и т. д., которые будут установлены на визуализированном входе, а не на интервале best_in_place.
2. : inner_class: класс, который установлен для визуализированного ввода.

Вот как вы управляете внешним видом. И да, вы можете использовать некоторые глобальные настройки CSS по умолчанию для случаев, когда стиль является частью темы. В этом случае у вас есть что-то вроде span.best_in_place > form.form_in_place > input[type="text"] работать с.