I am trying a simple test of <iron-selector> multi select. I ran the demo project that comes with the element and seems to work fine from there, but whenever I copy it to my project, the element does not appear. I've made a Plunker to test it: Plnkr test link. I am trying to test the multi select option (setting and getting the selected-values).
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://cdn.rawgit.com/download/polymer-cdn/2.3.1/lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.3.1/lib/paper-toast/paper-toast.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.3.1/lib/iron-selector/iron-selector.html">
</head>
<body>
<p>Start:</p>
<iron-selector multi selected-values="[0,2]">
<div>Item 0</div>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</iron-selector>
<p>End:</p>
<paper-toast text="Polymer is working!" opened></paper-toast>
</body>
</html>
It looks like you just forgot to style the selected elements. For example, you could style the background of the selected elements to be light gray:
<style>
.iron-selected {
background: #eee;
}
</style>
demo
Related
I am using this CDN repo: https://github.com/download/polymer-cdn to import Polymer's Iron-Selector into my HTML page, other elements import sucessfully but Iron-Selector component does not. No error message is shown at the console either.
Here's my code:
<html>
<head>
<title>iron-selector</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="iron-selector/iron-selector.html">
<link rel="import" href="paper-button/paper-button.html">
<body >
<iron-selector selected="0">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</iron-selector>
<div>
<paper-button raised><iron-icon icon="check"></iron-icon>OK</paper-button>
<paper-button raised><iron-icon icon="clear"></iron-icon>Cancel</paper-button>
</div>
</body>
</html>
All components are displayed except iron-selector component, any clues why?
Experimenting with Bootstrap for a CS50 assignment.
Cannot get three columns to cross page horizontally.
col1 col2 col3
Instead they insist on stacking vertically.
col1
col2
col3
I took the code directly from the W3 grid tutorial for Bootstrap 5 (https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php). On that page, under "Three Equal Columns," "Example", "Tryit Yourself", the code does exactly what I want. In VS Code (downloaded and running locally) there's some impediment unknown to me. Where should I be looking to troubleshoot?
Both environments link, in their html head, to the same version of Bootstrap's stylesheet (bootstrap.min.css) and script (bootstrap.bundle.min.js) via cdn.jsdelivr.net.
In their bodies, both set up a Bootstrap container in which to wrap a row, in which to wrap three columns.
My simple test code:
<main>
<div class="container">
<div class="row">
<div class="col">col 1</div>
<div class="col">col 2</div>
<div class="col">col 3</div>
</div>
</div>
</main>
I can't find anything wrong with that. Nevertheless Live Preview in VS Code presents three columns stacked.
I've spent two workdays searching for a solution, and none of the fixes in similar posts has worked for me.
Your reference have an error, try with this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">col 1</div>
<div class="col">col 2</div>
<div class="col">col 3</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
Hey there!, first post here, can anybody tell me why this won't work? i've simplified my code to the maximum. The thing is that it will work if i make my browser window smaller than 1200px.
The problem with your page is that you did not put in place all the structure required by bootstrap's grid support: columns should be in rows, rows should be in containers, see the bootstrap documentation for details.
The following modification of your code works as intended:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/c\
ss/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey" class="container">
<div class="row">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</div>
</body>
</html>
(Technically the problem occurs because the "col-lg-12" class makes the div containing the "hello" a float, so it is no longer contained in the div with the grey background, and then the grey div has height 0, so isn't visible.)
Add the position or height attribute to the div
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey;position:absolute">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
I have just started learning html and css.
I have an html file "index.html" with code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="title">My App</div>
<div class="app">
<div class="screenshot">image1</div>
<div class="description">text</div>
</div>
</body>
</html>
I have a css file "style.css" file with code:
.description {
color: red;
}
Both are in the same file location -
C:\Users\ravalesmita\Desktop\Portfolio\toplist\index.html
C:\Users\ravalesmita\Desktop\Portfolio\toplist\style.css
Using IE 10 and google chrome.
Expected: text should have red color when loaded on the browser.
Actual: text color doesn't change.
Can anyone point out why is the text within class description not showing red color?
Have you saved the file previously in another folder, before you made a change to red? If so the browser may be reading that file instead of the one you are wanting it to. Try running it like this. If it works its not finding your css file for some reason.
<!DOCTYPE html>
<html>
<head>
<style>
.description {
color: red;
}
</style>
</head>
<body>
<div class="title">My App</div>
<div class="app">
<div class="screenshot">image1</div>
<div class="description">text</div>
</div>
</body>
</html>
I am using animate.css but it don't seem to work in firefox. The code I am using is:
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
</head>
<body>
<div class="rotateIn"> content</div>
</body>
</html>
I want this div to show rotate in effect when we load the page but it don't seem to work.
you have to use animated class if you want to show animations try this
<html>
<head>
<link rel="stylesheet" href="animate.css"/>
</head>
<body>
<div class="animated rotateIn"> content</div>
</body>
</html>
Long story short: http://jsfiddle.net/3ZLLm/
You MUST use the animated class provided.
So, to add further, it should be:
<div class="animated rotateIn"> content</div>