Как выстроить в линию элементы ввода HTML?

Это решение, которое я придумал.

Родительский контроллер имеет следующую вложенную функцию

@wire(getRecord, { recordId: '$recordId', fields: CONTACT_FIELDS })
wireContact({ error, data }) {
    if (data) {
        console.log('getRecord Data', JSON.stringify(data))
        this.contact = data;
        getAllDateRecords({ contactId: this.recordId })
            .then(result => {
                this.allDateRecords = result;
                this.chartReady = true;
            })
            .catch(err => console.log(JSON.stringify(err)));
    } else if (error) {
        console.error('error', error)
        this.contact = undefined;
    }

}

Родительский компонент имеет компонент c-debt-chart и получает свои данные из записей всех дат :

<template>
<div class="slds-page-header__row slds-accordion__content">
                <div class="c-container w-100">
                    <lightning-layout horizontal-align="space">
                        <lightning-layout-item padding="around-small">
                            <template if:true={chartReady}>
                                <c-debt-chart all-date-records={allDateRecords}></c-debt-chart>
                            </template>
                        </lightning-layout-item>
                    </lightning-layout>
                </div>
            </div>
<template>

Проблема заключалась в том, что примеры в Salesforce не показывают, как обновить данные в диаграммах js. Это решение, которое я нашел, используя Getter and Setters

Диаграмма задолженности дочерних компонентов

<template>
    <lightning-card title="Debt Overview" icon-name="standard:currency">
        <div class="slds-m-around_medium">
            <canvas class="donut" lwc:dom="manual"></canvas>
        </div>
    </lightning-card>
</template>

Контроллер диаграммы задолженности

Каждый раз переменная allDateRecords изменяется на родительском уровне. Это приведет к тому, что дочерний процесс будет обновлен с использованием методов метода получения. Таким образом, в методе setter будет запущена функция seperateDateObject, которая выполняет некоторую логику для обновления диаграммы.

@api
get allDateRecords() {
    return this._allDateRecords;
}

set allDateRecords(value) {
    this._allDateRecords = value;
    this.separateDateObject();
}
24
задан Greg 7 October 2008 в 22:06
поделиться

8 ответов

Я проверял это в Internet Explorer 7, Firefox 3 и Safari / Google Chrome. Я определенно вижу проблему с <select> и <input type="file">. Мои результаты показали, что если вы стилизуете все входные данные с одинаковой шириной, <select> будет примерно на 5 пикселей короче во всех браузерах.

Использование сценария сброса Эрика Мейера не помогает решить эту проблему, однако, если вы просто сделаете свои <select> входные значения на 5 пикселей шире, вы получите очень хорошее (хотя и не идеальное) выравнивание в основных браузеры. Единственным отличием является Safari / Google Chrome, и он кажется на 1 или 2 пикселя шире, чем во всех других браузерах.

Что касается <input type="file">, то у вас нет особой гибкости со стилем. Если вам подходит JavaScript, вы можете реализовать метод , показанный в quirksmode , чтобы добиться большего контроля над стилем управления загрузкой файлов.

См. Мой полный рабочий пример ниже в XHTML 1.0 Strict для типичной формы с постоянной шириной ввода. Обратите внимание, что здесь не используется трюк шириной 100%, указанный здесь другими, потому что он имеет ту же проблему с непоследовательной шириной. Кроме того, нет таблиц, используемых для визуализации формы, поскольку таблицы должны использоваться только для табличных данных, а не для разметки.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Example Form</title>
  <style type="text/css">
    label,
    input,
    select,
    textarea {
      display: block;
      width: 200px;
      float: left;
      margin-bottom: 1em;
    }
    
    select {
      width: 205px;
    }
    
    label {
      text-align: right;
      width: 100px;
      padding-right: 2em;
    }
    
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <form action="#">
    <fieldset>
      <legend>User Profile</legend>
      <label for="fname">First Name</label>
      <input id="fname" name="fname" type="text" />
      <br class="clear" />

      <label for="lname">Last Name</label>
      <input id="lname" name="lname" type="text" />
      <br class="clear" />

      <label for="fav_lang">Favorite Language</label>
      <select id="fav_lang" name="fav_lang">
        <option value="c#">C#</option>
        <option value="java">Java</option>
        <option value="ruby">Ruby</option>
        <option value="python">Python</option>
        <option value="perl">Perl</option>
      </select>
      <br class="clear" />

      <label for="bio">Biography</label>
      <textarea id="bio" name="bio" cols="14" rows="4"></textarea>
      <br class="clear" />
    </fieldset>
  </form>
