I think I understand how placeholders work regarding select2 library.
There is a thing bugging me for a while already, how to have non-escaped placeholder on multiple selects.
The reason is I like to place an icon at the placeholder.
Single selects uses an additional option tag and the property escapeMarkup at the select2 options object.
$('mySelector').select2({
escapeMarkup: function(markup){
return markup;
}
});
Nothing of that is possible at multiple selects since the placeholder is placed at an input tag, so html markup is escaped and you get the <i> tag instead of the icon.
Is there a workarund for this?
#Marcos i have done some solution regarding placeholder regarding select2 library.
<select class="select2 selectPlaceholder" multiple="multiple"></select>
<script>
$(".selectPlaceholder").select2({
placeholder: "Select Product",
allowClear: true
});
</script>
Optional
allowClear: true
Please let me know if i am right because i got your question but still i have some doubt
understanding Que.
Taking your previous comment as a reference:
"the idea is to place a font awesome icon at the placeholder and
preventing select2 from escaping it, and i'm getting the i tag instead
of the icon"
...and if I understood correctly, you want to place a Font Awesome icon on the Placeholder of the Select2 element and keep it there, correct?
Check the following code where I'm inserting a DIV that contains a Font Awesome icon (the little airplane) and placing it on top of the Input used for searching. Even when you select different items from the Select (is a Multiple Select as you needed) the icon remains in the placeholder and also it has a text by default.
Remember to add the class="tab" in case you don't see the Icon.
$(document).ready(function(){
$("#sel1").select2({
placeholder: 'Search here...',
allowClear: true
});
$(".select2-search.select2-search--inline").prepend("<div class='fab'></div>");
});
select {
width:300px;
}
.multi {
padding:10px;
font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
font-style: normal;
font-weight: 600;
text-decoration: inherit;
}
.top {
position: absolute;
left: 0px; top:0px;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<!-- select2-bootstrap4-theme -->
<link href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" rel="stylesheet"> <!-- for live demo page -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<div class="container-fluid" style="width: 100%;">
<select class="multi fab" multiple placeholder="" data-allow-clear="1" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<script>
</script>
</body>
</html>
Related
I have 2 jqgrid tables here in fiddle, what is the best way to apply multiple themes only to the jqgrid tables.
I had tried adding css selector scope to the tables but it didnt work correctly on the table http://jqueryui.com/download/
Theme1 for table1
<link rel="stylesheet" type="text/css" href="../themeLefrog/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="../themeLefrog/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../themeLefrog/jquery-ui.theme.css" />
My theme2 for table2
<link rel="stylesheet" type="text/css" href="../themeBlitzer/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="../themeBlitzer/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="../themeBlitzer/jquery-ui.theme.css" />
First of all you should download custom jQuery UI themes from the jQuery UI download page. For example, you want to use Le-Frog and Redmond themes on one HTML page. The you can use HTML code like
<div class="redmond">
<table id="grid1"></table>
</div>
<div class="le-frog">
<table id="grid2"></table>
</div>
It means that div.redmond and div.le-frog could be selectors, which could be used to specify the scope of applying of the corresponding jQuery UI Theme CSS. Thus you can choose the following on the download page:
You included both CSS on your web page, like
<link rel="stylesheet" href="jquery-ui/le-frog/jquery-ui.css">
<link rel="stylesheet" href="jquery-ui/redmond/jquery-ui.css">
and use the same code as usual. The results will be like on the demo:
or like on the another demo, which use Blitzer and Le-Frog themes:
I included in the demos jquery-ui.css instead of jquery-ui.min.css only to simplify everybody to examine the files. There contains CSS rules with the corresponding rules. For example
div.redmond .ui-widget {
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1.1em;
}
and
div.le-frog .ui-widget {
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1.1em;
}
instead of the standard rule
.ui-widget {
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1.1em;
}
Say I have a custom component with
<head>
<link rel="stylesheet" src="...">
</head>
<body>
<element name="elem">
<template>
<ul class="foo">
...
where the referenced style sheet has an entry
ul .foo {
list-style-type: none;
}
The problem is that I can't get the style to apply to the ul. Nothing I tried works unless I put style attribute on the ul element itself. I have tried putting under with scoped attribute and that doesn't work either. It does a weird thing where the class of the ul becomes "elem_foo".
Thanks for the question! Here's how I do it:
In my main HTML:
<div is="x-click-counter">
In my custom element:
<element name="x-click-counter" constructor="CounterComponent" extends="div">
<template>
<button class="button1" on-click="increment()">Click me</button><br />
<span>(click count: {{count}})</span>
<style scoped>
div[is=x-click-counter] span {
color: red;
}
</style>
</template>
<script type="application/dart" src="xclickcounter.dart"></script>
</element>
There are two things going on here.
1) I use the form of <div is="x-foo"> instead of <x-foo>. I like how the first form is more backwards compatible, and it's more explicit with how I will find the element.
2) I put a <style scoped> inside my <template> tag.
Web UI will see the scope style tag, and generate a CSS file for you. It looks like this:
/* Auto-generated from components style tags. */
/* DO NOT EDIT. */
/* ====================================================
Component x-click-counter stylesheet
==================================================== */
div[is=x-click-counter] span {
color: #f00;
}
Web UI also adds a link to this generated CSS file to your main HTML file.
In this case, hovering over the left link makes a tiny dash appear to its right (between the two links). How can I get rid of this? I see this in Safari and Chrome both, but I don't see anything in the style sheet that would make it do this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Walls</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="custo.css">
<script src="prettyPhoto_compressed_3/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="prettyPhoto_compressed_3/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="prettyPhoto_compressed_3/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
</head>
<body>
<br>
<a href="gallery.html">
<img src="test.jpg" class="testclass" alt="test" width="170" />
</a>
<a href="info.html">
<img src="test.jpg" class="testclass" alt="test" width="55" />
</a>
<div class="container-fluid">
<br>
</div><!-- .container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8"> <!--initialize prettyPhoto-->
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
If you're seeing the same thing I'm seeing (I don't have all the style sheets), you're seeing the underline of the a tag for the image.
You can just remove that using text-decoration: none on your image links;
<a href="gallery.html" style="text-decoration: none !important;">
The !important at the end of the style helps to override any selectors in your css which may have already have an !important emphasis.
Of course this is in practice better done using a class that you set on your image links.
This is an old post, but I would like to contribute to something. This will help other people why the dash (-) appears.
This is because there is an empty space inside the a tag. For example:
<a href="#">
<i>test</i>
</a>
If you set your line like this: <i>test</i> the dash/underline will disappear, but some tools might still format your code and they will add the space. So, using the css mentioned in the previous post will eliminate the issue.
I am applying draggable event of jQuery UI library to a popup window. Dragging works well,but the problem is, if the window has scroll and if I click on the scroll drag event is triggered and popup is being moved and drag event is not released even the scroll event is released... Can you please tel me how to overcome it...
Here is my code snippet.....Please check and let me know what's the error
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script>
<style>
#Outer{
width:400px;
height:100px;
border:1px solid blue;
position:absolute;
overflow:auto;
}
#Hdr{
background:#ffcc99;
border-bottom:1px solid blue;
}
</style>
</head>
<body>
<div id="Outer">
<div id="Hdr">About India</div>
<div>
The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP).
Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a
newly industrialised country. However, it continues to face the challenges of poverty, illiteracy, corruption, and inadequate public healthcare.
</div>
</div>
</body>
<script>
$(document).ready(function(){
$('#Outer').draggable();
});
</script>
</html>
You may want to use a handler to bypass that problem: Like here fiddle
HTML :
<div id="Outer">
<div id="Hdr">About India</div>
<div id="Inner">
The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP).
Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a
newly industrialised country. However, it continues to face the challenges of poverty, illiteracy, corruption, and inadequate public healthcare.
</div>
</div>
CSS:
#Outer{
width:400px;
border:1px solid blue;
position:absolute;
}
#Inner {
width:400px;
height:80px;
position:absolute;
border:1px solid blue;
overflow:auto;
}
#Hdr{
background:#ffcc99;
border-bottom:1px solid blue;
}
JS :
$(document).ready(function(){
$('#Outer').draggable({handle: "#Hdr"});
});
The following code loads a txt file content in a new tab. But it doesn't preserve newlines even though the content is inside a <pre> tag:
multiline.html:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.4.1.min.js"></script>
<script src="js/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="js/ui-lightness/jquery-ui-1.8.15.custom.css" type="text/css"></link>
<style>
pre {
border: 1px red solid !important;
}
</style>
<script>
$(document).ready(function() {
$("#tabs").tabs({panelTemplate: '<pre></pre>'});
});
</script>
</head>
<body>
<h3>PRE TAG:</h3>
<pre>
Multi
line
FTW
</pre>
<h3>jQueryUI-loaded PRE TAG:</h3>
<div id="tabs">
<ul>
<li>Tab</li>
</ul>
</div>
</body>
</html>
multiline.txt:
I'm line #1
And I'm line #2
Guess what! I'm #3
And woohoo I'm #4 but I wanted to be alone!
As an alternative, I tried to create a jsfiddle, with no success since the browser will yell at me with cross-origin loading error.
You could try wrapping the text with a pre tag:
http://www.w3schools.com/tags/tag_pre.asp
Remember, HTML parsing ignores line breaks. If you want it to render with the line breaks, you need to add <br /> tags.
I am line #1 <br />
I am line #2 <br />
I am line #3 <br />
EDIT: Since you don't have access to the source, you can do something like this (using "content" ID as placeholder for actual container DIV id, replace with your own.):
$("#content").html( $("#content").html().replace("\n","<br />") );
As per jQueryUI ticket #7669, it can't be done with the tabs widget.
Remote tabs expect to load HTML, not plaintext.