I have an unfinished test project created by Susy\Sass\Compass:
https://github.com/gearmobile/portfolio/tree/master/travel
Width of the block wrapper .wrapper is 940px. But I need to 960px. What do I need for this?
You can change the width of your "wrapper" in the .scss files
for example
.wrapper {
#include container(960px);
}
Or you can define it in the susy global map
$susy: (
container: 960px
)
Keep in mind that you can always declare a new container , lets say you had a page called trip.html you can always declare a new width for the wrapper
<body>
<div class="trip-wrapper">
<nav>Trio nav</nav>
<div>Trip content</div>
</div>
</body
.wrapper {
#include container(900px);
}
Related
I added fullpage.js to my project and my css transitions stopped working.
I analyzed the code using code inspector to see, if the classes have been removed or if the transitions have been overwritten but I can't find something. It looks like I don't have naming issues with my classes, as well.
My transitions are simple. I have a class like
.element {
opacity: 0;
transition: opacity .5s ease-in;
}
.element-animated {
opacity: 1;
}
Then a little bit of jQuery to active the animation on load:
$(document).ready(function(){
$('.element').addClass('element-animated');
});
When adding $('#fullpage').fullpage(); to my code, my transitions stop working. When I remove it, they work again.
My architecture looks like:
<div id="fullpage">
<div class="section">
<div class="element"></div>
</div>
<div class="section2">
<div class="element2"></div>
</div>
</div>
If you read the fullpage.js faqs you'll it is recommended to fire those actions on the afterRender callback:
Short answer: if you are using options such as verticalCentered:true or overflowScroll:true in fullPage.js initialization, or even horizontal slides, then you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in the afterRender callback of fullpage.js
new fullpage('#fullpage', {
afterRender: function(){
$('.element').addClass('element-animated');
}
});
This example should paint body in red color, but it doesn't because of scoped attribute.
<template>
<div></div>
</template>
<script>
export default {
name: 'test',
props: {},
mounted(){
document.body.classList.add('highlight');
}
}
</script>
<style lang="scss" scoped>
.highlight {
background-color: red;
}
</style>
Is there some workaround for this case?
You don't need scoped styles because your styles are not scoped to your component.
If you need to have both scoped to component styles and global styles, you should declare two style tags. Example in official docs.
However, you should avoid global styles.
You are applying a scoped class to an element (body) outside the component!
All classes declared in scoped style of a component can be used only for elements inside that component because the class name is automatically changed to something like this: .highlight[2d35fds3sd]!
And all elements inside the component have that unique id :
<template>
<div 2d35fds3sd>
<span 2d35fds3sd> </span>
</div>
</template>
but body element does not have this unique id!
So if you want to apply a class to body, you have to put that class in a global css file.
Just have switched to Foundation 4.
I want to put texture background pattern for body and another texture background for container with all elements. Can't find out how to create this one in proper way.
In pure html+css i would create container element. But in Foundation4 it will have 100% width and overlap body background.
<div class="container">
<div class="row">
...
</div>
<div class="row">
...
</div>
</div>
If i add .row class to container i got desired result, but offensive horizontal scroll adds on mobile.
...
How to build this simple layout in F4?
I could style all .row elements, but it will use personal background for every element, which is undesired.
Take a look at the answer I gave about CSS and background elements here: How to use background images in Foundation
I want the image to be centered next to the text.The amount of text will be different in each box so I can't set the height.As I research people mainly use two ways of vertical centering.Using line-height which I can't use, because I don't have fixed height.Second one is using absolute positioning which I can't use, because left div with image inside will cover the text.If I set padding to text, when image is not there it won't look good.
The best I could think of is to use jQuery to get and set the container height, and then set the margin according to the height.
<div class="container">
<div class="image_holder">
<img src="http://blog.oxforddictionaries.com/wpcms/wp-content/uploads/cat-160x160.jpg" alt="cat" />
</div>
<p>text</p>
</div>
<style type="text/css">
.container {
width:600px;
overflow:hidden; }
.image_holder {
width:100px;
height:100%;
float:left;
background:#eaf0ff; }
p {
width:500px;
float:left; }
</style>
<script>
$('.container').css('height', $('.container').height() );
$('.image_holder').css('margin-top', ( $('.container').height() - $('.image_holder img').height() ) / 2 );
</script>
Is there a way to do it cleanly with pure CSS ?
The best solution I came up with is to absolutely position the picture inside the box and then use javascript to remove padding if there is no image in the box.
I'm having difficulty rendering my EXTJS grid that rides on top of a django app. The grid is only displayed some of the time. When the grid is supposed to be displayed it works. When the grid is not supposed to be displayed I get a "ct is not defined" error from extjs-core. I researched this error and it seems it occurs when my <div id="my-grid"> is not defined. The div is defined inside a grid.html that is only loaded some of the time.
These are my files.
view_main.js - I define all of my objects here inside Ext.onReady.
Ext.onReady(function(){
var grid = new Ext.grid.GridPanel({
border: false,
//...
}
grid.render('my-grid') // comment this out and "ct is not defined" goes away
// but the grid never renders in grid.html
base.html - my base django file that my templates extend. This file also loads my view_main.js file.
<!-- Load Script -->
<script type="text/javascript" src="/site_media/js/view_main.js" ></script>
grid.html - the grid html file that gets rendered inside an EXTJS TabPanel.
<div id="my-grid" style="border: height: 800px; width: 800px;"></div>
I don't want to even attempt to render my grid unless grid.html is being displayed. But the grid doesn't work unless I put grid.render inside of view_main.js
If I try to put the render script inside grid.html the I get "grid is not defined error"
<script type="text/javascript" >
Ext.onReady(function(){
grid.render('my-grid');
}
</script>
How can I only render the grid when grid.html is loaded?
If you're just trying to avoid that error, try checking for the existence of 'my-grid',
Ext.onReady(function() {
if( (Ext.get('my-grid')) !== null)
{
grid.render('my-grid');
}
});