Ширина input'a через CSS
От: Grelkin  
Дата: 01.07.04 09:16
Оценка:
Что-то не пойму как сделать, чтобы input type="Text" принимал максимально возможную ширину средствами CSS. То есть если, например, есть таблица :

<table width="100%">
<tr>
  <td width="50%">
    Some text
  </td>
  <td width="50%">
    <input class="cellTextEdit" type="Text" name="edit_name" value="edit_value">
  </td>
</tr>
</table>


как бы определить cellTextEdit чтобы input принимал нужные размеры ?
Re: Ширина input'a через CSS
От: Сим Россия  
Дата: 01.07.04 09:19
Оценка:
G>как бы определить cellTextEdit чтобы input принимал нужные размеры ?

width:100%;
Re[2]: Ширина input'a через CSS
От: Grelkin  
Дата: 01.07.04 09:25
Оценка:
Здравствуйте, Сим, Вы писали:

G>>как бы определить cellTextEdit чтобы input принимал нужные размеры ?

Сим>width:100%;

Это не проходит, так как если длина edit_value велика, то всё это чудо благополучно расползается, что не есть гуд.
То есть ежели сделать так :

INPUT.cellTextEdit  {
    width : 100%;
}
...
    <input class="cellTextEdit" type="Text" name="edit_name" value="edit_valueedit_valueedi
t_valueedit_valueedit_valueedit_valueedit_valueedit_value">
...


то input растягивается на всю длину строки "edi.......ue", соответсвенно, если эта строка опупенная, то и получается все очень опупенно
Re[3]: Ширина input'a через CSS
От: Сим Россия  
Дата: 01.07.04 09:41
Оценка:
Здравствуйте, Grelkin, Вы писали:

G>Здравствуйте, Сим, Вы писали:

G>>>как бы определить cellTextEdit чтобы input принимал нужные размеры ?

Сим>>width:100%;

G>Это не проходит, так как если длина edit_value велика, то всё это чудо благополучно расползается, что не есть гуд.
G>То есть ежели сделать так :

G>
G>INPUT.cellTextEdit  {
G>    width : 100%;
G>}
G>...
G>    <input class="cellTextEdit" type="Text" name="edit_name" value="edit_valueedit_valueedi
G>t_valueedit_valueedit_valueedit_valueedit_valueedit_value">
G>...
G>


G>то input растягивается на всю длину строки "edi.......ue", соответсвенно, если эта строка опупенная, то и получается все очень опупенно

Я видимо не совсем понимаю суть проблемы...
Re[4]: Ширина input'a через CSS
От: Grelkin  
Дата: 01.07.04 10:06
Оценка:
Здравствуйте, Сим, Вы писали:

Сим>Я видимо не совсем понимаю суть проблемы...

Ну если делать так :


<table border="1" width="100%">
<tr>
    <td width="50%">
        Some Text
    </td>
    <td width="50%">
        <input style="width : 100%;" type="Text" name="edit_name" value="edit_value">
    </td>
</tr>
</table>


то получаем как и необходимо :


Если же


<table border="1" width="100%">
<tr>
    <td width="50%">
        Some Text
    </td>
    <td width="50%">
        <input style="width : 100%;" type="Text" name="edit_name" value="edit_valueedit_valueedit_valueed
it_valueedit_valueedit_valueedit_valueedit
_valueedit_valueedit_valueedit_valueedit_value">
    </td>
</tr>
</table>


то имеем вот такую фигню :


Хочется же :
Re[5]: Ширина input'a через CSS
От: Borisan  
Дата: 01.07.04 11:41
Оценка:
Здравствуйте, Grelkin, Вы писали:

G>Здравствуйте, Сим, Вы писали:

Сим>>Я видимо не совсем понимаю суть проблемы...

G>Ну если делать так :

G>

G><table border="1" width="100%">
G><tr>
G>    <td width="50%">
G>        Some Text
G>    </td>
G>    <td width="50%">
G>        <input style="width : 100%;" type="Text" name="edit_name" value="edit_value">
G>    </td>
G></tr>
G></table>

G>


G>то получаем как и необходимо :
G>

G>Если же

G>

G><table border="1" width="100%">
G><tr>
G>    <td width="50%">
G>        Some Text
G>    </td>
G>    <td width="50%">
G>        <input style="width : 100%;" type="Text" name="edit_name" value="edit_valueedit_valueedit_valueed
G>it_valueedit_valueedit_valueedit_valueedit
G>_valueedit_valueedit_valueedit_valueedit_value">
G>    </td>
G></tr>
G></table>

G>


G>то имеем вот такую фигню :
G>

G>Хочется же :
G>

Объясняю че нужно сделать. Короче берем javascript и за счет этого добавляем текст в инпут — работает стопудово. Это просто бага ИЕ. Хоть какое то решение
Re[5]: Ширина input'a через CSS
От: Borisan  
Дата: 01.07.04 11:43
Оценка:
<html>
<body>
<table cellspacing="0" cellpadding="4" border="1" width="100%">
<tr>
<td width="20">Title<span class="asterisk">*</span>:</td>
<td>
<table cellspacing="0" cellpadding="0" border="2" width="100%">
<tr>
<td width="100%"><input type="text" name="name" value="" style="width:100%;"></td>
<td class="tblhead" width="">&nbsp;Payment method<span class="asterisk">*</span>:</td>
<td>
asd
</td>
</tr>
</table>
</td>
</tr>
<button onclick="document.all.name.value = 'Campaign NameCampaign NameCampaign NameCampaign NameCampaign NameCampaign NameCampaign NameCampaign NameCampaign NameCampaign NameCampaign NameCampaig'"></button>

