How do I align my paper-tabs to the left? I tried using margin-left: 0; but that did not work. When I inspected the HTML file from the browser there seems to be a paper-icon button next to the tabs, which I did not add. It's there probably because of the scrollable attribute of the paper tab so how do I move it to the left without compromising the scrollable attribute of the paper-tabs?
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<!--Website metadata-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<!--Polymer elements-->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!--Main stylesheet-->
<link rel="stylesheet" href="app.css">
<!--Style for polymer elements-->
<style is="custom-style">
app-header{
background: #FFFFFF;
}
paper-toolbar{
--paper-toolbar-background: #ffffff;
color: #000000;
}
paper-tabs{
-webkit-font-smoothing: antialiased;
width: 100%;
text-transform: none;
margin-bottom: 0;
color: #757575;
--paper-tabs-selection-bar-color: #1db886;
}
paper-tab{
--paper-tab-ink: #ffffff;
font-weight: 400;
}
paper-tab.iron-selected{
color: #1db886;
}
#app-title{
font-size: xx-large;
font-weight: 200;
margin: 0;
}
</style>
</head>
<body>
<!--App header-->
<app-header reveals shadow>
<paper-toolbar>
<div class="title" id="app-title">Test</div>
</paper-toolbar>
<paper-tabs selected="0" scrollable>
<paper-tab>Home</paper-tab>
<paper-tab>Test</paper-tab>
<paper-tab>Test</paper-tab>
<paper-tab>Test</paper-tab>
<paper-tab>Test</paper-tab>
</paper-tabs>
</app-header>
</body>
</html>
Giving a snippet of some of the css would help :P Try this, tho!
float:left;
Related
Here's my code of index.html:
<!DOCTYPE html>
<html lang="en">
<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">
<title>CodeWare</title>
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<div class="hero">
<h1>Coding</h1
<h1>Redefined.</h1>
</div>
</body>
</html>
Styles.css:
:root {
--color-Primary: #ff0505;
}
html {
font-size: 62.5%;
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
}
.hero {
background-color: var(--color-Primary);
height: 50rem;
}
h1 {
padding-left: 2rem;
padding-top: 2rem;
color: #ffffff;
margin-top: 0px;
font-size: 9rem;
font-weight: 700;
}
In index.html, it works if I use style="margin-top: 0px;" in the h1 attribute. If I instead type it in styles.css as margin-top: 0px;, It doesn't work. Like why? Some one please help me
You only need to change the order of 2 css files (styles.css and normalize.css)! The order matters! (Now the h1 rule in normalize.css (h1{font-size: 2em;margin: 0.67em 0;}) override your rule from styles.css)
You are injecting normalize.css after your own styles, that's why "margin:0px" is overriden by "margin: 0.67em 0;" rule from normalize.css.
All you need to do is to include normalize.css first.
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
As the title suggests, my style.css isn't loading.
This is the head section off my html code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caculator</title>
<style type="text/css" src="style.css"></style>
</head>
This is the first part off my style.css:
button {
font-size: 50pt;
font-family: Arial, Helvetica, sans-serif;
color: grey;
border-radius: 7pt;
border: 1pt solid grey;
background-color: lightgrey;
width: 54pt;
height: 70pt;
margin: 2pt;
}
Does anyone know why this isn't working?
Edit: all my files are in the same folder, no subfolders
Try using <link href="style.css" rel="stylesheet"> instead of <style type="text/css" src="style.css"></style>.
add this to your head tag
<link rel="stylesheet" href="style.css" />
instead of
the link tag currently in yout html
Stylesheet import method try.
Sample: https://www.w3schools.com/tags/att_link_rel.asp
<link rel="stylesheet" type="text/css" href="style.css">
The import from google fonts shows that its loading fine, and google inspector tool shows the same with no errors. The issue is when I start the page none of the font-family properties change for my h2 or h3 elements
h2 {
margin:8px 0;
padding:8px 0;
font-size:25px;
font-weight:bold;
color:#161616;
font-family:'Oswald', sans-serif;
}
h3 {
margin:8px 0;
font-size: 24px;
font-weight:bold;
color: #161616;
padding-left:8px 0;
font-family:'Oswald', sans-serif;
}
<head>
<link href="http://fonts.googleapis.com/css?family=Oswald|Roboto" rel="stylesheet">
<title>LLC</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/coin-slider.css" />
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-titillium-900.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
</head>
<body>
<h2> Some Heading </h2>
<h3> Some More Heading </h2>
</body>
learning Polymer's layout, the paper-icon-button is not visible in the App-toolbar area, code is `
<!-- sample-content included for demo purposes only -->
<link rel="import" href="app-layout/demo/sample-content.html">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="paper-styles/paper-styles.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<style is="custom-style">
body {
/* No margin on body so toolbar can span the screen */
margin: 0;
}
app-toolbar {
/* Toolbar is the main header, so give it some color */
background-color: #1E88E5;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
</style>
</head>
<body>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div title>Spork</div>
<paper-icon-button icon="search"></paper-icon-button>
</app-toolbar>
</body>`
2, any idea why? Thanks,
the correct out should have been:
[app-toolbar with buttons][3]
BuddyG
You are missing the import for iron-icons which contains the search and menu icon. Including this should solve your issue <link rel="import" href="iron-icons/iron-icons.html">
<base href="https://polygit.org/components/">
<link rel="import" href="app-layout/demo/sample-content.html">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-styles/paper-styles.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<style is="custom-style">
body {
/* No margin on body so toolbar can span the screen */
margin: 0;
}
app-toolbar {
/* Toolbar is the main header, so give it some color */
background-color: #1E88E5;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
</style>
</head>
<body>
<app-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div title>Spork</div>
<paper-icon-button icon="search"></paper-icon-button>
</app-toolbar>
</body>
I need a template to make bug report demo's
This is what I have so far, but i can't find the paper and iron collection like in 0.5
<!DOCTYPE html>
<html>
<head>
<title>Polymer 1.0</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
<meta name="mobile-web-app-capable" content="yes">
<script src="https://www.polymer-project.org/1.0/webcomponents.min.js"></script>
<!-- <link rel="import" href="https://rawgit.com/Polymer/polymer/v1.0.3/polymer.html"> -->
<link rel="import" href="http://crossorigin.me/https://elements.polymer-project.org/bower_components/iron-elements/iron-elements.html">
<link rel="import" href="http://crossorigin.me/https://elements.polymer-project.org/bower_components/paper-elements/paper-elements.html">
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold&lang=en' type='text/css'>
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Source+Code+Pro' type='text/css'>
<style>
body {
font-family: 'RobotoDraft', sans-serif;
}
:unresolved {
display: flex;
justify-content: flex-start;
background: rgba(255, 255, 255, 0.5);
border: 2px dashed #ccc;
border-radius: 5px;
box-sizing: border-box;
}
:unresolved:after {
padding: 15px;
content: 'loading...';
color: #ccc;
}
p-test {
border: 2px solid red;
border-radius: 5px;
box-sizing: border-box;
}
</style>
</head>
<body class="fullbleed layout vertical">
<dom-module id="p-test">
<template>
<p>test</p>
</template>
</dom-module>
<script>
Polymer({
is: 'p-test',
ready: function() {}
})
</script>
<p-test class="fit layout vertical"></p-test>
</body>
</html>
I seem to be able to do this without all the crossorigin stuff for imports. This snippet works for me:
html, body {
height: 100%;
}
body {
overflow: hidden;
margin: 0;
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
paper-button {
margin: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta description="Polymer 1.0 Template">
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-toast/paper-toast.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
<paper-button raised onclick="document.querySelector('#toast1').show()">
Discard Draft
</paper-button>
<paper-button raised onclick="document.querySelector('#toast2').show()">
Get Messages
</paper-button>
<paper-toast id="toast1" text="Your draft has been discarded."></paper-toast>
<paper-toast id="toast2" text="Connection timed out. Showing limited messages.">
<span role="button" tabindex="0" style="color: #eeff41;margin: 10px"
onclick="console.log('RETRY')">
Retry
</span>
</paper-toast>
</body>
</html>