Is it just me or did the last release of polymer trim the mustache ? I'd swear this code snippet (http://jsbin.com/eRimiJo/10/edit) worked perfectly last week, and now it's useless as the mustache magic seems to be non functional any more :
<script src="http://www.polymer-project.org/polymer.min.js"></script>
<polymer-element name="test-attr" attributes="width" noscript>
<template>
<style>
#host {
:scope {
display: block;
width: {{width}}px;
height: 100px;
background-color: black;
}
}
</style>
<content></content>
</template>
</polymer-element>
<test-attr width="100">Hello</test-attr>
EDIT : edited to remove obvious typos
There are a couple of things that need changing in your example:
<content> needs to be within the outer </template>
You're binding 100px as the width attribute value. Drop the "px", otherwise the binding output becomes width: 100pxpx; within the <style>.
With the changes: http://jsbin.com/ODEGika/3/edit
That said, this is only working for me in Chrome Canary. It looks like a regression with the polyfills. Filed here: https://github.com/Polymer/polymer/issues/270
Related
I am trying to create a one page website that is similar this example :
http://themeforest.net/theme_previews/6622929-glissando-creative-minimal-onepage-psd-template?index=1&url_name=glissando-creative-minimal-onepage-psd-template
I thought I could use the transform css property but It's not giving me exactly what I want. Does anyone have any insight into this? I'm really new to coding!
Thanks!
html:
<div class="about">
<div class="aboutcontent">
</div>
</div>
scss:
.about {
width: 100%;
background: white;
transform: skewY(-5deg);
padding: 150px;
.aboutcontent {
transform: skewY(5deg);
}
}
I figured out the answer! My above code was actually correct. To make my website look like the example you should put a background image on the body and then you can position the skewY divs appropriately!
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
Inline blocks have this weird space in-between them. I could live with it, up to a point where, if I load more content with an AJAX call, the tiny space goes away. I know I'm missing something here.
div {
width: 100px;
height: auto;
border: 1px solid red;
outline: 1px solid blue;
margin: 0;
padding: 0;
display: inline-block;
}
http://jsfiddle.net/AWMMT/
How to make the spacing consistent in Inline blocks?
The space is in the HTML. There are several possible solutions. From best to worst:
Remove the actual space in the HTML (ideally your server could do this for you when the file is served, or at least your input template could be spaced appropriately) http://jsfiddle.net/AWMMT/2/
Use float: left instead of display: inline-block, but this has undesirable effects on t he height: http://jsfiddle.net/AWMMT/3/
Set the container's font-size to 0 and set an appropriate font-size for the internal elements: http://jsfiddle.net/AWMMT/4/ -- this is pretty simple, but then you can't take advantage of relative font size rules on the internal elements (percentages, em)
http://jsfiddle.net/AWMMT/1/
<div>...</div><div>...</div>
^
|--- no whitespace/new line here.
Your spaces were the new lines the browser converted to "spaces" when displaying it.
Or you could try to hack a bit with CSS:
A flexbox conveniently ignores whitespace between its child elements and will display similarly to consecutive inline-block elements.
http://jsfiddle.net/AWMMT/470/
body { display: flex; flex-wrap: wrap; align-items: end; }
Old answer (still applies to older, pre-flexbox browsers)
http://jsfiddle.net/AWMMT/6/
body { white-space: -0.125em; }
body > * { white-space: 0; /* reset to default */ }
There’s actually a really simple way to remove whitespace from inline-block that’s both easy and semantic. It’s called a custom font with zero-width spaces, which allows you to collapse the whitespace (added by the browser for inline elements when they're on separate lines) at the font level using a very tiny font. Once you declare the font, you just change the font-family on the container and back again on the children, and voila. Like this:
#font-face{
font-family: 'NoSpace';
src: url('../Fonts/zerowidthspaces.eot');
src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
url('../Fonts/zerowidthspaces.woff') format('woff'),
url('../Fonts/zerowidthspaces.ttf') format('truetype'),
url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
body {
font-face: 'OpenSans', sans-serif;
}
.inline-container {
font-face: 'NoSpace';
}
.inline-container > * {
display: inline-block;
font-face: 'OpenSans', sans-serif;
}
Suit to taste. Here’s a download to the font I just cooked up in font-forge and converted with FontSquirrel webfont generator. Took me all of 5 minutes. The css #font-face declaration is included: zipped zero-width space font. It's in Google Drive so you'll need to click File > Download to save it to your computer. You'll probably need to change the font paths as well if you copy the declaration to your main css file.
You can comment the whitespace out.
Original answer from 2013
Like:
<span>Text</span><!--
--><span>Text 2</span>
Edit 2016:
I also like the following method, where you just put the closing bracket right before the following element.
<span>Text</span
><span>Text 2</span>
Also you can do it like this (which IMHO,I believe is sintatically correct)
<div class="div1">...</div>
<div class="div1">...</div>
.
.
.div1{
display:inline-block;
}
.div1::before, div1::after { white-space-collapse:collapse; }
I'm trying to change places of ofbiz components like application bar and main container places, I know that maybe can be changes from /common/widget/CommonScreens.xml or something like that (such as another xml file), I tired without luck to find what the file responsible to render "app-navigation" and just I lost my way.
So I hope find my answer here, I want to change layout,
The default interface is look like this:
What I want is (I made this using firebug) :
How I can do that?? or in another word from where I can start to do that?
leave the CSS and HTML side for me, I just want the point to start with, to edit theme layout to be like what I explained in previous screenshot.
Sorry If I cant give you what I want clearly my English didn't help me today :) but you can ask me in comment about anything if not clear yet.
take a look at the other themes in OFBiz. The bizness_time theme is already using a similar layout.
Cheers
I solved my issue, there was a little mistake from my side, and I did some modification;
In CSS file:
#app-navigation {
...
/* border-top: 0.1em solid #3E5A71; */ /*Removed*/
...
width: 200px; /*Added*/
float: left; /*Added*/
}
...
#app-navigation ul li ul li {
...
/* float: left;
display: inline; */ /*Removed*/
...
}
/*Added*/
#container:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
In templates :
At appbar.ftl , or appbarOpen.ftl :
<div id="container"> <!-- This is the Line that I Added -->
<#if userLogin?has_content>
...
And in footer.ftl :
</div> <!-- This is the Line that I Added -->
<div id="footer">
...
Simply :)
i'm trying to make up a different look and feel on my sharepoint site. I try to make my main content's width down to 960px under my form tag in sharepoitn designer. when I refresh the page at the first it renders the main content down to 960px but when the page fishished loading the main content stretches itself to the whole screen's width.
I found out that it's because of the onload script running in body tag. but I caanot remove this script because this work has side effects on page functionality.
the function is _spBodyOnLoadWrapper().
does anyone know this function ? or does anyone know how to come up with this problem ?
UPDATE #1:
My css code is as follows.. I added this class to the main Form on master page:
.mainContent
{
width: 960px;
height:100% !important;
min-height:100% !important;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
direction:rtl;
}
UPDATE #2:
I use v4.master template.
I have taken the ribbon out of the form tag. it's directly after body tag. because I wanted the ribbon to be streched at the top. but when i add this line of code
<body onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();">
the mainContent blows up. something at the header streches in the whole width and some panels at bottom remains 960px.
you got me interested so I recreated your issue. By default, the javascript will try to inline the width based on its calculations.
However, what you need is to set the class s4-notsetwidth on a wrapping container.
Here is what i did to fix your issue
Add this to the head
<style type="text/css">
#s4-bodyContainer {
width: 960px;
height:100% !important;
min-height:100% !important;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
}
/* Aligns the Top Bars */
.ms-cui-ribbonTopBars {
width: 960px!important;
margin-left:auto;
margin-right:auto;
}
/* Turns off the border on the bottom of the tabs */
.ms-cui-ribbonTopBars > div {
border-bottom:1px solid transparent !important;
}
</style>
Then locate the s4-workspace (that's the immediate parent of #s4-bodyContainer and add class s4-nosetwidth. That should work for you.
Use these two references to achieve exactly what you want (not sure if you want ribbon aligned or not), Randy Drisgill post and Tom Wilson's post.
I've been playing a little bit with CSS3 flexible box model as described in this article: CSS 3 Flexible Box Model
I am trying to create a simple vbox with a nested hbox, something like this:
<div class="vbox">
<div>Header</div>
<div class="hbox">
<div>Section 1</div>
<div>Section 2</div>
<div>Section 3</div>
</div>
<div>Footer</div>
</div>
However the content of the hbox is being laid out vertically and not horizontally. What am I doing wrong and how to do it correctly? Thanks.
The problem is that the display: box; declaration in the .hbox rule gets overridden by the display: block; in the .vbox > * rule. You have two options:
1 Make the display: box override the more specific rules:
.hbox {
display: -webkit-box !important;
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;
display: -moz-box !important;
-moz-box-orient: horizontal;
-moz-box-align: stretch;
display: box !important;
box-orient: horizontal;
box-align: stretch;
}
Approach 1 working example here, the main disadvantage of this approach is that you're messing with the default specificity rules of CSS which may cause confusion in other places.
2 Remove display: block from the more specific rules:
.vbox > * {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
}
Approach 2 working example here, the main disadvantage of this approach is that you'll need all direct children of an .hbox or .vbox to be block level elements.