I have a toolbar copied from the example site working but none of the glyph icons are showing up. I can confirm that the same svg icons are working in non controls.
Toolbar code where glyphs are not working.
<template>
<ui-page page-title="Toolbars" animate>
<style>
.example-container {
position: relative;
height: 450px;
border: 1px solid #f0f0f0;
}
</style>
<ui-content padded scroll>
<ui-container>
<ui-toolbar primary>
<ui-input-group>
<ui-input width="12em">
<ui-input-addon glyph="icon-fill-search"></ui-input-addon>
</ui-input>
<ui-dropdown value="0">
<ui-list-item value="0">Site</ui-list-item>
<ui-list-item value="1">Posts</ui-list-item>
<ui-list-item value="2">Docs</ui-list-item>
</ui-dropdown>
</ui-input-group>
<ui-filler></ui-filler>
<ui-button-group>
<ui-button small light square glyph="icon-moon-undo2"></ui-button>
<ui-button small light square glyph="icon-moon-redo2"></ui-button>
</ui-button-group>
<ui-button small light square glyph="icon-moon-cog" dropdown.bind="btnMenu"></ui-button>
<ui-divider></ui-divider>
<ui-button light>Save</ui-button>
<ui-button light>Cancel</ui-button>
</ui-toolbar>
<br/>
<ui-menu ref="btnMenu">
<ui-menu-section>Actions</ui-menu-section>
<ui-menu-item glyph="icon-moon-pencil">Edit</ui-menu-item>
<ui-menu-item glyph="icon-moon-search">Search</ui-menu-item>
<ui-menu-item glyph="icon-moon-bin">Delete</ui-menu-item>
<ui-menu-section>Options</ui-menu-section>
<ui-menu-item glyph="icon-moon-alarm">Notifications</ui-menu-item>
<ui-menu-item glyph="icon-moon-cog">Settings</ui-menu-item>
</ui-menu>
</ui-container>
</ui-content>
</ui-page>
</template>
Non control glyph works as you can see when you select the glyphs page, then when you select the Hello page you can see that the toolbar is missing it's glyphs.
-->
See image:
Can you check if the icomoon svg file has been loaded, the icons prefixed glyph- is included in the framework by default, however the extra icons icomoon and hawcons need to be included in your app.html file
<compose view="../glyphs/icomoon.svg"></compose>
<compose view="../glyphs/hawcons-linear.svg"></compose>
<compose view="../glyphs/hawcons-filled.svg"></compose>
https://github.com/adarshpastakia/aurelia-ui-framework/blob/master/src/app.html
Related
I'm trying to get a green, cyan, purple and yellow large circle like this one: 🔴, but there aren't any codes for one. Is there any way to change the code to change the color?
No. The color is inherent to the character -- there's a LARGE BLUE CIRCLE as well (U+1F535 - 🔵), but no other colors are currently defined by the Unicode standard.
If using HTML, you can append xFE0E to get the text version and color that using CSS:
<span>🔴</span>
<span>🔴︎</span>
<span style="color: lime;">🔴︎</span>
Unicode is huge, even has Klingon, it has more colors and even smileys nowadays...
Here you go, change the numbers to search and find what you need...
for i in range (10):
ii = int('0x1f7e0',base=16)+i
print('{:>15}'.format('[{}: {}] '.format(hex(ii),chr(ii))),end='')
if i%7==6:
print()
For cyan circle, try starting from 0x1f7df with range 1000... Also note that unicode color is best effort, so e.g. on a Klingon browser things may not display in colour...
Also, to find the codes of characters you have e.g.:
chars='🔵🔴🟠🟡🟢🟣🟤🟦🟥🟧🟨🟩🟪🟫🛑🔶🔷🔸🔹🔺🔻'
for i,c in enumerate(chars):
print('[{}: {}] '.format(hex(ord(c)),c), end='')
if i%7==6:
print()
Gives:
[0x1f535: 🔵] [0x1f534: 🔴] [0x1f7e0: 🟠] [0x1f7e1: 🟡] [0x1f7e2: 🟢] [0x1f7e3: 🟣] [0x1f7e4: 🟤]
[0x1f7e6: 🟦] [0x1f7e5: 🟥] [0x1f7e7: 🟧] [0x1f7e8: 🟨] [0x1f7e9: 🟩] [0x1f7ea: 🟪] [0x1f7eb: 🟫]
[0x1f6d1: 🛑] [0x1f536: 🔶] [0x1f537: 🔷] [0x1f538: 🔸] [0x1f539: 🔹] [0x1f53a: 🔺] [0x1f53b: 🔻]
In both HTML and CSS, you can append xFE0E to get the text version and color that :
In HTML:
<div>❌</div>
<div style= "color: blue;">❌︎</div>
<div style= "color: green;">❌︎</div>
In CSS:
.css-symbol:after {
color: black;
content: "\274C";
}
.css-symbol1:after {
color: black;
content: "\274C\fe0e";
}
.css-symbol2:after {
color: blue;
content: "\274C\fe0e";
}
<div class="css-symbol">css: </div>
<div class="css-symbol1">css: </div>
<div class="css-symbol2">css: </div>
Mixing Both HTML and CSS:
div {
color: black;
}
.css-symbol:after {
color: blue;
content: "\274C\fe0e";
}
<div>❌</div>
<div>❌︎</div>
<div class="css-symbol"></div>
Simply put, how can you change the border color of a Chosen jQuery select box? I am assuming you can do it with CSS but I can't quite figure out how.
$(".pnChosen").chosen({
search_contains: true
});
<select required class="pnChosen"></select>
I can use this to change the border color of all of them, but I only want to change ones that I mark as required.
.chosen-container{
border: 1px solid red;
}
And I also want to change the background color when they are disabled if that is possible.
You can use chosen's option inherit_select_classes.
Give required class on select element, and set css for this selector .required>chosen-single
$(".pnChosen").chosen({
search_contains: true,
inherit_select_classes: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" rel="stylesheet" />
<style>
.required>.chosen-single {
border: 1px solid #EE0000;
}
</style>
<select required class="pnChosen required">
<option>Option 1</option>
<option>Option 2</option>
</select>
Another option is to use the adjacent sibling combinator (+) selector in CSS to achieve the desired styling.
For example:
HTML
<select id="myselect" required="required">
...
</select>
<div id="myselect_chosen" class="chosen-container chosen-container-single">
<a class="chosen-single">
...
</a>
</div>
CSS
select:required + div.chosen-container a { ... }
This would apply the desired style(s) to your div.chosen-container a DOM element immediately following select:required. Just be aware that you may still have to establish CSS priority if you're attempting to override an existing Chosen style so your definitions can supersede any existing chosen styles.
Reference: Adjacent Sibling Combinator
I'm using GWT 2.5.1 with uibinder xml for specifying ui layouts.
Being a newbie in this, can't figure out how to specify even a simple layout:
I want the [Somelabel:] and [Button] to take the minimal required place, and [Textbox] to occupy the rest. Tried different approaches: placing them to HorizontalPanel, FlowPanel, even DockLayoutPanel. None of them satisfy my requirements: HorizontalPanel just divides parent container to three equal parts, FlowPanel gives no respect to element width, DockLayoutPanel wants me to manually calculate and specify the width of [Somelabel:] and [Button] and still doesn't work at all.
That is the basic ui layout task and I can't believe that GWT does not have a way to specify what I want without manual pixelwidth calculation. Most different UI tools have the simple way to specify it.
this lays them in equal cells:
<g:HorizontalPanel width="100%">
<g:Label>Somelabel:</g:Label>
<g:TextBox ui:field="someTextBox"/>
<g:Button ui:field="someButton" text="Button"/>
</g:HorizontalPanel>
this lays them in a weird way (whether "float: left" specified for label or not; whether "float: right" specified for button or not):
<g:FlowPanel width="100%">
<g:Label>Somelabel:</g:Label>
<g:TextBox ui:field="someTextBox"/>
<g:Button ui:field="someButton" text="Button"/>
</g:FlowPanel>
this wants me to specify pixels but doesn't even display them:
<g:DockLayoutPanel width="100%" height="90">
<g:east size="30"><g:Label>Somelabel:</g:Label></g:east>
<g:center><g:TextBox ui:field="someTextBox"/></g:center>
<g:west size="50"><g:Button ui:field="someButton" text="Button"/></g:west>
</g:DockLayoutPanel>
[no image because it doesn't display anything]
I'm kinda stuck because the only kind-of-working xml is the HorizontalPanel one and it does not do what I want.
UP: added screenshots and tried "float:" css styles (which didn't change anything).
UP2: got the picture I wanted using LayoutPanel and specifying pixelwidth of each layer.
<g:LayoutPanel width="100%" height="40px">
<g:layer width="100px" left="0">
<g:Label>Somelabel:</g:Label>
</g:layer>
<g:layer left="100px" right="200px">
<g:TextBox ui:field="someTextBox"/>
</g:layer>
<g:layer width="200px" right="0">
<g:Button ui:field="someButton" text="Button"/>
</g:layer>
</g:LayoutPanel>
But the xml looks ugly, forces me to calculate pixels manually, and to specify each width in two places. Can I somehow leave the pixelwidth calculations to framework and just specify "place it there and give it minimum place it wants"?
If you refer to the GWT docs [here][1] it mentions your exact problem. Try using FlowPanel with float : left CSS property as specified.
EDIT :
This worked for me
Ui-Binder
<g:FlowPanel width="100%" addStyleNames="myTable">
<g:FlowPanel addStyleNames="myTableRow">
<g:Label addStyleNames="myTableLabel">Somelabel:</g:Label>
<g:FlowPanel width="100%" addStyleNames="myTableCell">
<g:TextBox ui:field="someTextBox" addStyleNames="myTableInput"/>
</g:FlowPanel>
<g:Button ui:field="someButton" text="Button" addStyleNames="myTableButton"/>
</g:FlowPanel>
</g:FlowPanel>
CSS :
.myTable {
display: table;
width: 100%;
}
.myTableRow {
display: table-row;
}
.myTableLabel {
display: table-cell;
}
.myTableCell {
display: table-cell;
width: 100%;
}
.myTableInput {
width: 100%;
}
.myTableButton {
display: table-cell;
}
I have the following code:
<img style="background: url(./image/data/logo.png) no-repeat top right" src="./image/data/picture.jpg" />
As it is now, it shows the logo.png under the picture.jpg image. How can I make it to be shown above the .jpg image?
Thanks.
You must use 2 images to do that. The img must be with position absolute (The one that you want to be over the other). Don't forget that the container must have position:relative in order to contain the absoluted png.
Here is the example:
http://jsfiddle.net/jNpaH/
The html tags:
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png"
class="png-over" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png"
/> </div>
The styles:
.image{position:relative}
.png-over{position:absolute; top:0; left:0}
The problem with that technique is that your code becomes spammed with the image tags.
One way of solving it with jQuery is to find each div container with the class 'images' and prepend to each one the image tag.
Here is the example:
http://jsfiddle.net/jNpaH/2/
According to your code I assume that you prefer to have a short html code. But it is impossible to have an image_tag with a background covering it.
The cleanest way is to use jQuery:
This is the final code:
http://jsfiddle.net/QyMkh/
First put a div that will contain all your images. The div must have a class, the images don't require it necessarily.
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
</div>
Then add this jQuery block in the html before the closing </body>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// store in a variable the url of the image that will be used as background
var url = 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png';
// select every image_tag that is children of the div with the class 'image'
jQuery('.image img').each(function() {
// every child image will be wrapped inside generated divs with a class 'img-wrap'
$(this).wrap('<div class="img-wrap"></div>');
});
// After the images are wrapped, insert the image tag that will work as background, note that instead of using the source I'm using the variable that stores it.
$('<img src="' + url + '" class="logo" />').prependTo('.img-wrap');
</script>
Finally add those style declarations to get the desired effect.
<style type="text/css">
.img-wrap{position:relative}
.img-wrap img.logo{position:absolute; top:0; left:0}
</style>
This code will keep your html documents with no unnecesary markup when you try to edit next time.
An advantage of using an image_tag as a background, is that with css you can resize its width and height. Try adding this new rule of stylesheet:
.img-wrap img.logo { height: 170px; left: 75px; position: absolute; top: 50px; width: 170px}
To end this, if you want more flexibility, for example you don't want the image_tags be container in a div, do this actions: replace this line of the jQuery block:
jQuery('.image img').each(function() {
with this
jQuery('.image').each(function() {
and add a class="image" to each
<img class="image">
I have a search field and I want my search button image to be in line with the search fields but it isn't. I have used div tags to try and move it but it always moves the search fields not just the button!
HELP!
<form action="weezyresults.php" method="post">
<input type="text" name="search" size="35" value="Job Title e.g. Assistant Manager"
style="background-color:white; border:
solid 1px #6E6E6E; height: 30px; font-size:18px;
vertical-align:9px;color:#bbb"
onfocus="if(this.value == 'Job Title e.g. Assistant Manager'){this.value = '';this.style.color='#000'}" />
<input type="text" name="searchterm" size="35" value="Location e.g. Manchester"
style="background-color:white; border:
solid 1px #6E6E6E; height: 30px; font-size:18px;
vertical-align:9px;color:#bbb"
onfocus="if(this.value == 'Location e.g. Manchester'){this.value = '';this.style.color='#000'}" />
<input type="image" src="but.tiff" alt="Submit" height="30" width="60">
</form>
Thanks!
James
It looks like it's inline to me. You possibly have a problem because your using a tiff file for that button. I'd convert that to a JPG.
If yours doesn't look like this you possibly have some other css in your project that is breaking your layout.
Use floats - eg: input { float: left } on each element, that should do the trick.
Try this out
http://jsfiddle.net/TMy6p/
I have moved your styling into an external stylesheet to tidy it up a bit and help you to avoid repeating the same style tags on elements.
basically you just need to float elements and give them widths.