I am using the documentation at http://purecss.io/grids/
and basically copying the example code to create a grid of thirds
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
However it is simply not displaying as the documentation explains - as 3 columns of equal thirds: http://jsfiddle.net/a7rnzn5f/1/
What am i not understanding ?
It's likely that you don't have the reference to the responsive part of the purecss grids.
From the link you provided:
Since media queries cannot be over-written, we do not include the grid
system as part of pure.css. You'll have to pull it in as a separate
CSS file. You can do this by adding the following tag to your
page.
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
Add that, and you should be good to go!
EDIT: I'm sorry, I didn't notice your fiddle. It looks like you did just the inverse. It doesn't look like you're including the base reference to purecss. I updated your fiddle with the reference below and it seems to work.
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
Related
Images are not showing on my site on github pages.
This is my site:https://rsgrw23.github.io/rate-your-beer/
Locally everything is working fine.
This is the repository: https://github.com/rsgrw23/rate-your-beer
What is wrong?
For example, here's an excerpt of src/components/home.vue <template>:
<template>
<div class="home">
<img class="home__img__header" src="src/assets/craft-beer.jpg" alt="Craft Beer">
<header class="home__header">
<transition appear appear-active-class="bounce-enter-active">
<h1>"Czasem najlepszym wyjściem</h1>
</transition>
<transition appear appear-active-class="bounce-enter-active">
<h2>Jest wyjście na piwo"</h2>
</transition>
</header>
<main class="home__main">
<h1 class="home__title">Fun Facts</h1>
<article class="home__article">
<div class="home__content content-1"><h1>Lepsze od wody?</h1>
<p>W mi... dziś.</p></div>
<img class="home__img img-1" src="src/assets/wish-you-beer-here.jpg" alt="piwo">
</article>
<article class="home__article">
<img class="home__img img-2" src="src/assets/beer-mine.jpg" alt="piwo">
<div class="home__content content-2"><h1>Nie tylko z chmielem</h1>
<p>Je...em.</p>
<p>Co cie...ika!</p></div>
</article>
<article class="home__article">
<div class="home__content content-3"><h1>IPA czyli napój żołnieży</h1>
<p>Bry...wa.</p></div>
<img class="home__img img-3" src="src/assets/water.jpg" alt="piwo">
</article>
</main>
<div class="description">
<div class="description__content">
<div class="description__article">
<h1 class="description__header">Piłeś piwko?</h1>
<h2 class="description__header">Oceń je!</h2>
</div>
</div>
</div>
</div>
</template>
Images are located at src/assets/craft-beer.jpg for instance.
So webpack is able to find the images and process them as resources, you should reference the assets (images) via relative paths, not absolute paths.
So, considering a file at /src/components/home.vue with images at /src/assets (being / the project root), instead of:
<img class="home__img__header" src="src/assets/craft-beer.jpg" alt="Craft Beer">
Use:
<img class="home__img__header" src="../assets/craft-beer.jpg" alt="Craft Beer">
Naturally, in other files, change the relative path accordingly.
For the images to work with Vue the generated file there are few ways.Here is an SO link on the same.
How to import and use image in a Vue single file component?
What you will want to do here is something like this.
<img class="home__img__header" src="~src/assets/craft-beer.jpg" alt="Craft Beer">
This lets the webpack know about the image being an asset and generate its path appropriately.
I am using ag-grid in my application. I would like to use the same instance of the grid options with two grid on the same page. ag-grid only renders one of the grids and leaves the other one empty.
This plnkr shows the issue
http://plnkr.co/edit/4rRNRGbUoy8QhAhGadpQ?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://www.ag-grid.com/dist/ag-grid.js?ignore=notused24"></script>
<script src="script.js"></script>
</head>
<body ng-app="example" ng-controller="exampleCtrl">
<button ng-click="loadData()">Load Data</button>
<button ng-click="showPopup()">Toggle Docked</button>
<div ng-show="docked">
<h2>Docked</h2>
<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>
<div ng-show="docked">
<h2>UnDocked</h2>
<div ag-grid="gridOptions" class="ag-fresh" style="height:100%;"></div>
</div>
</body>
</html>
I'm not sure ag-grid supports this.
Maybe you can create a second angular controller and duplicate your gridoptions there?
EDIT: From https://www.ag-grid.com/javascript-grid-master-slave/ :
Using a master/slave relationship, you can have 2 grids with synced columns-- column changes in one grid will be reflected in the other.
To have one grid act as the 'slave' to another, use the slaveGrids option in the master's gridOptions:
gridOptionsSlave = {
// some grid options here
};
gridOptionsMaster = {
// some grid options here
slaveGrids: [gridOptionsSlave]
}
Note that pivot functionality does not work with the master/slave relationship, as the relationship depends on both grids having the same columns.
/j
I am new playwork. I have been going through the tutorials and samples provided the playframework.
I could successfully render helloworld application provided by playframework samples.
I have few doubts regarding the rendering part of main.scala.html.#
This is the default program which I got from samples/helloworld
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
</head>
<body>
<header>
#title
</header>
<section>
#content
</section>
</body>
</html>
Here when I commented out the #content under section tag , I am not able to see the the fields.
Now my question is, where is #content is mapped to the Form field?
I created another structure for my layout and added the #content to the content section. but it does not fit into that
so now my question is #content where is that defined that it is div container and has got some height and weight and all?
I could not understand. Please help me.
Pleae find my customized code below
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
#content</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</body>
</html>
Introduction
From Template parameters in the Play Template documentation, the meaning of the first line is described. Here, we see that two parameter groups are required.
The two parameter groups are:
a String parameter containing the title
a Html parameter containing some HTML content
Usage
To use this template, two parameter groups have to be supplied. In the context of the helloworld application, it is called from app/views/index.scala.html like this:
#main(title = "The 'helloworld' application") {
<h1>Configure your 'Hello world':</h1>
... more HTML elided
}
This pattern is described in http://www.playframework.com/documentation/2.2.x/ScalaTemplateUseCases, where HTML is injected into a template.
main.scala.html contains the template (content contains the HTML to be injected).
index.scala.html contains an example of injection into this template.
Note that calling #main(...) calls the template that is defined in main.scala.html.Similarly, calling #my_template(...) would call the template defined in my_template.scala.html.
In this case, the HTML for the form is defined inside index.scala.html.
Calling the Template
Finally, the root template is called from a controller. For the helloworld application, the template defined in index.scala.html is invoked by the code
def index = Action {
Ok(html.index(helloForm))
}
This is where the form object is injected into the template.
I'm following a beginner's tutorial at http://www.tutorialspoint.com/gwt/gwt_style_with_css.htm.
The code for the HelloWorld.html file is:
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<div id="mytext"><h1>Hello, World!</h1></div>
<div id="gwtGreenButton"></div>
<div id="gwtRedButton"></div>
</body>
</html>
In the HelloWorld.java (extending EntryPoint), I have:
RootPanel.get("gwtGreenButton").add(Btn1);
RootPanel.get("gwtRedButton").add(Btn2);
The 2 lines: RootPanel.get() always result in null. I don't know what happen, what to check? (too bad the site doesn't have a comment/discussion section)
Thanks.
Docs says
RootPanel.get(java.lang.String id)
Gets the root panel associated with a given browser element.
DOM.getElementById(java.lang.String)
Gets the element associated with the given unique id within the entire document.
Try with
com.google.gwt.user.client.DOM.getElementById("gwtGreenButton");
com.google.gwt.user.client.DOM.getElementById("gwtRedButton");
In the main kid template file, I want it to have only div tags, each of which do only call a rendered kid file and paste content inside it. (like "include" function in php) but I don't know how to do this. Does someone have any ideas about it?
If you swap to genshi instead of the default kid you can do this with an include tag:
<xi:include href="menu.html" />
Swapping to genshi is fairly easy, I think its a matter of confuration only. The templates tags works otherwise the same. You should rename the extensions from .kid to .html though.
You can first define a "base_layout.kid" template:
<html xmlns:py="http://purl.org/kid/ns#">
<head>
<title>App Name - ${page_title}</title>
<link href="layout.css" type="text/css" rel="stylesheet" />
${page_specific_css()}
</head>
<body>
<h1>Now viewing: ${page_title} of App Name</h1>
<content>Default content</content>
<div class="footer">Page Footer Text</div>
</body>
</html>
Then replace the "content" tag in "page.kid" with whatever data you want:
<html py:layout="'base_layout.kid'"
xmlns:py="http://purl.org/kid/ns#">
<link py:def="page_specific_css()"
href="layout.css" type="text/css" rel="stylesheet" />
<div py:match="item.tag == 'content'">
<ul>
<li>Content Item 1</li>
<li>Content Item 2</li>
<li>Content Item 3</li>
</ul>
</div>
</html>
You can check whether you get the correct html in python shell (after removing all the identifiers used):
>>> import kid
>>> t = kid.Template("page.kid")
>>> print t.serialize()