I need to create user control where <sc:text/> element should showed over the <sc:image>.
I know this can be achieved via CSS but in this case control cannot be configured as we cannot override inline styles.
Any hints?
You can achieve this using the sc:fld extension function and wrapping sc:text in markup, adding class names or ids (or inline styles if you must!).
<img src="{sc:fld( 'graphic', $sc_currentitem, 'src’ )}" class="head" />
<span class="txt"><sc:text field="txtField" /></span>
You can then style these as normal
img.head {}
span.txt {}
I don't understand the problem. This seems like more of a front-end problem than a Sitecore issue. CSS will work fine. Here's a rough example (not tested but gets you the idea):
Sample HTML:
<div class="my-container">
<div class="img">
<sc:image Field="Bar" runat="server" />
</div>
<div class="txt">
<sc:text Field="Foo" runat="server" />
</div>
</div>
Sample CSS:
.my-container {
position: relative;
}
.my-container .txt {
position: absolute;
z-index: 50;
top: 0px;
}
.my-container .img {
z-index: 10;
}
Related
When designing a webpage using Zurb Foundation 6, top-bar-left and top-bar-right of the navigation menu stack when put into a wrap class, even when scaled to full screen. The top-bar-right ends up being just below and indented from top-bar-left. How do I fix this issue so that the top-bar-right section stays in line with top-bar-left and is not stacked?
The top-bar-right section works fine when the wrap class is not applied to a div within the nav class. I've tried only applying the wrap class to top-bar-left only instead of the entire nav class, and also tried a "float: right" for top-bar-right in CSS, but neither method solved the problem.
HTML code:
<!-- DESKTOP NAVIGATION -->
<nav class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
And the CSS:
/*GENERAL*/
.wrap {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
There are attributes on top-bar that are making its dependents display inline and stack for narrow displays (display: flex for one). You could apply all the appropriate attributes to the wrap class as well but why reinvent the wheel? Doesn't that negate the whole reason for using a grid system in the first place? Try removing the extra div and put the wrap class on the nav element instead:
<nav class="top-bar wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
Or to simplify things, you could just put those attributes on .top-bar and not have a wrap class:
.top-bar {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
If you need a wrapper div, put it outside top-bar, not inside.
Question
How do I create a <paper-button> group UI element with the following characteristics?
It is a group of <paper-button> elements.
It is stacked vertically.
Each button fills the entire width of the container (without margin, padding or horizontal white space).
There is no margin, padding or vertical white space between the buttons.
Examples:
The effect I am seeking is analogous to <body fullbleed> only scoped to the button's parent container.
Similar to the Bootstrap "Vertical variation" shown here.
If you have Google Drive, hover your mouse over the menu items in the left margin of the page. (Under the red button labeled "New.")
Do a Google search. The dropdown menu that appears from the search field predictively suggesting possible questions you want is also another example of the look/feel I am after.
Attempts:
See below code for my previous attempts to:
stack vertical buttons using <p> tags and
use a <paper-menu>.
Research:
Flexbox documentation
Paper button documentation
Paper menu documentation
Demo: JS Bin
Code:
<!doctype html>
<html>
<head>
<title>polymer</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
<link rel="import" href="https://rawgit.com/PolymerElements/paper-button/master/paper-button.html">
</head>
<body>
<dom-module id="x-test" noscript>
<template>
<!-- Attempt #1: Stacking Buttons -->
<div id="container">
<p><paper-button>One</paper-button></p>
<p><paper-button>Two</paper-button></p>
<p><paper-button>Three</paper-button></p>
</div>
<!-- Attempt #2: <paper-menu> -->
<paper-menu>
<paper-item>One</paper-item>
<paper-item>Two</paper-item>
<paper-item>Three</paper-item>
</paper-menu>
</template>
</dom-module>
<x-test></x-test>
</body>
</html>
I'm super tired right now, will test an example tomorrow but I think theoretically all you'd have to do is:
<link href="bower/iron-flex-layout/iron-flex-layout.html" rel="import" >
<div class="layout vertical">
<paper-button>foo</paper-button>
<paper-button>foo</paper-button>
</div>
paper-button {
width: 100%;
margin:0;
}
Overview of new way of defining layout attributes with classes with the help of iron-flex-layout.html:
http://embed.plnkr.co/1UKMQz/preview
I got my Vertical and Horizontal mixed up when i wrote this answer:)) so below is for horizontal Stacking. But thinking about its pretty much the same except for couple of changes.
So created a
.vertical-section {
min-width: 130px;
}
and make the buttons inline or flex;
eg
paper-button {
display: inline-block; //or inline-flex
margin-bottom: 24px;
}
To get rid of padding/margin etc see below because it should be the same
I played around with the Css for the paper-buttons demo so the above changes will work
For Horizontal stacking
Looking at the demo here paper-buttons and right click to view frame source the code goes like this
<style is="custom-style">
.horizontal-section {
min-width: 130px;
}
paper-button {
display: block;
margin-bottom: 24px;
}
</style>
<div>
<h4>Raised</h4>
<div class="horizontal-section">
<paper-button tabindex="0" raised>button</paper-button>
<paper-button tabindex="0" raised class="colorful">colorful</paper-button>
<paper-button tabindex="0" raised disabled>disabled</paper-button>
<paper-button tabindex="0" raised noink>noink</paper-button>
<paper-button tabindex="0" raised class="colorful custom"><iron-icon icon="check"></iron-icon>ok</paper-button>
<paper-button tabindex="0" raised class="custom"><iron-icon icon="clear"></iron-icon>cancel</paper-button>
</div>
</div>
</div>
That gives you something like this
Now as you dont want any margin/padding etc and fill the entire width you need to amend the css a bit and inspect the button element.
Take out the padding:24px; from the .horizontal-section eg padding:0;
And take out the paper-button:not margin-bottom:24px; and margin:0 0.25em; from paper-button css
and you end up with this
As you are using a template i beileve the styling may need to go before that.
Sorry i cant do you a demo, i managed to do a demo for someone in 0.5 but not yet for V.1 but its easy to understand the method above.
Demo: JS Bin
Code:
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
<style>
paper-material {
xheight: 400px;
width: 400px;
background-color: #ff1101;
margin: 0 auto;
}
paper-button {
width: 100%;
margin: 0;
}
paper-button:hover {
background-color: black;
color: white;
}
</style>
<template>
<paper-material id="material" elevation="3">
<div class="layout vertical">
<paper-button>One</paper-button>
<paper-button>Two</paper-button>
<paper-button>Three</paper-button>
</div>
</paper-material>
</template>
<script>
Polymer({
is: 'x-element',
behaviors: [
Polymer.NeonAnimationRunnerBehavior,
],
properties: {
animationConfig: {
value: function() {
return {
'entry': {
name: 'slide-down-animation',
node: this.$.material
},
'exit': {
name: 'slide-up-animation',
node: this.$.material
}
}
}
}
},
ready: function() {
this.playAnimation('entry');
}
});
</script>
</dom-module>
</body>
</html>
I wish to make a collapse template to hide a block of text and show it by clicking on expand.
I found such code as follows
<div class="mw-collapsible mw-collapsed" style="background-color: #E6E6E6; border-style: thin black; font-style:italic; ">
<p><i>Try it by yourself before expanding on the right!</i></p>
<div class="mw-collapsible-content">
some text or wiki encoded text content (better for formatings and images)
that will remain hidden
until expand is clicked
</div>
</div>
which I tried to make a template for (Collapse)
<div class="mw-collapsible mw-collapsed" style="background-color: #E6E6E6; border-style: thin black; font-style:italic; ">
<p><i>Try it by yourself before expanding on the right!</i></p>
<div class="mw-collapsible-content">
{{{1}}}
</div>
</div>
My currently failing call would be
{{Collapse|some text or wiki encoded text content (better for formatings and images)
that will remain hidden
until expand is clicked}}
but I do not succeed to pass the input text block using {{{1}}} because my content is full of line feeds and other formatting tags.
Do I need to act in the template or in the call to wrap and with which tag?
any help welcome.
You need create two templates:
{{Collapse Begin}}
With contents:
<div class="mw-collapsible mw-collapsed" style="background-color: #E6E6E6; border-style: thin black; font-style:italic; ">
<p><i>Try it by yourself before expanding on the right!</i></p>
<div class="mw-collapsible-content">
And:
{{Collapse End}}
With contents:
</div>
</div>
And then on pages add:
{{Collapse Begin}}
some text or wiki encoded text content (better for formatings and images)
that will remain hidden
until expand is clicked
{{Collapse End}}
Apparently, naming the parameters allows using multiline input (do not ask me why!).
The following code does the job for me but thank you ankap for the smart idea, I will reuse it somewhere else.
I added an optional margin to indent the coloured box when used in lists and a separate parameters for the message shown in collapsed-mode.
<!-- takes tup to three parameters
* margin: to indent the block in the page, useful if the collapse is within a bullet list
* comment: to show a warning on the expand line
* content: the actual content to hide
# adding additional div improved support for lists etc...
-->
<div class="mw-collapsible mw-collapsed" style="background-color: #E6E6E6;
border-style: thin black; font-style:italic; margin-left: {{{margin|0px}}}; ">
<includeonly><i>{{{comment|<nowiki>
Try it by yourself before expanding on the right!</nowiki>}}}</i><includeonly>
<div class="mw-collapsible-content"><div>{{{content|{{{1}}}}}}</div></div>
</div>
enjoy!
I want to create a directive that will take tree-like data and feed it to some tree-view script (that uses markup as input), using specific HTML template to render nodes. So, directive takes data + node template as input, inserts DOM subtree, and then calls third-party plugin to make it sortable (http://dbushell.github.com/Nestable/ is on my mind, if this matters).
I have a solution, but it is far from being elegant. Here is HTML code (full sample can be found at http://jsfiddle.net/DQjve/):
<div ng-app="TestApp" ng-controller="TestCtrl">
<script type="text/ng-template" id="tree.html">
<div>
<ng-include src="'branch.html'"></ng-include>
</div>
</script>
<script type="text/ng-template" id="branch.html">
<ul>
<li ng-repeat="leaf in leaf.children" ng-include src="'leaf.html'">
</li>
</ul>
</script>
<script type="text/ng-template" id="leaf.html">
<ng-include src="template"></ng-include>
<ng-include src="'branch.html'"></ng-include>
</script>
<script type="text/ng-template" id="my-leaf.html">
<span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
</script>
<tree root="tree" template="my-leaf.html"></tree>
</div>
Desired code would look like this:
<div ng-app="TestApp" ng-controller="TestCtrl">
<tree root="tree" template="my-leaf.html">
<span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
</tree>
</div>
Goals:
(less important) Put all utility templates inside directive JavaScript code.
(more important) Use contents of the <tree> tag as node template.
But I cannot find the solution.
For point 1: Probably, I need to use $templateCache to pre-cache my templates? With some unique template names? Is there any better solution?
For point 2: Should I use ngTransclude for p.2? If yes, how? Is there a way to get contents of initial <tree> tag as a string, before any compilation occurs?
here's the site I'm working on: http://antidote.treethink.com/about/
I am trying to get it so that the footer is always at the bottom of the screen unless the content runs past the screen, then it will sit below the content.
To do this, I thought to have the "wrapper" div be 100% min-height then tell the footer to sit at the bottom of that div. I tried putting min-height classes on the body, html and wrapper tags but it didn't work.
This is my css: http://antidote.treethink.com/wp-content/themes/antidote-new/style.css
Thanks,
Wade
You can try classic solution
<div id="header-content">
<div id="header">
bar
</div>
<div id="content">
bar
</div>
</div>
<div id="footer">
foo
</div>
main.css
html,
body {
height:100%;
}
#header-content {
position:relative;
min-height:100%;
}
#content {
padding-bottom:3em;
}
#footer {
position:relative;
height:3em;
margin:-3em 0 0;
}
ie.css
* HTML #header-content {
height:100%; /* min-height for IE<7 */
}
This is just off the top of my head. My thought create a container div that holds your content. Put the footer at an relative position of bottom: 0px; within that.
<div id="content-container">
<div id="page-content" style="position: relative;"><p>This holds my content</p></div>
<div id="footer" style="position: relative; bottom: 0px;">
<p>Footer content in here</p>
</div>
</div>
I think that should work...
Edit
Actually the top of my head is not right. This post has helped me in the past though...
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/