</table>
</body>
</html>


вот вам код для примера. Большой текст мона взять и подставить в Инпут — тогда результат вашей проблемы
Re[6]: Ширина input'a через CSS
От: Clarion Украина  
Дата: 01.07.04 11:51
Оценка: 
<input style="width:400px; overflow:none" value="mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm">
нескончаемого вам коннекта
Re[6]: Ширина input'a через CSS
От: Grelkin  
Дата: 01.07.04 13:59
Оценка:
Здравствуйте, Borisan, Вы писали:

B>Объясняю че нужно сделать. Короче берем javascript и за счет этого добавляем текст в инпут — работает стопудово. Это просто бага ИЕ. Хоть какое то решение

Да не... Хтмл генерится скриптом на сервере вместе с value'м input'a, и надо чтобы уже это дело нормально отображалось.
Re: Ширина input'a через CSS
От: VoDmAl Россия http://tutitam.ru/f/rsdn.ru/
Дата: 01.07.04 15:58
Оценка: 4 (1)
Здравствуйте, Grelkin, Вы писали:

G>Что-то не пойму как сделать, чтобы input type="Text" принимал максимально возможную ширину средствами CSS. как бы определить cellTextEdit чтобы input принимал нужные размеры ?

Если CSS 1, то это никак не сделаешь. Если CSS2, то можно попытаться с помощью min-width и max-width, но он не поддерживается IE. Если нужна работоспособность еще и под IE, то можно написать behavior с помощью которого будет выправляться эта ситуация (сделать эмуляцию max-width).

Да, вот такой вот пример, может быть, как раз и делает то, что ты хочешь?

<table width=100% border=1>
    <tr><td width=50>some text</td>
    <td>
        <table width=100% style="table-layout:fixed;"><tr><td>
        <input type=text style="width:100%;min-width:50px;max-width:100px;" value="verylongvalueeee">
        </td></tr>
    </td></tr>
</table>


Возможно его можно упростить, отправляю первое, что заработало...
Re[5]: Ширина input'a через CSS
От: Sinclair Россия https://github.com/evilguest/
Дата: 02.07.04 04:57
Оценка:
Здравствуйте, Grelkin, Вы писали:

G>то имеем вот такую фигню :
G>

G>Хочется же :
G>
Это все из-за того, что у тебя объемлющий TD имеет width:auto. Это означает, что он имеет тенденцию растягиваться при увеличении размера содержимого. Если ты задашь ему более фиксированную ширину, то все будет в порядке. Ну, или отучишь растягиваться input при помощи атрибута overflow, как тебе посоветовали.
... << RSDN@Home 1.1.4 beta 1 >>
Уйдемте отсюда, Румата! У вас слишком богатые погреба.
Re[6]: Ширина input'a через CSS
От: Grelkin  
Дата: 02.07.04 05:57
Оценка:
Здравствуйте, Sinclair, Вы писали:

S>Это все из-за того, что у тебя объемлющий TD имеет width:auto. Это означает, что он имеет тенденцию растягиваться при увеличении размера содержимого. Если ты задашь ему более фиксированную ширину, то все будет в порядке. Ну, или отучишь растягиваться input при помощи атрибута overflow, как тебе посоветовали.

Фиксировать ширину объемлющего инпута очень не хочется.

Использование же overflow в виде :

<table border="1" width="100%">
<tr>
    <td width="50%">
        Some Text
    </td>
    <td width="50%">
        <input style="overflow:none; width : 100%;" type="Text" name="edit_name" value="veryverylongvalue">
    </td>
</tr>
</table>


у меня(IE6.0) ни к чему не привело

Проканал, однако, совет VoDmAl'a
здесь
Автор: VoDmAl
Дата: 01.07.04
Re[7]: Ширина input'a через CSS
От: Clarion Украина  
Дата: 02.07.04 07:18
Оценка:
черт, в таблице действительно не работает.
хотя просто инпут с оверфловом — работает...

<table border="1" width="100%">
<tr>
    <td width="50%">
        Some Text
    </td>
    <td width="50%">
        <input style="overflow:none; width : 100%;" type="Text" name="edit_name" value="veryverylongvalue">
    </td>
</tr>
<tr>
    <td>
        Some Text
    </td>
    <td>
        <input style="overflow:none; width:100%;" type="Text" name="edit_name" value="veryveryloxxxxxxxxxddddddddddddddddddddxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxngvalue">
    </td>
</tr>
</table>

<p><input style="overflow:none; width:100%;" type="Text" name="edit_name" value="veryveryloxxxxxxxxxddddddddddddddddddddxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxngvalue"></p>
нескончаемого вам коннекта
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.