I am trying to make a header for my reveal.js presentation that sticks to the top of the screen. The content in the header is dynamic on a per-slide basis, so I have to place the markup within the section tag.
Apparently position:fixed does not really provide satisfying results in reveal.js if the markup is within the section tag. I can't really make out why that is exactly, but I found some info in the github repo suggesting setting the presentation size to fit the viewport size with:
Reveal.initialize {
...
width: '100%',
height: '100%',
...
}
But it still doesn't work for me - it seems the presentation is not really affected by the above. Here is a demo:
https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/reveal.js/index.html
Any ideas how to solve this?
Add this to css:
.reveal.slide .slides > section, .reveal.slide .slides > section > section {
min-height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
position: absolute !important;
top: 0 !important;
align-items: center !important;
}
section > h1, section > h2 {
position: absolute !important;
top: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
left: 0 !important;
right: 0 !important;
text-align: center !important;
}
.print-pdf .reveal.slide .slides > section, .print-pdf .reveal.slide .slides > section > section {
min-height: 770px !important;
position: relative !important;
}
Demo https://rawgit.com/rofrol/reveal.js/fixed_header/
Code https://github.com/rofrol/reveal.js/blob/fixed_header/index.html#L411
Discussion https://github.com/hakimel/reveal.js/issues/1312 https://github.com/hakimel/reveal.js/issues/180
At the end of your main.html add:
Reveal.initialize({
center: false,
})
Related
I am not sure why react-slick adds bellow inline properties while forming the slider.
width: 100%; display: inline-block;
Because of this my applications own CSS doesn't work and behaves differently. Please help me understanding and resolve this.
Please follow the mentioned link, where I tried to mimic the issue related to react-slick
https://stackblitz.com/edit/react-b8wcgf
You need in CSS add after the element value !important.
For example:
.product-wrap {
position: relative;
width: 30px !important;
display: grid !important;
border: 1px solid red;
}
Instead of 30px and grid type your values but keep !important.
I am trying to mimic the WinJS grouped list view using flexbox. I am getting close (I think) except that the columns overlap when resizing.
http://jsfiddle.net/w8ts4Lnx/5/
I want the items to stay inside the group and let the group grow horizontally.
body {
height: 100%;
display: flex;
flex-flow: column wrap;
}
h1 {
padding: 1em;
}
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: column wrap;
max-height: 600px;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
width: 200px;
}
Any ideas what I'm missing?
If you don't want your content to overflow the container you must specify flex-shrink: 0;
flex-shrink source
This 'number' component sets flex-shrink longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1. The flex shrink factor is multiplied by the flex basis when distributing negative space.
Im not sure what winJS behavior you're trying to mimic since i've never used winJS, however I think this is closer to the proper behavior you're looking to achieve: http://jsfiddle.net/w8ts4Lnx/11/
The columns overlap because the contents doesn't fit. The Items don't fit in the group, so they flow-over.
To solve this you have to specify an overflow-strategy for the group-div, with "overflow" like this (the last one):
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: column wrap;
max-height: 600px;
overflow: hidden;
}
The default is visible which make them fall outside. Read more here: http://www.w3schools.com/cssref/pr_pos_overflow.asp
There are other options than hidden. You can set vertical/horizontal scroll, or both. Just choose whatever gets you closer to that desired "WinJS grouped list view". Try:
overflow-x: scroll;
overflow-y: auto;
or
overflow-y: auto;
overflow-x: scroll;
Happy coding!
I faced a similar issue and in my case the fix was removing the height setting on the container styling. This allowed the container size to grow with the changing browser heights.
"let the group grow horizontally"- You have to use the flex-direction as "row" on the .group, and you have to wrap the groups inside the #content, then it won't overlap anymore..
http://jsfiddle.net/gafcvq9b/2/
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex-flow: row wrap;
flex-grow: 1;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: row wrap;
max-height: 600px;
}
I think it would be best not to set width since you want flexbox to dynamically determine it. so I removed it and then I added flex grow to increase the first group.
http://jsfiddle.net/mspriyakk/vv3tfrtv/3/
#content > .group:nth-of-type(1) {
flex-grow: 2;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
}
This is the correct answer that's fixes overlapping columns:
.flex-container {
display: flex;
flex-flow: column;
}
.flex-item {
flex: 1 0 auto;
}
It might be a little late, but I made a codepen, where I was working with this problem, maybe it will help to the people reading this question.
html
<body>
<div class="test-container">
<div class="item item1">
item1
</div>
<div class="item item2">
item2
</div>
<div class="item item3">
item3
</div>
</div>
</body>
css (scss)
.test-container {
display: flex;
justify-content: space-between;
height: 100%;
width: 50%;
background-color: red;
padding-left: 2rem;
.item {
opacity: 0.6;
height: 100px;
width: 100px;
flex-basis: 100px;
margin-left: -2rem;
}
.item1 {
background-color: cyan;
z-index: 10;
}
.item2 {
background-color: blue;
color: red;
z-index: 20;
}
.item3 {
background-color: black;
z-index: 30;
color: white;
}
}
https://codepen.io/Garma/pen/ZZmNWg?editors=1100
Cheers
My product image gallery uses a fancy box script and since i installed a plugin, i am having a small problem with the images popping up, then immediately jumping to the upper left corner.
i have tried adding stying to recenter it but its not working.
here is a product page:
http://a1decals.com/products-page/tribal-symbols-decals/flags-decals/america-american-flag-decal-sticker/
if you click on an image in the gallery you can see it popup.
i inspect the image element with firebug and get:
<div id="fancybox-wrap" style="width: 695px; height: auto; top: 0px; left: 0px; display: block; opacity: 1; transition: all 0s ease; -webkit-transition: all 0s ease;">
and i tried adding:
.fancybox-wrap {
top: 50% !important;
left: 50% !important;
}
and
#fancybox-wrap {
position: absolute;
top: 50% !important;
left: 50% !important;
}
i cant seem to override whatever is restyling that popup. any help is greatly appreciated
I'm trying to center my content div. It's set to 100%, and the div is contained in body, which is also set to 100%. I have a max-width: 1400px because I don't want my content to stretch more than that if the screen resolution is higher. The thing is, it doesn't work using margin: auto. My content stands on the left, uncentered on screen wider than 1400px.
If I delete the max-width, everything is perfectly centered on wide screens, but the content is stretched to the the whole screen...
#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;
}
Easiest way to achieve this, is to set the width property to the max width you need, and add max-width: 100%;. This will prevent it from being bigger than 100% but still go up to the max width. Also, you should remove the absolute positioning:
JS Fiddle
You can use the transform technique, which doesn't require extra mark-up or media queries.
#content {
position: relative; /* 'fixed' will work also. */
max-width: 500px; /* Your required width here. */
width: 100%;
left: 50%;
transform: translateX(-50%);
}
Here's a demo https://jsfiddle.net/matharden/6uduf7av/
Use Flexbox...
Put this classes in the parent element (the body):
The HTML
<body class="p-flexbox flex-hcc">
<!-- The content -->
</body>
Where:
p-flexbox means parent-flexbox
flex-hcc means flexbox-horizontal-center-center
The CSS
.p-flexbox {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Cheers,
Leonardo
Using the emenu Yii extension for a menu. The underlying project for this extension is http://lwis.net/free-css-drop-down-menu/ .
Right now the sub menus display in a row (which does eventually wrap to a 2nd row). I'm using the "nvidia" theme.
How do I make submenus vertical? I want the items in the sub menu to stack vertically on top of one another.
This is a css issue. The inner <ul> should have the style: width : 100% which comes from dropdown.css, but it is being overridden by themes/nvidia.com/default.css where it is specified as: width: 170px. So you can change that value back to 100% by adding it in your own custom css file.
dropdown.css:
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
themes/nvidia.com/default.css:
ul.dropdown ul {
width: 170px;
background-color: #333;
color: #fff;
font-size: 11px;
text-transform: none;
filter: alpha(opacity=90);
-moz-opacity: .9;
KhtmlOpacity: .9;
opacity: .9;
}
mystyle.css:
ul.dropdown ul{
width:100% !important;
}