I am new to Dart and Polymer. I'm trying to create Tabs but they don't show correctly. Here is my code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="scaffolded-by" content="https://github.com/google/stagehand">
<title>Paper Tabs Events</title>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/roboto.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_pages.html">
<link rel="import" href="packages/paper_elements/paper_tabs.html">
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
</head>
<body unresolved>
<core-header-panel flex>
<core-toolbar class="medium-tall">
<paper-icon-button id="navicon" icon="dashboard"></paper-icon-button>
<span flex>Main Heading</span>
<paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
<paper-tabs class="bottom fit" selected="1">
<paper-tab>IMPORT</paper-tab>
<paper-tab>DEFINE</paper-tab>
<paper-tab>DESIGN</paper-tab>
<paper-tab>DEVELOP</paper-tab>
<paper-tab>DEPLOY</paper-tab>
<paper-tab>EXPORT</paper-tab>
</paper-tabs>
</core-toolbar>
<core-pages>
<div><h1>Core Page</h1><p>This is content for core page.</p></div>
</core-pages>
</core-header-panel>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
Once they display correctly I then want to dynamically change the content under tabs on tab selection. But that is for later, first the tabs need to display correctly. Any help would be appreciated.
Here is the screenshot how it looks like.
https://www.dropbox.com/s/px2as8lor4a67ro/Screenshot%202015-04-23%2022.59.47.png?dl=0
The parent element of your core-header-panel needs a height (in this case body).
See https://www.polymer-project.org/0.5/docs/elements/core-header-panel.html for more info.
TLDR; You can add "fullbleed layout vertical" as attributes to your body.
Related
I created a complement to outlook, but i need to use iframe to load one page. It is working in web (safari and chrome), windows (web and outlook), but when i have tried to use the complement in outlook mac, it is showing the next error
The code is
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. -->
<!-- This file shows how to design a first-run page that provides a welcome screen to the user about the features of the add-in. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Contoso Task Pane Add-in</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui#/. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="/src/taskpane/taskpane.js"></script>
</head>
<body>
<div style="background-color: lavender;">
<iframe src="https://login.microsoftonline.com" title="workspace" class="iframe" style="height: 800px; width: 100%;"></iframe>
</div>
</body>
</html>
Error is
Refused to display 'https://login.microsoftonline.com' in a frame
because it set 'X-Frame-Options' to 'DENY'.
I want to include the following code block in my application.html.erb:
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
<link rel="manifest" href="images/icons/site.webmanifest">
<link rel="shortcut icon" href="images/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="MenuTranslator">
<meta name="application-name" content="MenuTranslator">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="images/icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
These ten lines take care of all my icon needs. I've seen this question and frankly I don't know how to get these ten lines using that method, and frankly I'm not that interested in spending time figuring it out when this already works. Except-- it doesn't work, because I'm using the wrong path. images/icons/filename doesn't work.
How can I do this? Does rails not allow me to do this?
Place that images folder inside the app/public/ directory, put a slash in front of all those paths like below (or just copy and paste that) and it will work.
<meta name="apple-mobile-web-app-title" content="MenuTranslator">
<meta name="application-name" content="MenuTranslator">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/images/icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png">
<link rel="manifest" href="/images/icons/site.webmanifest">
<link rel="shortcut icon" href="/images/icons/favicon.ico">
Trying to learn webix (and javascript at all). Usually the common practice is loading javascript libraries at the end of the body.
The webix quick start doc says:
<!DOCTYPE HTML>// specifies document type
<html>
<head>
<link rel="stylesheet" href="../../codebase/webix.css" type="text/css">
<script src="../../codebase/webix.js" type="text/javascript"></script>
</head>
<body>
e.g. it loads the library in the head.
Questions:
the webix lib should be loaded in the <head>?
if yes, where should be loaded jQuery and twitter bootstrap?
and in what order?
You can place webix.js anywhere on the page. Just be sure that JS code that uses Webix API is used after webix.js loading
Normally scripts are placed at the end of HTML file as they only add some interactivity to the page. In case of Webix UI, without webix.js you will not see any content on page at all, so there is no benefits from putting webix.js at the end of page.
As for jQuery - if you plan to use webix-jquery integration you need to load webix.js AFTER loading the jQuery ( at the head, or at the end of file, doesn't matter )
You need to follow the below syntax or process for using the webix.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:300|Raleway|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" >
webix.ui({
view:"calendar",
id:"calendar1"
})
</script>
</body>
</html>
Any dependencies must load on top webix.js, so that you can use them in your JS file.
I am facing problem of stabilizing styles in my html page.
Whenever I am using datepicker (jqmobile UI datepicker), the look and feel is affected terribly. The icons on the header, the icons for closing dialog, the icons for type dropdown all vanishes.
Here is my header portion,
<head>
<meta charset="UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link type="text/css" href="styles/datepicker.css" rel="stylesheet" />
<link type="text/css" href="jquery-mobile/styles/jquery.mobile.simpledialog.css" rel="stylesheet" />
<script src="cordova.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-mobile/js/jquery.mobile.simpledialog2.js"></script>
<script src="scripts/Common.js"></script>
<script src="scripts/FlightServices.js"></script>
</head>
If I comment out the line:
link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css
then the icons appear properly but datepicker style is spoiled.
If I put this line:
script src="scripts/datepicker.js"
instead of :
script src="scripts/jquery-ui.js"
Datepicker is completely disabled.
Is there any mistake I am making in this above mentioned portion?
Any wrong file included?
Anyone any suggestion, I shall be thankful.
Thanks
santu ghosh
The order of style sheets is important.
Change the order of style sheets instead of keeping one or the other. Usually, the themes style sheet template should be added first and then, your own style sheet(main.css) which adds in your own modifications to the base template. Edit your main.css to super-impose major conflicts.
I would also recommend putting the mobile style sheets conditionally for mobile platforms only unless this page is strictly for mobile anyways.
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
<link href="styles/main.css" rel="stylesheet" />
I've found a strange issue when using JQM + IE10 and touchscreeen on a Windows 8 tablet. When using an external mouse och the trackpad everything works as expected but when I'm using the touch screen normal links in JQM are not working.
Having two very basic JQM pages, b.html:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
this is b.html
link to a.html
</body>
</html>
and a.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
this is a.html
link to b.html
</body>
</html>
Navigation gets stuck on the second one using the touch screen, mouse and trackpad working fine. I guess this is connected to JQM ajax navigation model and the new touch events in IE10, but can't figure out exactly how to solve this.
Chrome is working fine with both mouse/trackpad and touch screen.
EDIT: Might have found a possible workaround, adding this to the css
a {
-ms-touch-action: none;
}