Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Как создать cloak для моей формы?  [new]
Renziglov
Member

Откуда:
Сообщений: 159
Привет.
Хочу реализовать в GUI read-only access для моей формы с 20-30 input элементами на ней.
В WPF я бы создал полупрозначную cloak панель, покрывающую форму. При старте либо прятал ее, если есть полный access к форме, либо показывал поверх формы в случае read-only access. Т.е. форма видна, но редактировать ее нельзя.
Как такое сделать в CSS? Что-то position=absolute закрывает весь экран, не только часть, где расположена моя форма.
Спасибо.
28 сен 20, 16:35    [22205782]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
vb_sub
Member

Откуда:
Сообщений: 782
1) html атрибут "readonly"
2) Можно сделать overlay полупрозрачный слой.
Делается все намного легче, чем в WPF.
28 сен 20, 16:40    [22205786]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
voraa
Member

Откуда:
Сообщений: 166
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
28 сен 20, 16:49    [22205793]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
Renziglov
Member

Откуда:
Сообщений: 159
vb_sub,

<form readonly> и <form readonly="readonly">
не работает. Элементы по прежнему редактируются. Что не так?
28 сен 20, 16:50    [22205796]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
Renziglov
Member

Откуда:
Сообщений: 159
voraa,
Именно так и сделал с самого начала. Покрывается весь экран. Почему?
28 сен 20, 16:51    [22205799]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
voraa
Member

Откуда:
Сообщений: 166
Renziglov,
А у формы есть position: relative ?
Надо поставить.
28 сен 20, 17:18    [22205830]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
skyANA
Member

Откуда: Зеленоград
Сообщений: 28166
Renziglov
vb_sub,

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

<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/
28 сен 20, 17:23    [22205836]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
Renziglov
Member

Откуда:
Сообщений: 159
voraa,

Ну надо - поставил. Хотя зачем? Все также не работает. Какой-то шаманизм этот CSS
28 сен 20, 17:44    [22205853]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
Renziglov
Member

Откуда:
Сообщений: 159
skyANA,

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

А где решение "еще проще, чем в WPF"? Хотелось бы все-таки взглянуть.
28 сен 20, 17:50    [22205861]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
voraa
Member

Откуда:
Сообщений: 166
Renziglov,
Код приведите.
Иначе не узреть, что не так.
28 сен 20, 17:51    [22205862]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
skyANA
Member

Откуда: Зеленоград
Сообщений: 28166
Renziglov
Ну надо - поставил. Хотя зачем? Все также не работает.

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

<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>

form {
  position: relative;
}

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

https://jsfiddle.net/tc7aq1wf/
28 сен 20, 17:59    [22205867]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
Renziglov
Member

Откуда:
Сообщений: 159
skyANA,

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

А для чего нужно обьявлять и саму форму position: relative?
Мелочь, но я не очень доверяю коду, когда добавляется совершенно не связанный элемент и для этого нужно модифицировать другие элементы, которые про него ничего не знают и знать не должны. Как-по попахивает нарушением SOLID.
28 сен 20, 18:39    [22205912]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
skyANA
Member

Откуда: Зеленоград
Сообщений: 28166
Renziglov
А для чего нужно обьявлять и саму форму position: relative?

Почитайте справку: http://htmlbook.ru/css/position
28 сен 20, 18:49    [22205918]     Ответить | Цитировать Сообщить модератору
 Re: Как создать cloak для моей формы?  [new]
voraa
Member

Откуда:
Сообщений: 166
Renziglov
skyANA,
А для чего нужно обьявлять и саму форму position: relative?
Мелочь, но я не очень доверяю коду, когда добавляется совершенно не связанный элемент и для этого нужно модифицировать другие элементы, которые про него ничего не знают и знать не должны. Как-по попахивает нарушением SOLID.

И как же он "не связанный", если его размеры должны быть связанны с размерами формы?
28 сен 20, 21:39    [22206023]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить