I am using AngularStrap, (TypeAhead), trying to make the substring in the matched items to stand out, like either make them bold (like jquery autocomplete) or change the background of the characters ta different color
California
Technical
I thought this should be possible by changing css (if I know they have a selector for the matched substring) Or use of template/$templatecache
no luck so far
EDIT: In this plnkr I can see the drop down menu items have user input highlighted/bolded but cannot see why and how it happens:
<input type="text" class="span3" ng-model="typeaheadValue" bs-typeahead="typeahead">
plnkr -> http://plnkr.co/edit/Yjff9DiLnGqi2x1E5D2q?p=preview
The typeahead dropdown menu items can be styled through .dropdown-menu a. Matched text is regexed' to <strong>match></strong> i.e style those through .dropdown-menu a strong. Example :
/* style the dropdown items */
.dropdown-menu a {
font-family : 'courier new';
font-size: 110%;
}
/* styling matched text */
.dropdown-menu a strong {
color: white;
background-color: red;
}
forked plnkr -> http://plnkr.co/edit/LpdRiH9DxeRiAib3MOnn?p=preview
Related
I have a list of arrays in a table displayed using repeat.for. I need to display tr row in blue color when "receiving.supplier === Scrap Separated" and blue color row when the result is "receiving.supplier === Scrap Sorted". Is there any way I can do it with if.bind but for String that I got in network tab. Here is my network and code.
I think this is purely a CSS question. You can have CSS rules based on [data-supplier] and assign a different background color based on the value of the supplier property.
The example CSS rules can be as follows.
tr[data-supplier="Scrap Separated"] {
background-color: blue;
}
tr[data-supplier="Scrap Sorted"] {
background-color: green;
}
And then bind the data-supplier property in the markup.
<tr data-supplier="${recieving.supplier}">
...
</tr>
Note that you cannot possibly nest div directly under tbody as that will be evicted by browser being non-conformed element as per the expected schema.
I have a graphical bug with the ClearButton provided by react-bootstrap-typeahead. I wanted to replace it with another button (for instance the CloseButton from Bootstrap). Unfortunately, the CloseButton is not clickable.
Graphical bug
What do I do wrong ?
import { CloseButton } from "react-bootstrap";
import { Typeahead, ClearButton } from "react-bootstrap-typeahead";
import "bootstrap/dist/css/bootstrap.min.css";
import "react-bootstrap-typeahead/css/Typeahead.css";
<Typeahead
id="search"
options={chartData.datasets}
labelKey={chartData.datasets.label}
placeholder="look for projects"
multiple
onChange={setMultiSelections}
selected={multiSelections}
>
{({ onClear, selected }) => (
<div className="rbt-aux">
{!!selected.length && <CloseButton onClick={onClear} />}
</div>
)}
</Typeahead>
try to change rbt-close-content css class
I used react-bootstrap-typeahead/css/Typeahead.bs5.css instead.
It seems like there may be two different issues here:
1. The clear button isn't clickable.
This is happening because .rbt-aux has pointer-events: none; set to avoid blocking clicks on the input. The default close button then has pointer-events: auto; to enable clicks on the button. You'll need to add something similar, or define your own element to position the clear button that doesn't remove pointer-events.
.rbt-aux .btn-close {
pointer-events: auto;
}
2. There are two instances of the clear button being rendered in the component.
I'm not sure why this is happening. Based on your code sample, there should only be one button rendering. If you plan on rendering a custom clear button, be sure not to set the clearButton prop on the typeahead (or set it to false, which is the default).
Currently, I'm working on a plugin that uses custom formats. Unfortunately, I can't use classes as the output HTML has to use inline styles.
I'm using declarations like:
a.formatter.register("dotted", {
inline : 'span',
styles : {
borderStyle : 'dotted',
borderWidth : '1px',
}
});
a.formatter.register("dashed", {
inline : 'span',
styles : {
borderStyle : 'dashed',
borderWidth : '1px',
}
});
Problem I: I want to use formats that impact each other. What I mean is:
User clicks on option "dashed border"
-> if the selection already has a border-width set, don't touch. If not set, set border-width: 1px;
-> no matter what is currently set, override border-style: dashed;
User clicks on option "dotted border"
-> if the selection already has a border-width set, don't touch. If not set, set border-width: 1px;
-> no matter what is currently set, override border-style: dotted;
User clicks on "thick border"
-> If border-style is already set, don't touch. If not set, set border-style: solid;
-> no matter what is set, override border-width: 3px;
How can I read and filter the current CSS styles that are used for the current selection? In my example, a is the instance of the editor which is passed to the function when clicking a button. Please don't confuse my question with this one because it is no copy & paste action, so I cannot use that objects here.
Problem II: How to remove these styles as it could be a mixture of different combinations?
At the moment, the only idea I have to solve it is to create an array with all possible values and loop thru these, like
for (var i = 0; i < value.length; i++) {
var cssobj = {
inline : 'span',
styles : {
}
}
eval("cssobj.styles." + cssattr + "= \"" + value[i] + "\"");
a.formatter.register("tempformat", cssobj);
a.formatter.remove("tempformat");
a.formatter.unregister("tempformat");
}
which I find is an extremely ugly solution, and also not very performant.
Any other ideas?
I add costum styles to the RTE with a CSS File:
RTE.default.contentCSS = EXT:netjapan/Resources/Public/css/rte.css
For some elements this works. For example for a ulElement:
ul.liststyle1 {
list-style: none;
padding-left: 17px;
}
When I select the ul in the RTE I can chose the Blockstyle liststyle1.
I want to do the same for p:
p.test {
font-size: 80%;
}
And when I select the p I can chose the Blockstyle test and the style is used. But when I save the Blockstyle is gone.
I added this Typoscript:
RTE.default {
removeTags = sdfield, strike
proc.entryHTMLparser_db.removeTags = sdfield, strike
}
So that p is not in the removeTags list. But it had no effect.
Anyone know how it comes that the Blockstyle is removed on the pElement?
I had simillar problem last week. Sometimes RTE is going crazy. I mean that there is no logical sense in it. Check this: marke the text and use the container style it will wrap it in div but there will be also <p> in it so you will have something like <div><p class="bodytext">text</p></div> - you can add style for that. At least this solved my problem
I was creating a <div> tag in which I wanted to apply two classes for a <div> tag which would be a thumbnail gallery. One class for its position and the other class for its style. This way I could apply the style, I was having some strange results which brought me to a question.
Can two classes be assigned to a <div> tag? If so, which one overrules the other one or which one has priority?
Multiple classes can be assigned to a div. Just separate them in the class name with spaces like this:
<div class="rule1 rule2 rule3">Content</div>
This div will then match any style rules for three different class selectors: .rule1, .rule2 and .rule3.
CSS rules are applied to objects in the page that match their selectors in the order they are encountered in the style sheet and if there is a conflict between two rules (more than one rule trying to set the same attribute), then CSS specificity determines which rule takes precedence.
If the CSS specificity is the same for the conflicting rules, then the later one (the one defined later in the stylesheet or in the later stylesheet) takes precedence. The order of the class names on the object itself does not matter. It is the order of the style rules in the style sheet that matters if the CSS specificity is the same.
So, if you had styles like this:
.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, since both rules match the div and have exactly the same CSS specificity, then the second rule comes later so it would have precedence and the background would be red.
If one rule had a higher CSS specificity (div.rule1 scores higher than .rule2):
div.rule1 {
background-color: green;
}
.rule2 {
background-color: red;
}
Then, it would take precedence and the background color here would be green.
If the two rules don't conflict:
.rule1 {
background-color: green;
}
.rule2 {
margin-top: 50px;
}
Then, both rules will be applied.
Actually, the class that defined last in the css - is applied on your div.
check it out:
red last in css
.blue{ color: blue; }
.red { color: red; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
vs
blue last in css
.red { color: red; }
.blue{ color: blue; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
If you asking about they have same property then as per the CSS rule it's take the last statement.
<div class="red green"></div>
CSS
.red{
color:red;
}
.green{
color:green;
}
As per the above example it's take the last statement as per css tree which is .green.
The class that is defined last in the CSS have priority, if nothing else applies.
Read up on CSS priority to see how it works.
Many classes can be assigned to an element, you just separate them with a space
<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>
Because of the cascade in CSS, the overwriting rules closest the to bottom of the document will be applied to the element.
So if you have
.myClass
{
background: white;
color: blue;
}
.keepOnClassing
{
color: red;
}
The red color will be used, but not the background color as it was not overwritten.
You must also take into account CSS specificity, if you have a more specific selector, this one will be used:
.myClass
{
background: white;
color: blue;
}
div.myClass.keepOnClassing
{
background: purple;
color: red;
}
.stayClassySanDiego
{
background: black;
}
The second selector here will be used as it is more specific.
You can take a look at it all here.