I want to add one icon to placeholder like this
$("#tag_list").select2({
allowClear: true,
placeholder: "<i class='icon-group'></i> inout your tags...",
tags: ['a', 'b', 'c'],
});
But it renders plain text in select2, so how to render html text for placeholder?
Select2 automatically escapes HTML markup.
$("#tag_list").select2({
allowClear: true,
placeholder: "<i class='icon-group'></i> inout your tags...",
tags: ['a', 'b', 'c'],
escapeMarkup : function(markup) { return markup; } // let our custom formatter work
});
By overriding the 'escapeMarkup' parameter you can force it to render plain HTML instead (by returning the unescaped HTML as is). This will affect both the placeholder AND the select data (select2 handles the placeholder as any data, thus escaping it).
For more information, check the AJAX data example:
Examples - Select2 | LoadingRemoteData
You can specify a placeholder object, rather than only the text. This will render the HTML.
So in your case, the placeholder might look something like this.
$("#tag_list").select2({
placeholder: {
id: "-1",
text: '<i class="icon-group"></i> input your tags...'
}
});
Im guessing your are trying to use font-awesome.
They have a cheatsheet with unicodes here: http://fortawesome.github.io/Font-Awesome/cheatsheet/
This can be placed in the placeholder in html:
<input name="username" placeholder="">
Remember to add the on the input element:
font-family: 'FontAwesome'
This is not supported by all browsers so you might want to do a fallbackhack with the :before element.
.wrapper:before {
font-family: 'FontAwesome';
color:red;
position:relative;
content: "\f042";
}
Last fallback is to actually use an image like this:
background-image: url(http://www.levenmetwater.nl/static/global/images/icon-search.png);
background-position: 10px center;
background-repeat: no-repeat;
If you want it to remove the icon on focus, add this:
input:focus {
background-position: -20px center;
text-indent: 0;
width: 50%;
}
function format(state){
if (!state.id) {
return state.text; // optgroup
} else {
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
}
}
$("#tag_list").select2({
formatResult: format,
formatSelection: format,
escapeMarkup: function(m) { return m; }
});
http://ivaynberg.github.io/select2/
Related
I'd like to add a hyperlink in a editor, like vscode does:
I'd like to add this formatted document and when you click into it, some operation happens, open a file dialog, for example.
I have no code to show yet because I didn't find anything like that yet, only for regular text that goes like this:
const line = editor.getPosition();
if(!line) {
throw new Error('line is null');
}
const range = new monaco.Range(line.lineNumber, 1,
line.lineNumber, 1);
const text = "empty tab";
const op: monaco.editor.IIdentifiedSingleEditOperation = {
range: range,
text: text,
forceMoveMarkers: true
};
editor.executeEdits('my-source', [op]);
but I didn't see how add a format it.
You can use an overlay element and define the placeholder content in HTML, with links that will perform actions (e.g. change the editor theme, change the language etc).
The HTML for the placeholder would look something like this:
<div class="monaco-placeholder">
This is a test placeholder that will disappear when you click into the editor.
Click
here
first if you want to change the editor language from HTML to JavaScript, or click
here
if you want to change the editor theme
</div>
Along with the following CSS:
.monaco-placeholder {
color: darkturquoise;
display: none;
position: absolute;
top: 0;
left: 65px;
pointer-events: all;
z-index: 1;
opacity: 0.7;
}
You can then wire this up in JavaScript as follows:
Functions to hide and show the placeholder:
function showPlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "initial";
}
function hidePlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "none";
}
Create the editor and show the placeholder:
const instance = monaco.editor.create(document.getElementById('container'), {
value: "",
language: 'html'
});
showPlaceholder();
Add event handlers for any links in the placeholder that you want to perform actions when clicked:
document.getElementsByClassName('change-language')[0].addEventListener('click', (e) => {
e.stopPropagation();
var model = instance.getModel();
monaco.editor.setModelLanguage(model, "javascript")
console.log('language successfully changed to JavaScript')
});
document.getElementsByClassName('change-theme')[0].addEventListener('click', (e) => {
e.stopPropagation();
monaco.editor.setTheme('vs-dark')
console.log('theme successfully changed')
});
Event handler to clear the placeholder and focus into the editor when the user clicks on any part of the placeholder apart from the links:
document.getElementsByClassName('monaco-placeholder')[0].addEventListener('click', () => {
hidePlaceholder();
instance.focus();
});
If you copy the HTML, CSS and JavaScript below into the Monaco Playground, you will see this working:
HTML
<div id="container" style="height: 100%"></div>
<div class="monaco-placeholder">
This is a test placeholder that will disappear when you click into the editor.
Click
here
first if you want to change the editor language from HTML to JavaScript, or click
here
if you want to change the editor theme
</div>
CSS
.monaco-placeholder {
color: darkturquoise;
display: none;
position: absolute;
top: 0;
left: 65px;
pointer-events: all;
z-index: 1;
opacity: 0.7;
}
JavaScript
const instance = monaco.editor.create(document.getElementById('container'), {
value: "",
language: 'html'
});
showPlaceholder();
function showPlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "initial";
}
function hidePlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "none";
}
document.getElementsByClassName('monaco-placeholder')[0].addEventListener('click', () => {
hidePlaceholder();
instance.focus();
});
document.getElementsByClassName('change-language')[0].addEventListener('click', (e) => {
e.stopPropagation();
var model = instance.getModel();
monaco.editor.setModelLanguage(model, "javascript")
console.log('language successfully changed to JavaScript')
});
document.getElementsByClassName('change-theme')[0].addEventListener('click', (e) => {
e.stopPropagation();
monaco.editor.setTheme('vs-dark')
console.log('theme successfully changed')
});
Is there any way to style the text message within an ionic 2 toast?
I have tried this:
let toast = Toast.create({
message: "Some text on one line. <br /><br /> Some text on another line.",
duration: 15000,
showCloseButton: true,
closeButtonText: 'Got it!',
dismissOnPageChange: true
});
toast.onDismiss(() => {
console.log('Dismissed toast');
});
this.nav.present(toast);
}
But clearly you can't use html in the text so I am guessing the answer to my question is no?
You must add 'cssClass: "yourCssClassName"' in your toastCtrl function.
let toast = Toast.create({
message: "Some text on one line. <br /><br /> Some text on another line.",
duration: 15000,
showCloseButton: true,
closeButtonText: 'Got it!',
dismissOnPageChange: true,
cssClass: "yourCssClassName",
});
than you can add any feature to the your css class. But your css feature went outside the default page'css. Exmp:
page-your.page.scss.name {
//bla bla
}
.yourCssClassName {
text-align:center;
}
I was able to achieve a toaster color change by adding a custom class on the toaster create
let toast = this.toastCtrl.create({
message: 'Foobar was successfully added.',
duration: 5000,
cssClass: "toast-success"
});
toast.present();
}
In that pages scss file i then went outside the default nested page name ( because the toaster is NOT inside the root of ion page name thing). And all though this is a bit hacky i just explicitly targeted the next div element after the custom class that i added
.toast-success {
> div{
background-color:#32db64!important;
}
}
I say its hacky because you have to use the !important on it. You can avoid the !important by wrapping the .toast-success with .md,.ios,.wp{...
You can override the style default by overriding the main toaster variables in the theme/variables.scss file.
$toast-ios-background:(#32db64);
$toast-md-background:(#32db64);
$toast-wp-background:(#32db64);
This will only override the default value though and not a custom value. there are a few more variables that can be styled as well.
First, import toast controller from ionic-angular and make object of that in constructor.
import { ToastController } from "ionic-angular";
constructor(private _tc: ToastController) {
}
After that wherever you want to show your toast message write that.
let options = {
message: "Your toast message show here",
duration: 3000,
cssClass: "toast.scss"
};
this._tc.create(options).present();
Here is my scss:
.toast-message {
text-align: center;
}
Or you can check best example from this link. I think it will help you. :)
Or else check the answer on this link.
If you define your own css class in app.scss (not in page.scss)
you can style it with .toast-wrapper and .toast.message
No need to use > div{
Example:
.yourtoastclass {
.toast-wrapper {
background: blue;
opacity: 0.8;
border-radius: 5px;
text-align: center;
}
.toast-message {
font-size: 3.0rem;
color: white;
}
}
in theme/variables.scss you can make a default
Example (red and little transparent):
$toast-width: 75%; /* default 100% */
$toast-ios-background: rgba(153, 0, 0, .8);
$toast-md-background: rgba(153, 0, 0, 0.8);
Ionic 2 provide a very useful way to override their component style you can override the toaster SASS variable in src/theme/variables.scss by adding
$toast-ios-title-color: #f00 ;
$toast-md-title-color:#f00;
this will override the default style please refer to this Overriding Ionic Sass variable
You can accomplish, however you need to modify the toast component template itself.
Via explorer:
\node_modules\ionic-angular\components\toast\toast.js
Change line 194 (template):
{{d.message}} to <div [innerHTML]='d.message'></div>
You should be able to change any of the message styling in the css using .toast-message selector:
.toast-message {
font-family: Helvetica,
color: red
}
Or, if you look at the docs (http://ionicframework.com/docs/v2/api/components/toast/Toast/) there is a cssClass property you can use to assign your toast a specific class and then style that.
Change toast background color and opacity:
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
cssClass: 'changeToast'
});
and add app.scss:
.changeToast{.toast-wrapper {opacity: 0.6; border-radius: 5px !important; text-align: center; background: color($colors, primary);}};
It's used with .toast-message
I tried all above, still didn't work, therefore I come across a new solution, you need cssClass outside of page css declaration:
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
cssClass: 'toastcolor'
});
post-list.scss like this
page-post-list {
}
.toastcolor .toast-message {
background-color:skyblue;
}
Not sure about old Ionic versions, but in Ionic 5 you can't directly change inner CSS since it's encapsulated in the shadow
<ion-select>
#shadow-root
<div class="toast-container" part="container">
...
</div>
</ion-select>
so, to change .toast-container (for example) in your cssClass you should use:
.my-custom-class::part(container) {
flex-direction: column;
}
.my-custom-class {
.toast-container {
flex-direction: column; // will not work
}
}
I'm using ionic v5 with angular and
according to: https://ionicframework.com/docs/api/toast#css-shadow-parts
you can do something like this:
::ng-deep{
ion-toast::part(container) {
...
}
ion-toast::part(message) {
...
}
}
I'm searching for a simple solution to build a toolbar to insert textile markup.
No parser is needed, I only miss a toolbar / buttons to insert. Like quicktags for bbcode.
Is there a textile editor / toolbar or a universal js class?
Insert markup like "*" around selected text
Toogle markup (remove if inserted before
With some examples and hints I could try to build it myself.
I know MarkitUp, but would like to use a minimal and simple toolbar.
Maybe something like used here...
Found a solution to insert markup. Should do it!
Basic example found with google
JSFiddle demo
I put together a JSFiddle demo with a contenteditable div and simple insert B-tag "button".
var selected = '';
var before = '<b>';
var after = '</b>';
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
function insert(element, selection, before, after) {
$(element).html($(element).html().replace(selection, before+selection+after));
}
$(document).ready(function (){
$('.editable').bind('mouseup touchend', function (e){
selected = getSelectionText();
});
$('#insertB').click(function(e) {
insert('.editable', selected, before, after);
$('.editable').focus();
});
$('#toggleEditor').click(function() {
var editable = $('.editable');
if (editable.attr('contenteditable') == 'false') {
editable.attr('contenteditable','true').addClass('wysiwyg').focus();
}
else {
editable.attr('contenteditable','false').removeClass('wysiwyg');
}
});
});
.editable {
border: dashed black 2px;
padding: 10px;
margin-bottom: 20px;
}
.wysiwyg {
border: solid red 2px;
}
span {
padding: 5px;
border: solid black 1px;
margin-right: 20px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<body >
<div class="editable" contenteditable=false>
Just a simple text...
</div>
<span id="insertB">insert Bold</span><span id="toggleEditor">Toggle editor</span>
</body>
It is easy to use one of the icons available from the standard icon set:
$("#myButton").button({icons: {primary: "ui-icon-locked"}});
But what if I want to add one of my own icons that is not part of the framework icon set?
I thought it would be as easy as giving it your own CSS class with a background image, but that doesn't work:
.fw-button-edit {
background-image: url(edit.png);
}
Any suggestions?
I could also recommend:
.ui-button .ui-icon.your-own-custom-class {
background-image: url(your-path-to-normal-image-file.png);
width: your-icon-width;
height: your-icon-height;
}
.ui-button.ui-state-hover .ui-icon.your-own-custom-class {
background-image: url(your-path-to-highlighted-image-file.png);
width: your-icon-width;
height: your-icon-height;
}
then just type in the JS code:
jQuery('selector-to-your-button').button({
text: false,
icons: {
primary: "you-own-cusom-class" // Custom icon
}});
It worked for me and hope it works for you too!
I believe the reason why his won't work is because you're icon's background-image property is being overridden by the jQuery UI default sprite icon background image. The style in question is:
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_888888_256x240.png");
}
This has higher specificity than your .fw-button-edit selector, thus overriding the background-image proerty. Since they use sprites, the .ui-icon-locked ruleset only contains the background-position needed to get the sprite image's position. I believe using this would work:
.ui-button .ui-icon.fw-button-edit {
background-image: url(edit.png);
}
Or something else with enough specificity. Find out more about CSS specificity here: http://reference.sitepoint.com/css/specificity
This is based on the info provided by Yi Jiang and Panayiotis above, and the jquery ui button sample code:
As I was migrating an earlier JSP application that had a toolbar with images per button, I wanted to have the image inside the button declaration itself rather than create a separate class for each toolbar button.
<div id="toolbarDocs" class="tableCaptionBox">
<strong>Checked Item Actions: </strong>
<button id="btnOpenDocs" data-img="<s:url value="/images/multi.png"/>">Open Documents</button>
<button id="btnEmailDocs" data-img="<s:url value="/images/email.png"/>">Attach to Email</button>
</div>
Of course there were plenty more buttons than just the two above. The s tag above is a struts2 tag, but you could just replace it with any URL
<button id="btnOpenDocs" data-img="/images/multi.png">Open Documents</button>
The below script looks for the attribute data-img from the button tag, and then sets that as the background image for the button.
It temporarily sets ui-icon-bullet (any arbitrary existing style) which then gets changed later.
This class defines the temporary style (better to add further selectors for the specific toolbar if you plan to use this, so that the rest of your page remains unaffected). The actual image will be replaced by the Javascript below:
button.ui-button .ui-icon {
background-image: url(blank.png);
width: 0;
height: 0;
}
and the following Javascript:
$(document).ready(function () {
$("#toolbarDocs button").each(
function() {
$(this).button(
{ text: $(this).attr('data-img').length === 0? true: false, // display label for no image
icons: { primary: "ui-icon-bullet" }
}).css('background-image', "url(" + $(this).attr('data-img') +")")
.css('background-repeat', 'no-repeat');
});
});
The solution at this link worked great for me:
http://www.jquerybyexample.net/2012/09/how-to-assign-custom-image-to-jquery-ui-button.html
$(document).ready(function() {
$("#btnClose")
.text("")
.append("<img height="100" src="logo.png" width="100" />")
.button();
});
My solution to add custom icons to JQuery UI (using sprites):
CSS:
.icon-example {
background-position: 0 0;
}
.ui-state-default .ui-icon.custom {
background-image: url(icons.png);
}
.icon-example defines position of icon in custom icons file. .ui-icon.custom defines the file with custom icons.
Note: You may need to define other JQuery UI classes (like .ui-state-hover) as well.
JavaScript:
$("selector").button({
icons: { primary: "custom icon-example" }
});
Building on msanjay answer I extended this to work for custom icons for both jquery ui buttons and radio buttons as well:
<div id="toolbar">
<button id="btn1" data-img="/images/bla1.png">X</button>
<span id="radioBtns">
<input type="radio" id="radio1" name="radName" data-mode="scroll" data-img="Images/bla2.png"><label for="radio1">S</label>
<input type="radio" id="radio2" name="radName" data-mode="pan" data-img="Images/bla3.png"><label for="radio2">P</label>
</span>
</div>
$('#btn1').button();
$('#radioBtns').buttonset();
loadIconsOnButtons('toolbar');
function loadIconsOnButtons(divName) {
$("#" + divName + " input,#" + divName + " button").each(function() {
var iconUrl = $(this).attr('data-img');
if (iconUrl) {
$(this).button({
text: false,
icons: {
primary: "ui-icon-blank"
}
});
var imageElem, htmlType = $(this).prop('tagName');
if (htmlType==='BUTTON') imageElem=$(this);
if (htmlType==='INPUT') imageElem=$("#" + divName + " [for='" + $(this).attr('id') + "']");
if (imageElem) imageElem.css('background-image', "url(" + iconUrl + ")").css('background-repeat', 'no-repeat');
}
});
}
// HTML
<div id="radioSet" style="margin-top:4px; margin-left:130px;" class="radio">
<input type="radio" id="apple" name="radioSet" value="1"><label for="apple">Apple</label>
<input type="radio" id="mango" name="radioSet" value="2"><label for="mango">Mango</label>
</div>
// JQUERY
// Function to remove the old default Jquery UI Span and add our custom image tag
function AddIconToJQueryUIButton(controlForId)
{
$("label[for='"+ controlForId + "'] > span:first").remove();
$("label[for='"+ controlForId + "']")
.prepend("<img position='fixed' class='ui-button-icon-primary ui-icon' src='/assets/images/" + controlForId + ".png' style=' height: 16px; width: 16px;' />");
}
// We have to call the custom setting to happen after document loads so that Jquery UI controls will be there in place
// Set icons on buttons. pass ids of radio buttons
$(document).ready(function () {
AddIconToJQueryUIButton('apple');
AddIconToJQueryUIButton('mango');
});
// call Jquery UI api to set the default icon and later you can change it
$( "#apple" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });
$( "#mango" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });
in css
.ui-button .ui-icon.custom-class {
background-image: url(your-path-to-normal-image-file.png);
width: your-icon-width;
height: your-icon-height;
}
.ui-state-active .ui-icon.custom-class, .ui-button:active .ui-icon.custom-class {
background-image: url(your-path-to-highlighted-image-file.png);
width: your-icon-width;
height: your-icon-height;
}
in HTML
<button type="button" class="ui-button ui-widget ui-corner-all">
<span class="custom-class"></span> CAPTION TEXT
</button>
in JavaScript
$("selector").button({
icons: { primary: "custom-class" }
});
I tried many times and searched this board, but I can't do a simple thing like this:
http://xs.to/xs.php?h=xs139&d=09201&f=menu676.gif
I want to render a menu like this:
item 1 | item 2 | item 3 | .... etc...
"item 1" AND pipe character "|" = sIFR rendered text
HTML:
<div id="menu"> item 1 <span class="pipe"> | </span> item 2 <span class="pipe"> | </span> </div>
This part is within my HTML at the very bottom:
<script type="text/javascript">
var metaroman2 =
{ src: 'shared/sifr/metaroman2.swf' , ratios:[....7, 1.32....] };
sIFR.activate(metaroman2);
sIFR.replace(metaroman2, {
selector: '#menu', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956; font-weight:bold;}'], wmode: "transparent" });
sIFR.replace(metaroman2, {
selector: '.pipe', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956;}'], wmode: "transparent" });
</script>
CSS:
.sIFR-active .pipe {
visibility : hidden; line-height : 1em; margin-left : 5px; margin-right : 5 px;
}
.sIFR-active #menu {
visibility : hidden; line-height : 1em;
}
The problem is, that the "|" character is beeing put right at the end of the word with no spacing between (5px).
How i want it:
item 1 [5px space] | [5px space] item 2
What i get:
item 1|item 2
OTHER METHOD:
If I try it with an image, the image doesnt get displayed at all. ("sIFR.fitExactly = true" has been set in sifr-config)
What I mean with "image": in stead of the pipe sign, an image which represents the pipe sign.
html:
<div id="menu"> item 1 <img src=...> item 2 <img src=...> </div>
css:
.sIFR-active #menu {
visibility : hidden; line-height : 1em;
}
script:
This part is within my HTML at the very bottom:
<script type="text/javascript">
var metaroman2 =
{ src: 'shared/sifr/metaroman2.swf' , ratios:[....7, 1.32....] };
sIFR.activate(metaroman2);
sIFR.replace(metaroman2, {
selector: '#menu', css: ['.sIFR-root { background-color: #F9F9F9; color: #1F2956; font-weight:bold;}'], wmode: "transparent" });
</script>
I'm sorry for the messy code, but I hope you can make some sense of it.
(edit: have been using sIFR for a few days, simple heading replacing with ratio's work perfectly but the above is beating me up)
wrap every menu item into separate element, and replace that with sIFR selector, don't replace pipes. wrap them into span and style only with CSS.
those replaced items and spans should all be floating block elements.
html:
<div id="menu">Item 1<span>|<span>Item2...
css:
#menu a , #menu span {
display: block;
float: left;
}