Как сделать макет, в котором определенные теги будут заполнять оставшееся пространство родительского тега / контейнера? - PullRequest
Новая
       10

Как сделать макет, в котором определенные теги будут заполнять оставшееся пространство родительского тега / контейнера?

1 голос
/ 19 февраля 2012

Я не очень хорош в терминологии HTML / CSS, поэтому, пожалуйста, не стесняйтесь редактировать вопрос.

Не могли бы вы, ребята, скажите, пожалуйста, как я могу заставить определенные поля / теги заполнять оставшееся пространство, выделенное родительским тегом? Не-GWT, пример html + css тоже подойдет.

Вот что у меня есть

enter image description here

HTML-код этого примера здесь (генерируется GWT).

Если я изменяю размер окна браузера, границы поля тоже меняются, занимая всю область.

Итак, «требования»:

  • Нет фиксированных значений ширины, потому что у меня есть несколько локализованных версий сайте.
  • Первый столбец с именем поля должен быть шириной самого длинного имени. В моем случае это «номер телефона», но на другом языке это может быть что-то другое.
  • Входной тег должен быть выровнен по левому краю. Входной тег должен иметь автоматический размер, чтобы занимать пространство, оставшееся в пределах родительского тег.

UiBinder XML элемента управления PersonEditor равен 

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:e='urn:import:com.google.gwt.editor.ui.client'

             ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
             ui:generateKeys="com.google.gwt.i18n.server.keygen.MD5KeyGenerator"
             ui:generateLocales="en,ru">
    <ui:style src="../common.css"/>
    <g:CaptionPanel ui:field="captionPanel">
        <g:Grid>
            <g:row>
                <g:cell>
                    <div>
                        <ui:msg meaning="person's name">Name:</ui:msg>
                    </div>
                </g:cell>
                <g:customCell>
                    <e:ValueBoxEditorDecorator ui:field="name" stylePrimaryName="{style.editField}">
                        <e:valuebox>
                            <g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
                        </e:valuebox>
                    </e:ValueBoxEditorDecorator>
                </g:customCell>
            </g:row>
            <g:row>
                <g:cell>
                    <div>
                        <ui:msg>Phone Number:</ui:msg>
                    </div>
                </g:cell>
                <g:customCell>
                    <e:ValueBoxEditorDecorator ui:field="phoneNumber" stylePrimaryName="{style.editField}">
                        <e:valuebox>
                            <g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
                        </e:valuebox>
                    </e:ValueBoxEditorDecorator>
                </g:customCell>
            </g:row>
            <g:row>
                <g:cell>
                    <div>
                        <ui:msg>EMail:</ui:msg>
                    </div>
                </g:cell>
                <g:customCell>
                    <e:ValueBoxEditorDecorator ui:field="email" stylePrimaryName="{style.editField}">
                        <e:valuebox>
                            <g:TextBox width="100%" stylePrimaryName="{style.editField}"/>
                        </e:valuebox>
                    </e:ValueBoxEditorDecorator>
                </g:customCell>
            </g:row>
        </g:Grid>
    </g:CaptionPanel>
</ui:UiBinder>

Я не предоставляю XML для SenderOrganization, потому что он почти такой же.

Ответы [ 3 ]

4 голосов
/ 20 февраля 2012

Вы можете сделать это таким образом. «.input-wrapper» необходимо для некоторых браузеров, которые не позволяют позиционировать элементы ввода, указывая left / right. 

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      label { line-height: 30px; } 
      .input-wrapper { display: inline-block; position: absolute; left: 200px; right: 50px; } 
      input { width: 100%; }
    </style>
  </head>
  <body>
     <fieldset>
       <legend>Sender organization:</legend>

       <div>
         <label>Name:</label>
         <div class="input-wrapper">
           <input>
         </div>
       <div>

       <div>
         <label>Address:</label>
         <div class="input-wrapper">
           <input>
         </div>
       </div>

       <fieldset>
         <legend>Contact Person:</legend>

         <div>
           <label>Name:</label>
           <div class="input-wrapper">
             <input>
           </div>
         <div>

         <div>
           <label>Phone Number:</label>
           <div class="input-wrapper">
             <input>
           </div>
         </div>

         <div>
           <label>EMail:</label>
           <div class="input-wrapper">
             <input>
           </div>
         </div>
        </fieldset>

     </fieldset>
  </body>
</html>
1 голос
/ 20 февраля 2012

Чтобы столбец меток имел авторазмер, вы должны использовать элемент таблицыЭто выглядит так: 

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      table { width: 100%; } 
      th { text-align: left; font-weight: normal; white-space: nowrap; } 
      td {  width: 100%; } 
      input { width: 100%; }
    </style>
  </head>
  <body>
     <fieldset>
       <legend>Sender organization:</legend>

       <table>
         <tr>
           <th>Name:</td>
           <td><input></td>
         </tr>
         <tr>
           <th>Address:</td>
           <td><input></td>
         </tr>
       </table>

       <fieldset>
         <legend>Contact Person:</legend>

         <table>
           <tr>
             <th>Name:</td>
             <td><input></td>
           </tr>
           <tr>
             <th>Phone Number:</td>
             <td><input></td>
           </tr>
           <tr>
             <th>EMail:</td>
             <td><input></td>
           </tr>
         </table>

       </fieldset>

     </fieldset>
  </body>
</html>
0 голосов
/ 20 февраля 2012

Попробуй это.Обратите внимание, что это всего лишь пример.Может быть очень хорошо сделать с чистым кодом.

...