</body>

</html>
17
ответ дан 28 November 2019 в 23:57
поделиться

Я обычно помещал их в отделении или ячейке таблицы (ужасы! Я знаю) ширины, я хочу, затем устанавливаю выбор и ввожу style:width к 100%, таким образом, они заполняют отделение / ячейка, в которой они находятся.

13
ответ дан 28 November 2019 в 23:57
поделиться

Я обнаружил, что если вы установите , выберите и , введите границу элемента и отступы до 0, они будут одинаковой ширины. (Протестировано на Chrome 14, Firefox 7.0.1, Opera 11.51, IE 9)

Установка границы или отступа в 1 пиксель для элементов select и input увеличивает размер элемента ввода на 2 пикселя. Например:

<form class="style">
    <input name="someInput" />
    <select name="options">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
    </select>
</form>

.style select {
    width: 100px;
    padding: 1px;
    border: 1px solid black;
}
.style input {
    width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
    (select element seems to put border inside, not outside?) */
    padding: 1px;
    border: 1px solid black;
}
2
ответ дан 28 November 2019 в 23:57
поделиться

Кроме ширины, я установил бы границу и поле также, они могут или не могут влиять на Ваши средства управления. Что-то вроде этого может помочь:

input, select {
    width: 100px;
    margin: 0px;
    border: 1px solid;
}

Ron имеет хорошую идею также.

1
ответ дан 28 November 2019 в 23:57
поделиться

Вы запускаете свои файлы CSS с некоторых основных настроек? Может быть полезно выключить дополнение и поле на всех элементах. Я не протестировал, чтобы видеть, могло ли это влиять на выбор / входные элементы.

Вот CSS в качестве примера Сброс от Eric Meyer:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

0
ответ дан 28 November 2019 в 23:57
поделиться

Файловые входы могут существенно различаться в разных браузерах и определенно не позволяют многое настраивать, что может раздражать, но я также понимаю, почему это происходит с точки зрения безопасности. Например, попробуйте изменить текст кнопки «Обзор», которая появляется в большинстве браузеров, или сравните файл, введенный в Safari, с другими браузерами ...

0
ответ дан 28 November 2019 в 23:57
поделиться

Я не думаю, что идея Рона работает ...

контрольный пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <link href="styles/reset.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        input, select{
            width: 100%;
        }
    </style>
</head>
<body>

<div style="width: 200px;">
    <input type="text">
    <select>
        <option>asdasd</option>
        <option>asdasd</option>
    </select>

</div>

</body>
</html>

Это приводит к тому, что ввод будет на несколько пикселей шире, чем выбор (это, вероятно, зависит от ОС). Я не уверен, что это может быть достигнуто, даже с трюком + 5px, так как стиль выбора, кажется, зависит от ОС (по крайней мере, тема Windows).

0
ответ дан 28 November 2019 в 23:57
поделиться

Это связано с тем, что с помощью < input > границы и отступы добавляются к ширине (как и для большинства других элементов). При нажатии < select > граница и отступ включаются в ширину, как в старом режиме IE quirks.

Вы можете обойти это, увеличив ширину, чтобы учесть это:

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

Или (если вы можете положиться на поддержку браузера), вы можете использовать новое свойство CSS3 box-sizing, чтобы сделать их вести себя согласованно и рисовать отступы и границы за пределами ширины элемента:

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

В качестве альтернативы, вы можете установить box-sizing в border-box, чтобы входы вели себя как выделения, с отступом, нарисованным внутри ширины. коробки.

Проверено в Chrome, IE8, FF.

0
ответ дан 28 November 2019 в 23:57
поделиться