I am working to create some slides using reveal.js (from within R markdown if it matters). Compared to other frameworks (like ioslides or slidy) there are HUGE margins to the left of the text, as in the graphic below.
I've been trying to edit the css to move the text further to the left but to no avail.
Any ideas?
My css style section is:
<style type="text/css">
.reveal p {
text-align: left;
}
.reveal ul {
display: block;
}
.reveal ol {
display: block;
}
Reveal.initialize({ width: 1920, height: 1080, margin: 0.00, });
</style>
After much investigation, I did figure out a solution (at least in Rmarkdown). Specifically, I added the width and height argument under reveal_options in my output header. The settings below look much better for a 16:9 aspect ratio display.
output:
revealjs::revealjs_presentation:
reveal_options:
width: 1280
height: 720
Related
The problem is I want to make the gray button hidden and get revealed after hovering on a card with hotel pictures.
Currently, I have this site as an example: https://cofffelo.github.io/HotelShop/#
I tried to hide the buttons at their default state by display:none and make it display:block by executing :hover pseudo-index, but because it was hidden from the start, there was nothing to hover, and because I'm kind of a newbie, I ran out of ideas.
The code I tried to add:
.cardbutton{
display: none;
}
.cardbutton:hover{
transform: translateY(30px);
display: block;
background-color: #333;
}
You can use a transition delay
.cardbutton:after {
opacity: 0;
content: "";
}
.cardbutton:hover:after {
opacity: 1;
transition: opacity 0s linear 1.5s;
content: "content text here";
}
I built a css grid with areas header, search, filters and results in html/css
The areas are defined as:
#whole {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"header"
"search"
"filters"
"results";
}
/* laptop and wider, the search and filters appear next to each other..*/
#media screen and (min-width: 760px) {
#whole {
display: grid;
grid-template-columns: 33% auto;
grid-template-rows: auto 15% auto;
grid-template-areas:
"header header header"
"search filters filters"
"results results results";
}
}
Now, I would like to separate the css/html into angular components mapping each to these areas. I added base
I'm focussing on the header which should always be 3 grid columns wide but fits only into column 1.
The header.component.css is:
header {
grid-area: header;
width: 100%;
color: var(--tertiary);
}
and it appears 100% of the first column..
I added View encapsulation none but it seems the component limits itself to only fill grid column 1. Here's most of the code :
https://stackblitz.com/edit/angular-ivy-5uts9t?file=src/app/app.component.ts
Oh, the problem is that in the header css it should be now: app-header not : header
It seems to work now with:
app-header {
grid-area: header;
width: 100%;
color: var(--tertiary);
}
How do you set the size of a google chart in percentage :
I have this in the html:
<div id="chart_div" width="90%" height="20%"></div>
and no width nor height in the options in the js.
But the chart size doesn't adapt to the viewport.
First, use styles to set your dimensions, not attributes:
<div id="chart_div" style="width: 90%; height: 20%;"></div>
The chart will draw to the size of the div by default, but the charts are not responsive. You have to hook a "resize" event handler to the window (or other element if you are resizing within a window) that redraws the chart:
function resizeChart () {
chart.draw(data, options);
}
if (document.addEventListener) {
window.addEventListener('resize', resizeChart);
}
else if (document.attachEvent) {
window.attachEvent('onresize', resizeChart);
}
else {
window.resize = resizeChart;
}
By multiplying with appropriate factor to $(window).width() or $(window).height() in the chart options
var options = {
width: $(window).width(),
height: $(window).height()*0.75
};
Google recommend that you style, like the answer above, with correct CSS and this makes a less-glitchy Chart.
However, you can size it up in Javascript...
https://developers.google.com/chart/interactive/docs/basic_customizing_chart
So, for the options when you draw the chart (using chart.draw(data, options) as above)...
var options = {
width:400,
height:300
}
A good fiddle for a responsive design is here...
http://jsfiddle.net/toddlevy/pyAz5/
$(window).resize(function(){
var container = document.getElementById("chart_div").firstChild.firstChild;
container.style.width = "100%";
chart.draw(data, options);
});
Please Remove the width and the height properties from the options in the scripts and then add the following style to your page
<style>
.chart {
width: 100%;
min-height: 450px;
}
.row {
margin: 0 !important;
}
</style>
I am new to foundation 4 and we are currently using foundation 4 in our project MVC4 + Foundation 4 (through NuGet package)
We want to use accordions on our views.
Foundation 4 offers Sections; http://foundation.zurb.com/docs/components/section.html
but as this looks too bland on the website, we looked at foundation 3 accordion which we felt suited our website; http://foundation.zurb.com/old-docs/f3/elements.php.
Need experts help in understanding how can we make the look & feel of accordions sections similar to the one's available in foundation 3.
We understand foundation 4 doesnot offer images anymore, so how can we implement the small icons on the right.
I'm no expert, but if I understand correctly you just want to add the little triangle image on the right. First of all, are you using scss files ? If not you should definitely check it out here. All you need is to install this visual studio plugin, then download and add the zurb-foundation scss files to your project.
Next up, go to the _section.scss file and look for this part of the code:
#mixin section($section-type:accordion) {
// Accordion styles
#if $section-type == accordion {
border-top: $section-border-size $section-border-style $section-border-color;
position: relative;
.title {
top: 0;
cursor: pointer;
width: 100%;
margin: 0;
background-color: $section-title-bg;
***********************************
*** add a background image here ***
***********************************
a {
padding: $section-padding;
display: inline-block;
color: $section-title-color;
font-size: emCalc(14px);
white-space: nowrap;
width: 100%;
}
&:hover { background-color: darken($section-title-bg, $section-function-factor/2); }
}
.content {
display: none;
padding: $section-padding;
background-color: $section-content-bg;
&>*:last-child { margin-bottom: 0; }
&>*:first-child { padding-top: 0; }
&>*:last-child { padding-bottom: 0; }
}
&.active {
.content { display: block; }
.title { background: $section-title-bg-active;
**********************************************
*** add the "active" background image here ***
**********************************************
}
}
}
There are two ways to add the triangle, either use an image of your choice, or even better, use foundation's css function that creates triangles !
#include css-triangle(5px, #aaaaaa, top);
Note I have not tested modifying foundation's sections, but I'm pretty sure this should do the trick.
SCSS is always the best option. But, for others who are not yet ready to dive into SCSS, you can do it via CSS. In your CSS file, just include the following:
.section-container.accordion > section > .title:after,
.section-container.accordion > .section > .title:after {
content: '\25B8';
position:absolute;
right:10px;
font-size:22px;
}
.section-container.accordion > section.active > .title:after,
.section-container.accordion > .section.active > .title:after {
content: '\25BE';
position:absolute;
right:10px;
font-size:22px;
}
Of course, you can change the font-size as desired or you can simply ommit it. Hope that helps.
I tried to set the height of my webpage to auto with no success. When the text grows, it overlaps the footer. Any ideas where I am getting it wrong? I want to extend the .main class when the text grows.
.main {
background-position: right bottom;
min-height: 1200px;
background-color: #FFFFFF;
background-image: url('../images/side-shape.png');
background-repeat: no-repeat;
height:auto !Important;
}
just remove this line from your footer class
margin-top: -175px;
Looks like you need to clear the float you have in your left column. Put clear: both; in your footer_wrapper and that should fix this.