Тема: Налаштування фрейму

Є sidebar menu
Ось його css

@media only screen and (max-width: 767px) and (min-width: 480px)
.sidebar-menu {
    width: 365px;
}
.sidebar-menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    height: 100vh;
    width: 280px;
    overflow: hidden;
    background: #303641;
    box-shadow: 2px 0 32px rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*, ::after, ::before {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}

і Фрейм, який мені ніяк не вдається налаштувати

css:

.frame-fill-all {
    position: absolute;
    top: 130px;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

фремй знаходиться в блоці div, клас main-content-inner

@media only screen and (max-width: 767px) and (min-width: 480px)
.main-content-inner {
    padding: 0 15px 35px;
}
.main-content-inner {
    padding: 0 30px 50px;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*, ::after, ::before {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}

Потрібно зробити так, щоб фрейм автоматично зменшувався по довженні і вирівнювався по лівій стороні (для того щоб було видно повністю вміст) коли користувач викликає сайтбар меню.

Як так можна зробити ? А якщо не можна за допомогою CSS, дайте ідею щодо скриптів

https://replace.org.ua/extensions/om_images/img/5f136b116b909/Untitled.jpg
Лінк на шаблон https://github.com/puikinsh/srtdash-admin-dashboard

2 Востаннє редагувалося ostap34PHP (19.07.2020 02:00:46)

Re: Налаштування фрейму

А як він має зменшуватись? Якщо довжина відносно розміру вікна - можна використати відсотки (width: 25%, але не для мобільного розміру)

На скриншоті показано те як треба зробити?

Якщо так, то винести меню над контентом можна через "position: relative" і "z-index".

"коли користувач викликає сайтбар меню."

Тобто коли клікає по кнопці?

Можна встановити "display: none", а при натисканні "display: block", ще додати анімацію

Прихований текст

Анімація: "css side-out animation"

Подякували: Betterthanyou1

3

Re: Налаштування фрейму

Дайте посилання на якийсь jsfiddle з тим усім кодом

4

Re: Налаштування фрейму

FakiNyan написав:

Дайте посилання на якийсь jsfiddle з тим усім кодом

Його встановлювати в jsfiddle, то ціла біда.
Ось код:
https://github.com/puikinsh/srtdash-adm … arter.html

Все що я добавив це:
iframe

<div class="main-content-inner">
                  <!-- MAIN CONTENT GOES HERE -->

                <iframe id="mainframe" src="Welcome.php" class="frame-fill-all"></iframe>
                
            </div>

і клас

.frame-fill-all {
    position: absolute;
    top: 130px;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

5

Re: Налаштування фрейму

ostap34PHP написав:

На скриншоті показано те як треба зробити?

На скріншоті показана проблема, бачте, меню перекриває текст. Єдиний спосіб побачити повністю текст, натиснути на херстик.

Потрібно щоб при відкриванні меню це фарейм автоматично зменшувався по довженні і вирівнювався по лівій стороні відносно меню.

6 Востаннє редагувалося ostap34PHP (19.07.2020 13:37:17)

Re: Налаштування фрейму

Схоже це нормальна поведінка для мобільних пристроїв і екранів менших розмірів (див. Firefox/Chrome devtools).

Контент міг відсуватись в правий бік, це керується через "padding-left" для класу "page-container". Але по умовах в файлі стилів, "padding-left: 0".

Варіант виправлення:

Залишити "padding-left: 0", але якщо меню відкрили - видаляти цю умову. (наприклад, виокремивши її в клас, і видаляти його через js)