НеКодер: “😘 Полезные CSS 😘 --------------------------------------- Вот еще нес…”

😘 Полезные CSS 😘

---------------------------------------

Вот еще несколько CSS, которые я регулярно использую в своих проектах. Думаю, вы найдете их полезными для себя👉

---------------------------------------

Выравнивание Popup по центру экрана:

<style>
    #popup123 {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
</style>

*Поменять #popup123 на свой ID

---------------------------------------

Включает скролл контейнера, у которого содержимое превышает его размеры:

<style>
#cont1 {
overflow: auto!important;
}
</style>

Желательно, чтобы внутреннее содержимое было объединено в одну группу, а сама внутренняя группа была зафиксирована по ширине либо Fit width.
Я использую данный стиль для таблиц / RG, которым нужен скролл по горизонтали, чтобы уместить все колонки.

*Поменять #cont1 на свой ID

---------------------------------------

Этот CSS (и немного JS) превратит стандартный Date/Time Picker в просто Time picker, скрыв часть с выбором даты:

<style>
    #idtimepicker {
        display: inline-block;
    }
    
    #idtimepicker .date_div {
        width: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    #idtimepicker .time_div {
        width: 100% !important;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var idtimepicker = document.getElementById('idtimepicker');
        if (idtimepicker) {
            var computedStyle = window.getComputedStyle(idtimepicker);
            var paddingLeft = parseFloat(computedStyle.paddingLeft);
            var paddingRight = parseFloat(computedStyle.paddingRight);
            idtimepicker.style.marginLeft = -(paddingLeft + paddingRight) + "px";
        }
    });
</script>

*Поменять #idtimepicker и idtimepicker в JS на свой ID

---------------------------------------

Инструкция к применению, как обычно:

- Добавь блок HTML на страницу
- Вставить в него нужный код
- Поменять #id в стилях

---------------------------------------

Пишите комментарии и вопросы / ставьте реакции, если понравилось 💃