I created a component and I want to put 3 them vertical
I try this
<div flex layout vertical>
<my-comp></my-comp>
<my-comp></my-comp>
<my-comp></my-comp>
</div>
but this does not work..
I guess you are using Polymer 1.0. Try this instead:
<link rel="import" href="/bower_components/iron-flex-layout/classes/iron-flex-layout.html">
...
<div class="flex layout vertical">
<my-comp></my-comp>
<my-comp></my-comp>
<my-comp></my-comp>
</div>
The layout system in Polymer 1.0 now uses CSS classes, instead of attributes as in Polymer 0.5.
Related
I'm trying to implement this grid wrapping from Bootstrap 5.2 documentation.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="grid text-center">
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
</div>
My expectations were that there would be three columns that are equally sized but as you see here, each .g-col-4 spans the whole width instead of a third of it. What am I doing wrong here?
Grid is opt-in. You need to enable the CSS Grid by setting $enable-cssgrid: true.
I've created a typical layout using CSS Grid with this structure:
<div class="dashboard">
<header></header>
<nav></nav>
<div class="main-header"></div>
<div class="main-content"></div>
<div class="main-footer"></div>
</div>
Now, due to our environment (PHP, Smarty Templates, AngularJS), I would like to split these up into separate components. But here is the issue… I can't wrap an element around grid elements without breaking the layout:
<div class="dashboard">
<header></header> <!-- component -->
<nav></nav> <!-- component -->
<div class="wrapper"> <!-- component -->
<div class="main-header"></div>
<div class="main-content"></div>
<div class="main-footer"></div>
</div>
</div>
I've experimented with nesting another grid inside of 'wrapper', but that introduces more layout issues, such as improper scrolling. (…and nesting grids doesn't sound like a good idea).
I am wondering if there is some CSS to "pass through" the 'wrapper' div to maintain the css grid properties?
Or is there another way to handle this situation?
Thanks!
Here is the code I am using:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<title>Column Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2">a</div>
<div class="col-md-2">b</div>
<div class="col-md-2">c</div>
<div class="col-md-2">d</div>
<div class="col-md-2">e</div>
<div class="col-md-2">f</div>
</div>
<div class="row">
<div class="col-md-2">g</div>
<div class="col-md-2">h</div>
<div class="col-md-2">i</div>
<div class="col-md-2">j</div>
<div class="col-md-2">k</div>
<div class="col-md-2">l</div>
</div>
</div>
</body>
</html>
The code inside the body tags was taken from some website as an example of the Bootstrap grid system. It works when pasted into w3school's try it yourself editor for bootstrap. When I try to run the entire html file in Chrome, however, the row elements are all stacked vertically. Is there something fundamentally wrong with the syntax in some other part of the html file? Or is there something about the syntax of bootstrap's grid system itself that I'm missing?
A similar question was asked about a year ago: Columns in bootstrap 3.0 only stacking vertically
This single answer to this question has to do with switching md with xs, but I am using a 13 inch MacBook Pro, so md should do the trick. Anyway, I already have tried using the different sized col classes, so this is clearly not the problem.
Use span[#of columns] instead of col-md-[#of columns].
I am currently having my first tries with Polymer.
What I have is a custom polymer element nested in a core-animated-pages element on the main page.
The sources are:
index.html
<core-header-panel>
<core-toolbar>
[...]
</core-toolbar>
<core-animated-pages transitions="slide-from-right">
[...]
<section>
<contact-page></contact-page>
</section>
</core-animated-pages>
</core-header-panel>
contact-page.html
<polymer-element name="contact-page">
<template>
[...]
<div layout horizontal start-justified>
<div class="placeholder">
</div>
<div class="contact-box" layout horizontal center-justified flex three>
<div class="form-container" layout vertical>
<h2>Contact</h2>
<paper-input class="additional-dist" floatingLabel label="Name"></paper-input>
<paper-input id="mail" floatingLabel label="Mail"></paper-input>
<div layout horizontal>
<paper-input id="msg" multiline maxRows="4" rows="4" floatingLabel label="Message" flex></paper-input>
</div>
<paper-button label="Submit" on-tap="{{submit}}" self-end></paper-button>
</div>
</div>
</div>
[...]
</template>
[...]
</polymer-element>
The HTML file currently looks like this in Chrome 37.
Now what I'd like to have is that the yellow bar (placeholder) is vertically stretched over the whole viewport, like this.
Unfortunately I can't figure out which polymer layout attributes I have to use to achieve this and in which tags I have to put them. Can anybody help me here?
Edited to incorporate feedback from sjmiles:
Give this a shot:
<body fullbleed layout vertical>
<polymer-element name="x-foo" layout vertical>
<template>
<style>
#header {
background: tomato;
}
#col {
background: yellow;
}
</style>
<div id="header" layout horizontal>
Header
</div>
<div id="main" flex layout horizontal>
<div flex id="col">Col</div>
<div flex layout vertical>
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
</div>
</div>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
<x-foo flex></x-foo>
</body>
I'm using the fullbleed attribute to set the body to 100vh and telling it to layout its children vertically using flexbox. Then setting x-foo to flex so it fills the screen. Then it's just a matter of getting the right children to flex.
Here's a jsbin to preview.
Let say I have a Angular app with directives like so:
<!doctype html>
<html lang="en" ng-app="cfd">
<head>
...
</head>
<body>
<div class="container">
<!-- Header -->
<div ui-view="header" class="row"></div>
<div ui-view="main" class="row">
<!-- Sidebar/Nav -->
<div ui-view="sidebar" class="col-xs-3"></div>
<!-- Content -->
<div ui-view="content" class="col-xs-9"></div>
</div>
<!-- Footer -->
<div ui-view="footer" class="row"></div>
</div>
</body>
</html>
How do I apply CSS to a directive using the Angular directive handle ui-view or any other custom directive, without adding an HTML ID handle. SO for the "main" section, I dont want the following: <div id="main" ui-view="main" class="row">.
I have tried .ui-view#main and ui-view#main.
If I understand correctly, you want to use the angular directive ui-view as identifier in your CSS?
In your CSS file, you could potentially use
div[ui-view=main] {
/* styles for main go here, duh! */
}
Seems to work in Chrome (http://plnkr.co/edit/r1fvheUs8S6AJHv4Dm59?p=preview)
If you want conditional styles, you should use
<div ng-class="{'className': 'angular condition'}"></div>