I have a complex flex-based angular page, with a big amount of nested flex items. I need to have customizable stretch elements to the end of page and use scroll by some of inner containers.
Chrome/Edge/Firefox doing well, as expected. But Safari start to freeze whole page.
I have analyzed styles of all elements. And, for demonstrate this issue, I created demo page.
let startTime = new Date().getTime();
window.onload = () => {
window.onload = null;
setTimeout(() => {
const endTime = new Date().getTime();
const timeSpend = endTime - startTime;
const loadTime = `Loading time: ${timeSpend}ms`;
console.log(loadTime);
const input = document.querySelector("label");
input.innerText = loadTime;
startTime = new Date().getTime();
});
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.flex-item {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background: rgba(0, 128, 0, 0.05);
}
.block-item {
display: block;
height: 100%;
width: 100%;
background: red;
}
div {
border: 1px solid black;
border-radius: 5px;
padding: 2px 10px;
position: relative;
}
span {
position: absolute;
top: 0;
left: 0;
}
label {
position: fixed;
left: 200px;
top: 10px;
background: white;
z-index: 10;
box-shadow: 0px 0px 10px 2px black;
border-radius: 20px;
padding: 5px;
}
<label></label>
<div class="flex-item"><span>0</span>
<div class="block-item"><span>1</span> <!-- block here -->
<div class="flex-item"><span>2</span>
<div class="flex-item"><span>3</span>
<div class="flex-item"><span>4</span>
<div class="flex-item"><span>5</span>
<div class="flex-item"><span>6</span>
<div class="flex-item"><span>7</span>
<div class="flex-item"><span>8</span>
<div class="flex-item"><span>9</span>
<div class="flex-item"><span>0</span>
<div class="flex-item"><span>1</span>
<div class="flex-item"><span>2</span>
<div class="flex-item"><span>3</span>
<div class="flex-item"><span>4</span>
<div class="flex-item"><span>5</span>
<div class="flex-item"><span>6</span>
<div class="flex-item"><span>7</span>
<div class="flex-item"><span>8</span>
<div class="flex-item"><span>9</span>
<div class="flex-item"><span>0</span>
<div class="flex-item"><span>1</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or demo on codepen: https://codepen.io/JBeen/full/LYBwYmJ
Tried on Safari 16.3 and Safari TP 16.4 on Macbook Pro 16 M2 Max
Loading time: ~3.5s
When I increase amount of nested elements and add 1 element -- loading time increase twice, and became ~7s. So after adding several more nested elements -- page start to freeze completely.
Does Safari have an issue on official bug tracker?
Or what I'm doing wrong?
I made an example on CodePen - CodePen
I want the image to disappear on hover with the mouse and a block with text appears.
My problem is that I don't understand how to remove the jumps if I want to keep the text.
Now there are unpleasant jumps in my layout, which is caused by display: none;.
And I think to add smooth transitions. For reuse, I moved the code to Alpine.data. Is this a good idea?
I've used alpine before with tilewind and it's easier. But in this bootstrap project, there are complications.
Please tell me what are your ideas?
Thanks in advance!
<div class="container advantage-pic">
<div class="pic1" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic1.png" alt="">
<div class="txt" x-cloak x-show="open" >Some text</div>
</div>
<div class="pic2" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic2.png" alt="">
<div class="txt" x-cloak x-show="open">Some text</div>
</div>
<div class="pic3" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic3.png" alt="">
<div class="txt" x-cloak x-show="open">Some text</div>
</div>
<div class="pic4" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic4.png" alt="">
<div class="txt" x-cloak x-show="open">Some text</div>
</div>
</div>
[x-cloak] {
display: none !important;
}
.advantage-pic {
max-width: 760px;
margin: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 12px;
grid-row-gap: 12px;
}
.pic1 {
grid-area: 1 / 1 / 3 / 2;
text-align: center;
position: relative;
}
.pic2 {
grid-area: 1 / 2 / 2 / 3;
text-align: center;
position: relative;
}
.pic3 {
grid-area: 2 / 2 / 3 / 3;
text-align: center;
position: relative;
}
.pic4 {
grid-area: 3 / 1 / 4 / 3;
text-align: center;
position: relative;
}
.txt {
color: blue;
background: #fe980f;
position: absolute;
top: 0;
left: 0;
transition: height 500ms ease 0s;
width: 100%;
display: block;
height: 100%;
}
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
import Alpine from "https://cdn.skypack.dev/alpinejs#3.10.5";
Alpine.data("onHover", () => ({
open: false,
visible() {
this.open = true;
},
novisible() {
this.open = false;
},
}));
queueMicrotask(() => {
Alpine.start();
});
Solved! There was no need to hide the picture, there was no jump!
x-show="!open"
So the difficulty I have, is that I cannot get an addEventListener for each day in my calender.
I want to add an event listener, so that when the user clicks on it, it displays the plans they have for that day.
Whenever I try to run it, it sometimes gives me an error, and then other times nothing happens. I am aware this has something to do with closures, but I am relatively new to javascript.
I tried querySelectorAll, but that did not work either
window.addEventListener("load", function() {
/*****************************
1. When confirm button clicked, gather information and put it in a data base
2. Reset the planifier
3. Put info in the corresponding date
4. When hovering over a date with a plan, show the plans
5. When the next/previous month button clicked, change the month
7. Reset the plan
6. Update the month UI
7. Add correspond dates and remove last plans from the UI
*****************************/
// UI CONTROLLER
var UIController = (function() {
// Sets all inputs
var DOMStrings = {
calenderMonth: ".calender-month",
confirmButton: ".confirm",
inputDate: ".ask-date",
inputItem1: ".ask-item1",
inputItem2: ".ask-item2",
inputItem3: ".ask-item3",
inputItem4: ".ask-item4",
warningText: ".warning"
}
return {
calenderDefault: function() {
//
var now, currentDay, weekDays, currentWeekDay, calenderRow, months, currentMonth, currentYear, firstDayThisMonth, prevMonth, lastDayOfMonth, lastWeekDayLastMonth;
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
now = new Date();
currentYear = now.getFullYear(); //2020
currentDay = now.getDate();
currentWeekDay = weekDays[now.getDay()];
currentMonth = months[now.getMonth()];
firstDayThisMonth = new Date(now.getFullYear(), now.getMonth(), 1).getDay();
prevMonth = new Date(now.getFullYear(), now.getMonth(), 0);
lastWeekDayLastMonth = prevMonth.getDay();
lastDayOfMonth = (new Date(now.getFullYear(), now.getMonth() + 1, 0)).getDate();
// Clears out boxes in the first row that don't belong to the current month as well as adding the correct numbers to the date
function replace(a) {
var i;
for (i = 0; i < 7; i++) {
if (counter > lastDayOfMonth) {
counter++;
document.getElementById(a + "-" + weekDays[i]).textContent = "";
document.getElementById(a + "-" + weekDays[i]).style.borderColor = "#ff9999";
} else if (counter <= lastDayOfMonth) {
document.getElementById(a + "-" + weekDays[i]).textContent = counter;
counter++;
}
}
}
for (var a = 1; a <= 6; a++) {
var counter;
if (a === 1) {
counter = 1;
for (i = lastWeekDayLastMonth; i >= 0; i--) {
document.getElementById(a + "-" + weekDays[i]).textContent = "";
document.getElementById(a + "-" + weekDays[i]).style.borderColor = "#ff9999";
}
for (i = lastWeekDayLastMonth + 1; i < 7; i++) {
document.getElementById(a + "-" + weekDays[i]).textContent = counter;
counter++;
}
} else if (a === 2) {
replace(a);
} else if (a === 3) {
replace(a);
} else if (a === 4) {
replace(a);
} else if (a === 5) {
replace(a);
} else if (a === 6) {
replace(a);
}
}
// This sets the title of the calender AKA the h2
document.querySelector(DOMStrings.calenderMonth).textContent = currentMonth + ", " + currentYear;
// This makes the border of the current day black (or another color if I change it)
if (currentDay < (7 - firstDayThisMonth)) {
calenderRow = 1;
} else if (currentDay < (14 - firstDayThisMonth)) {
calenderRow = 2;
} else if (currentDay < (21 - firstDayThisMonth)) {
calenderRow = 3;
} else if (currentDay < (28 - firstDayThisMonth)) {
calenderRow = 4;
} else if (currentDay < (35 - firstDayThisMonth)) {
calenderRow = 5;
} else {
calenderRow = 6;
}
document.getElementById(calenderRow + "-" + currentWeekDay).style.borderColor = "black";
},
resetValues: function() {
//reset values
document.querySelector(DOMStrings.inputDate).value = "";
document.querySelector(DOMStrings.inputItem1).value = "";
document.querySelector(DOMStrings.inputItem2).value = "";
document.querySelector(DOMStrings.inputItem3).value = "";
document.querySelector(DOMStrings.inputItem4).value = "";
//clear the warning
document.querySelector(DOMStrings.warningText).textContent = "";
},
getValues: function() {
return {
date: document.querySelector(DOMStrings.inputDate).value,
item1: document.querySelector(DOMStrings.inputItem1).value,
item2: document.querySelector(DOMStrings.inputItem2).value,
item3: document.querySelector(DOMStrings.inputItem3).value,
item4: document.querySelector(DOMStrings.inputItem4).value,
}
},
getDOMStrings: function() {
return DOMStrings;
}
};
})();
// DATA CONTROLLER
var dataController = (function() {
return {
data: {
plans: [],
}
};
})();
// APP CONTROLLER
var appController = (function(UICtrl, DATACtrl) {
var DOM;
var setUpEventListeners = function() {
var weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
DOM = UICtrl.getDOMStrings();
// If confirm button clicked, do this
document.querySelector(DOM.confirmButton).addEventListener("click", planify);
document.getElementById("1-Monday").addEventListener("click", showPlans);
// STACK OVERFLOW USERS HERE
for (var a = 1; a < 7; a++) {
for (var i = 0; i < 7; i++) {
document.getElementById(a + "-" + weekDays[i]).addEventListener("click", showPlans);
}
}
};
var checkInput = function(input) {
if (input.date === "") {
document.querySelector(DOM.warningText).textContent = "Please put a date";
} else if (input.item1 === "" && input.item2 === "" && input.item3 === "" && input.item4 === "") {
document.querySelector(DOM.warningText).textContent = "Please put atleast one, ONE ITEM. thank you :)";
} else if (input.item1 == false) {
document.querySelector(DOM.warningText).textContent = "You couldn't be normal and just put it in the first slot ey?";
} else {
// store values in data
DATACtrl.data.plans.push(input);
console.log(DATACtrl.data.plans);
// reset the values
UICtrl.resetValues();
}
};
var planify = function(event) {
var input;
//get values
input = UICtrl.getValues();
// check if values are in the input
checkInput(input);
//put values on UI
// 1. put icon to show it is there
// 2. when clicked, it shows the box with the values
};
var showPlans = function() {
DATACtrl.data.plans.push("asdadasda");
console.log(DATACtrl.data.plans);
}
return {
init: function() {
// 1. Set calender month and year to current time
UIController.calenderDefault();
// 2. Set up event listeners
setUpEventListeners();
}
};
})(UIController, dataController);
appController.init();
});
* {
font-family: "Helvetica", "arial";
}
body {
margin: 0;
background-color: #1f1f60;
}
div {
margin: 0;
}
/* Top panel with mountains image*/
.panel {
background: url(mountains.jpg);
box-shadow: 0px 0px 10px 1px black;
height: 400px;
width: 100%;
background-position: 10% 40%;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
text-align: center;
margin: 10
}
.boxes {
display: inline-block;
position: relative;
top: 100px;
}
.container {
text-align: center;
}
/* Left box in .panel */
.left-box {
box-shadow: 0px 0px 10px 1px black;
display: inline-block;
background-color: white;
width: auto;
padding: 26px 25px 26px 25px;
border-radius: 15px;
vertical-align: bottom;
margin: 0 5px 0 5px;
}
.statisticsTitle {
padding: 10px 20px 10px 20px;
font-size: 30px;
}
.information-plans {
background: rgb(255, 51, 51);
background: linear-gradient(35deg, rgba(255, 51, 51, 1) 0%, rgba(255, 175, 62, 1) 100%);
padding: 15px 10px 15px 10px;
border: 1px solid;
border-radius: 10px;
color: white;
}
.totalPlans {
padding: 5px;
}
.totalPlans-title {
display: inline-block;
}
.totalPlans-output {
display: inline-block;
}
.completedPlans {
padding: 5px;
}
.completedPlans-title {
display: inline-block;
}
.completedPlans-output {
display: inline-block;
}
/* Right box in .panel */
.right-box {
box-shadow: 0px 0px 10px 1px black;
display: inline-block;
background: white;
width: auto;
padding: 25px;
border-radius: 15px;
margin: 0 5px 0 5px;
}
.information-all {
z-index: 5;
}
.planifierTitle {
padding: 10px 20px 10px 20px;
font-size: 30px;
}
.inputFields {}
.ask {
color: white;
background: rgb(255, 51, 51);
background: linear-gradient(35deg, rgba(255, 51, 51, 1) 0%, rgba(255, 175, 62, 1) 100%);
display: inline-block;
padding: 15px 10px 15px 10px;
border: 1px solid;
border-radius: 10px;
vertical-align: top;
}
input {
padding: 3px 2px 3px 2px;
display: block;
width: 125px;
border: 1px solid white;
border-radius: 7px;
height: 20px;
margin-top: 10px;
}
.btn-confirm {
display: inline-block;
border: 1px solid #00ff99;
border-radius: 11.5px;
}
.confirm {
color: white;
height: 88px;
width: 153px;
border: 1px solid #00ff99;
border-radius: 10px;
font-size: 25px;
background-color: #00ff99;
}
button:hover {
cursor: pointer;
}
.warning {
position: absolute;
color: red;
font-size: 14px;
}
.planPresenter {
position: relative;
display: inline-block;
vertical-align: center;
box-shadow: 0px 0px 10px 1px black;
padding: 0 0 50px 0;
background: rgb(255, 51, 51);
background: linear-gradient(35deg, rgba(255, 51, 51, 1) 0%, rgba(255, 175, 62, 1) 100%);
top: -30px;
width: 1010px;
height: auto;
text-align: center;
border: 1px solid #ff3333;
border-radius: 10px;
margin: 10px;
z-index: -1;
}
.calender-box {
display: inline-block;
margin: 30px 20px 20px 20px;
}
.calender-row {
margin: 0;
padding: ;
}
.calender-day {
vertical-align: top;
display: inline-block;
height: 100px;
width: 100px;
border: 1px solid white;
background: white;
margin: 2px 0 2px 0;
padding: 8px;
border-radius: 2px;
}
.calender-week {
height: 20px;
text-align: center;
vertical-align: center;
}
.pastMonth {
position: absolute;
top: 440px;
left: 10px;
display: inline-block;
background: rgba(255, 255, 255, 0);
border: 0px;
}
.nextMonth {
position: absolute;
display: inline-block;
background-color: rgba(255, 255, 255, 0);
border: 0px;
top: 440px;
right: 10px;
}
.current-day {
background: #ff4d4d;
}
.planList-box {
width: 400px;
margin: 10px;
vertical-align: top;
border: 0px;
border-radius: 10px;
background: white;
display: inline-block;
position: relative;
top: -70px;
padding: 20px;
padding-top: 60px;
z-index: -1;
height: 904.31px;
box-shadow: 0px 0px 10px 1px black;
}
.planList-title {}
.planList-items {}
.planList-item {
border: 0px solid white;
border-radius: 4px;
text-align: left;
background: rgb(255, 51, 51);
background: linear-gradient(35deg, rgba(255, 51, 51, 1) 0%, rgba(255, 175, 62, 1) 100%);
padding: 5px 10px 5px 10px;
margin: 10px;
max-width: 100%;
}
.planList-box::-webkit-scrollbar {
width: 10px;
margin-right: 10px;
}
.planList-box::-webkit-scrollbar-track {
margin: 20px 10px 20px 0px;
padding: 10px;
}
.planList-box::-webkit-scrollbar-thumb {
background: #1f1f60;
border: 0px;
border-radius: 5px;
width: 12px;
}
.planList-box::-webkit-scrollbar-thumb:hover {
background: #13133a;
}
<!doctype html>
<html lang="en">
<head>
<title>Daily Planning Tool</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="container">
<div class="panel">
<div class="boxes">
<div class="left-box">
<div class="information-all">
<div class="statisticsTitle">Statistics</div>
<div class="information-plans">
<div class="totalPlans">
<div class="totalPlans-output">%12%</div>
<div class="totalPlans-title">total plans</div>
</div>
<div class="completedPlans">
<div class="completedPlans-output">%22%</div>
<div class="completedPlans-title">completed plans</div>
</div>
</div>
</div>
</div>
<div class="right-box">
<div class="information-all">
<div class="planifierTitle">Planifier</div>
<div class="inputFields">
<div class="ask">Select Date<input class="ask-date" type="date"></div>
<div class="ask">Item 1<input class="ask-item1" type="text" placeholder="e.g. Math"></div>
<div class="ask">Item 2<input class="ask-item2" type="text" placeholder="e.g. Science"></div>
<div class="ask">Item 3<input class="ask-item3" type="text" placeholder="e.g. English"></div>
<div class="ask">Item 4<input class="ask-item4" type="text" placeholder="e.g. Art"></div>
<div class="btn-confirm"><button class="confirm">confirm</button></div>
<div class="warning"></div>
</div>
</div>
</div>
</div>
</div>
<div class="planPresenter">
<button class="pastMonth"><i class="fa fa-chevron-left" style="font-size: 50px; color: white;"></i></button>
<div class="calenderID" id="calender-0">
<div class="calender-box">
<h2 class="calender-month">%month%, %year%</h2>
<div class="calender-row">
<div class="calender-day calender-week">Sunday</div>
<div class="calender-day calender-week">Monday</div>
<div class="calender-day calender-week">Tuesday</div>
<div class="calender-day calender-week">Wednesday</div>
<div class="calender-day calender-week">Thursday</div>
<div class="calender-day calender-week">Friday</div>
<div class="calender-day calender-week">Saturday</div>
</div>
<div class="calender-row">
<div class="calender-day" id="1-Sunday">1</div>
<div class="calender-day" id="1-Monday">2</div>
<div class="calender-day" id="1-Tuesday">3</div>
<div class="calender-day" id="1-Wednesday">4</div>
<div class="calender-day" id="1-Thursday">5</div>
<div class="calender-day" id="1-Friday">6</div>
<div class="calender-day" id="1-Saturday">7</div>
</div>
<div class="calender-row">
<div class="calender-day" id="2-Sunday">8</div>
<div class="calender-day" id="2-Monday">9</div>
<div class="calender-day" id="2-Tuesday">10</div>
<div class="calender-day" id="2-Wednesday">11</div>
<div class="calender-day" id="2-Thursday">12</div>
<div class="calender-day" id="2-Friday">13</div>
<div class="calender-day" id="2-Saturday">14</div>
</div>
<div class="calender-row">
<div class="calender-day" id="3-Sunday">15</div>
<div class="calender-day" id="3-Monday">16</div>
<div class="calender-day" id="3-Tuesday">17</div>
<div class="calender-day" id="3-Wednesday">18</div>
<div class="calender-day" id="3-Thursday">19</div>
<div class="calender-day" id="3-Friday">20</div>
<div class="calender-day" id="3-Saturday">21</div>
</div>
<div class="calender-row">
<div class="calender-day" id="4-Sunday">22</div>
<div class="calender-day" id="4-Monday">23</div>
<div class="calender-day" id="4-Tuesday">24</div>
<div class="calender-day" id="4-Wednesday">25</div>
<div class="calender-day" id="4-Thursday">26</div>
<div class="calender-day" id="4-Friday">27</div>
<div class="calender-day" id="4-Saturday">28</div>
</div>
<div class="calender-row">
<div class="calender-day" id="5-Sunday">29</div>
<div class="calender-day" id="5-Monday">30</div>
<div class="calender-day" id="5-Tuesday">31</div>
<div class="calender-day" id="5-Wednesday">NaN</div>
<div class="calender-day" id="5-Thursday">NaN</div>
<div class="calender-day" id="5-Friday">NaN</div>
<div class="calender-day" id="5-Saturday">NaN</div>
</div>
<div class="calender-row">
<div class="calender-day" id="6-Sunday">29</div>
<div class="calender-day" id="6-Monday">30</div>
<div class="calender-day" id="6-Tuesday">31</div>
<div class="calender-day" id="6-Wednesday">NaN</div>
<div class="calender-day" id="6-Thursday">NaN</div>
<div class="calender-day" id="6-Friday">NaN</div>
<div class="calender-day" id="6-Saturday">NaN</div>
</div>
</div>
</div>
<!--
<div class="calender-box" id="calender-2">
<h2 class="calender-month">%month%, %year%</h2>
<div class="calender-row">
<div class="calender-day calender-week">Sunday</div>
<div class="calender-day calender-week">Monday</div>
<div class="calender-day calender-week">Tuesday</div>
<div class="calender-day calender-week">Wednesday</div>
<div class="calender-day calender-week">Thursday</div>
<div class="calender-day calender-week">Friday</div>
<div class="calender-day calender-week">Saturday</div>
</div>
<div class="calender-row">
<div class="calender-day" id="1-Sunday">1</div>
<div class="calender-day" id="1-Monday">2</div>
<div class="calender-day" id="1-Tuesday">3</div>
<div class="calender-day" id="1-Wednesday">4</div>
<div class="calender-day" id="1-Thursday">5</div>
<div class="calender-day" id="1-Friday">6</div>
<div class="calender-day" id="1-Saturday">7</div>
</div>
<div class="calender-row">
<div class="calender-day" id="2-Sunday">8</div>
<div class="calender-day" id="2-Monday">9</div>
<div class="calender-day" id="2-Tuesday">10</div>
<div class="calender-day" id="2-Wednesday">11</div>
<div class="calender-day" id="2-Thursday">12</div>
<div class="calender-day" id="2-Friday">13</div>
<div class="calender-day" id="2-Saturday">14</div>
</div>
<div class="calender-row">
<div class="calender-day" id="3-Sunday">15</div>
<div class="calender-day" id="3-Monday">16</div>
<div class="calender-day" id="3-Tuesday">17</div>
<div class="calender-day" id="3-Wednesday">18</div>
<div class="calender-day" id="3-Thursday">19</div>
<div class="calender-day" id="3-Friday">20</div>
<div class="calender-day" id="3-Saturday">21</div>
</div>
<div class="calender-row">
<div class="calender-day" id="4-Sunday">22</div>
<div class="calender-day" id="4-Monday">23</div>
<div class="calender-day" id="4-Tuesday">24</div>
<div class="calender-day" id="4-Wednesday">25</div>
<div class="calender-day" id="4-Thursday">26</div>
<div class="calender-day" id="4-Friday">27</div>
<div class="calender-day" id="4-Saturday">28</div>
</div>
<div class="calender-row">
<div class="calender-day" id="5-Sunday">29</div>
<div class="calender-day" id="5-Monday">30</div>
<div class="calender-day" id="5-Tuesday">31</div>
<div class="calender-day" id="5-Wednesday">NaN</div>
<div class="calender-day" id="5-Thursday">NaN</div>
<div class="calender-day" id="5-Friday">NaN</div>
<div class="calender-day" id="5-Saturday">NaN</div>
</div>
</div>
-->
<button class="nextMonth"><i class="fa fa-chevron-right" style="font-size: 50px; color: white;"></i></button>
</div>
<div class="planList-box">
<div class="planID" id="plan-0">
<h3 class="planList-title">%month% %day%</h3>
<div class="planList-items">
<div class="planList-item1 planList-item">• Do this and that</div>
<div class="planList-item2 planList-item">• do this and that plus it and at</div>
<div class="planList-item3 planList-item">• so you're a hacker ey?, add discord</div>
<div class="planList-item4 planList-item">• my discord is JinXz#1643 I wanna have a talk, because this is not right, and you know that</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>
</body>
</html>
answer: I just figured out that this is not working, because I set the z-index of the element to -1, making it go under the .container layer.
I can't get things to float correctly in firefox.
If you open it in FireFox you will notice its all on top of itself.
But it works fine in IE, and Chrome.
I may be doing it wrong, but you can see I have tried moz-inline-stack, and putting the float elements first.
Here is a Fiddle link.
https://jsfiddle.net/james_freeman/zWxbL/10/embedded/result/
<div style="background-color:white;">
<div id="psNav" style="color: #0475b8;">
<div class="psNav-right dropdown">
<a href="#" id="navbarMenu" class="dropdown-toggle psNav-link" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">MENU <i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu" style="padding:0;">
<li>Conversations
</li>
<li>Directory
</li>
</ul>
</div>
<div class="psNav-right"> <a class="psNav-link" id="logoutLink" href="">Logout</a>
</div>
<div class="psNav-right"> <a class="psNav-link" id="displayName">Doe, John</a>
</div>
<div class="psNav-left"> <a class="psNav-link" href="">
<img id="navBarLogo" src="" alt="Company Logo">
</a>
</div>
<div class="psNav-center"> <a class="psNav-link" id="navbarPageTitle">somewhere</a>
</div>
</div>
</div>
#psNav {
display: inline-block;
display: -moz-inline-stack;
vertical-align: top;
width: 100%;
text-align: center;
height: 90px;
clear: both;
font-family:'Source Sans Pro', sans-serif;
font-weight: 600;
font-size: 1.5em;
border-bottom-color: #e7e7e7;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
*display: inline;
}
.psNav-center {
display: inline-block;
display: -moz-inline-stack;
margin: 0 auto;
height: inherit;
}
.psNav-left {
float: left;
height: inherit;
padding-left: 10px;
}
.psNav-right {
float: right;
height: inherit;
padding: 0 20px 0 20px;
}
.psNav-link {
vertical-align: middle;
line-height: 85px;
text-decoration: none !important;
}
.psNav-link:visited {
color: #0475b8;
}
.psNav-link:hover {
color: #0475b8;
}
.psNav-link:active {
color: #0475b8;
}
#displayName {
cursor: default;
font-weight: 300;
}
#navbarPageTitle {
cursor: default;
}
#navBarLogo {
height: 55px;
}
I'm not sure what you thought -moz-inline-stack was going to achieve, but it is the cause of your broken layout.
Removing it from the fiddle results in the layout returning to exactly what how it looks in the other browsers.
I have a three column layout where the logo at browser view is to the left, one word is in the middle, and the nav menu is to the right. This is fine at full browser.
When it is resized to mid or mobile view the columns are not clearing and stacking correctly.
Here is what I am getting right now at full view: http://postimg.org/image/wvfl1hkut/
Here is what needs fixed at mobile and mid view: http://postimg.org/image/sa1nvyw8j/
Here is my code:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="header">
<div class="col-xs-6 col-sm-4">
<a href="{{ URL::route('home') }}">
<div class="header_group">
<img src="../../images/logo.png">
</div><!--header group -->
</a>
</div>
<div class="col-xs-6 col-sm-3"></div>
<div class="col-xs-6 col-sm-4">
<p> </p>
</div>
<div class="col-xs-6 col-sm-4">
#include('layout.navigation')
</div>
</div><!-- main header -->
</div><!-- row -->
</div>
</div>
External CSS sheet
.header {
width: 100%;
height: auto;
margin: 0 auto;
background: red;
}
.header_group {
background-color: none;
width: 100%;
height: auto;
display: inline-table;
font-size: 1.5em;
font-weight: 400;
font-family: 'Roboto', sans-serif;
color: #f0fff0;
clear: none;
margin-top: 5%;
}
.header_text {
vertical-align: middle;
display: inline;
text-align: center;
color: #f05152;
}
.nav {
width: auto;
height: auto;
margin-top: 12%;
}
.nav a {
color: #000;
padding-left: 10%;
margin-left: 4%;
}
.navbar {
width: 100%;
height: 20%;
padding-top: 0;
}
.wrapper {
width: 100%;
height: 500px;
background: url(../../../images/yellow.png) repeat,
}
Bootstrap has a 12 column grid. Each set of 12 columns should be contained in a .row.
Your code has 4 .col-xs-6 columns, which total 24 columns. It also has 3 .col-sm-4 and 1 .col-sm-3 columns, which total 15 columns.
If you place the columns in their correct rows of 12 then they will clearfix correctly.
FYI: From the documentation...
Content should be placed within columns, and only columns may be immediate children of rows.
Move .header.