Гость
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как создать cloak для моей формы? / 14 сообщений из 14, страница 1 из 1
28.09.2020, 16:35
    #40003536
Renziglov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
Привет.
Хочу реализовать в GUI read-only access для моей формы с 20-30 input элементами на ней.
В WPF я бы создал полупрозначную cloak панель, покрывающую форму. При старте либо прятал ее, если есть полный access к форме, либо показывал поверх формы в случае read-only access. Т.е. форма видна, но редактировать ее нельзя.
Как такое сделать в CSS? Что-то position=absolute закрывает весь экран, не только часть, где расположена моя форма.
Спасибо.
...
Рейтинг: 0 / 0
28.09.2020, 16:40
    #40003538
vb_sub
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
1) html атрибут "readonly"
2) Можно сделать overlay полупрозрачный слой.
Делается все намного легче, чем в WPF.
...
Рейтинг: 0 / 0
28.09.2020, 16:49
    #40003541
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
Renziglov

Как такое сделать в CSS? Что-то position=absolute закрывает весь экран, не только часть, где расположена моя форма.
Спасибо.

Задать координаты для этого элемента так, что бы закрывал только форму
Если разместить его последним в форме

<form>

<div class=cloak></div>
</form>
То CSS может быть таким
.cloak {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
......
}

делаете для этого div display:none в случае полного доступа и display:block для read-only
...
Рейтинг: 0 / 0
28.09.2020, 16:50
    #40003542
Renziglov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
vb_sub,

<form readonly> и <form readonly="readonly">
не работает. Элементы по прежнему редактируются. Что не так?
...
Рейтинг: 0 / 0
28.09.2020, 16:51
    #40003544
Renziglov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
voraa,
Именно так и сделал с самого начала. Покрывается весь экран. Почему?
...
Рейтинг: 0 / 0
28.09.2020, 17:18
    #40003569
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
Renziglov,
А у формы есть position: relative ?
Надо поставить.
...
Рейтинг: 0 / 0
28.09.2020, 17:23
    #40003572
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
Renziglov
vb_sub,

<form readonly> и <form readonly="readonly">
не работает. Элементы по прежнему редактируются. Что не так?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
<form>
    <fieldset disabled="disabled">
        <input type="text" name="something" placeholder="enter some text" />
        <select>
            <option value="0" disabled="disabled" selected="selected">select somethihng</option>
            <option value="1">woot</option>
            <option value="2">is</option>
            <option value="3">this</option>
        </select>
    </fieldset>
</form>


http://jsfiddle.net/7qGHN/
...
Рейтинг: 0 / 0
28.09.2020, 17:44
    #40003584
Renziglov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
voraa,

Ну надо - поставил. Хотя зачем? Все также не работает. Какой-то шаманизм этот CSS
...
Рейтинг: 0 / 0
28.09.2020, 17:50
    #40003591
Renziglov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
skyANA,

Это решение работает, но только для input-элементов. <a>, стилизованный под кнопку или бутстраповский слайдер по прежнему редактируют view-only данные.

А где решение "еще проще, чем в WPF"? Хотелось бы все-таки взглянуть.
...
Рейтинг: 0 / 0
28.09.2020, 17:51
    #40003592
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
Renziglov,
Код приведите.
Иначе не узреть, что не так.
...
Рейтинг: 0 / 0
28.09.2020, 17:59
    #40003596
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
Renziglov
Ну надо - поставил. Хотя зачем? Все также не работает.

А у меня работает...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<form>
    <input type="text" name="something" placeholder="enter some text" />
    <br/><br/>
    <select>
        <option value="0">select somethihng</option>
        <option value="1">woot</option>
        <option value="2">is</option>
        <option value="3">this</option>
    </select>
    <br/><br/>
    <a href="google.com">google.com</a>
    <div class="cloak"></div>    
</form>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
form {
  position: relative;
}

form .cloak {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}


https://jsfiddle.net/tc7aq1wf/
...
Рейтинг: 0 / 0
28.09.2020, 18:39
    #40003621
Renziglov
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
skyANA,

Заработал код с absolute. Причина было в том, что я деляю это для Blazor EditForm и его ObjectGraphDataAnnotationsValidator пришлось перенести.

А для чего нужно обьявлять и саму форму position: relative?
Мелочь, но я не очень доверяю коду, когда добавляется совершенно не связанный элемент и для этого нужно модифицировать другие элементы, которые про него ничего не знают и знать не должны. Как-по попахивает нарушением SOLID.
...
Рейтинг: 0 / 0
28.09.2020, 18:49
    #40003626
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
Renziglov
А для чего нужно обьявлять и саму форму position: relative?

Почитайте справку: http://htmlbook.ru/css/position
...
Рейтинг: 0 / 0
28.09.2020, 21:39
    #40003685
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как создать cloak для моей формы?
Renziglov
skyANA,
А для чего нужно обьявлять и саму форму position: relative?
Мелочь, но я не очень доверяю коду, когда добавляется совершенно не связанный элемент и для этого нужно модифицировать другие элементы, которые про него ничего не знают и знать не должны. Как-по попахивает нарушением SOLID.

И как же он "не связанный", если его размеры должны быть связанны с размерами формы?
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как создать cloak для моей формы? / 14 сообщений из 14, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]