I have n dropdown input element which I am re-using in differernt parts of different applications. The dropdown input element has options with dropdowns inside of itself. The dropdowns can vary in length, and have 50 options or just 5. Something like this:
I need to add some styling based on a class react-select-2-option-[indexOfTheOptionWithDropdown]. For example the dynamic css class for Sydney 333 is react-select-2-option-2 because it's the second dropdown element in the whole input.
Sydney 333222 has a dynamic class of react-select-2-option-1.
However, I have no idea how to do it in a way that the application would be able to recognize how many options with dropdowns there are and assign an index to each classes ending based on the length and position in the array of options. I need it because the 'react-select' library is assigning default styles which are seemingly impossible to overwrite any other way. I could just hardcode it, although that seems pretty static and anti-codish?
I'm mapping the options in a JSX component with index numbers. And ideally, I'd need to send that index to the CSS file somehow. Is it even possible? Should I use something like styled css components and pass index to overwrite the CSS, or is there some other way to achieve this?
EDIT:
hard coded react-select-2-option-4:hover with white background
default style ( options have a grey background, and do not show that and item is hovered over )
You can use an index to define a CSS class name like the one below.
var options = <list of DOM options like Sydney 333222 and Sydney 333>;
for (var i in options) {
options[i].className = `react-select-2-option-${i}`;
}
But this is a strange approach. It's better for you to use a variable with common CSS and apply this to the specific style:
var commonCss = { color: 'red', fontWeight: 'bold' };
var especificCss = [{ border: 'solid 1px blue'}];
var options = <list of DOM options like Sydney 333222 and Sydney 333>;
for (var i in options) {
Object.keys({ ...commonCss, ...especificCss[i]}).forEach(function(key) {
options[i][key].className = options[key];
});
}
Also you can to define a class css with the common style and them apply only the specific.
var especificCss = [{ border: 'solid 1px blue'}];
var options = <list of DOM options like Sydney 333222 and Sydney 333>;
for (var i in options) {
Object.keys(especificCss[i]).forEach(function(key) {
options[i][key].className = options[key];
});
}
Related
I have a requirement to use tags on a web page. No problem--Materializecss handles that. However, my tags can be any of several types, so each tag can be of a different color to indicate the type. Again, no problem.
Unfortunately, to support Materializecss keyboard functions, I need to rework it. Before, I was using a hack to just add the divs myself and giving them a class "chip". Now I'm using the materialize addChip function, which is only illustrated to have 'tag' and 'data'.
How do I add the color and textcolor classes to those chips? It seems like a simple thing. The javascript that creates the tag is:
instance.addChip({ tag: 'tag text', });
I'd like to know if there's something like:
instance.addChip({ tag: 'tag text', color: 'teal', text-color: 'white-text', });
Anyone know?
So, my example was that I'm adding a tag from a form--so there's easier ways to do this. However, this is how to add the chip, adjust the styling, and add custom attributes so that you have better control of the way the tag is displayed. You can use this pattern to keep track of pictures and custom fields for database primary keys and stuff.
//get the instance
var chipInstance = M.Chips.getInstance($('.chips'));
//add the chip. id is generated elsewhere and is the primary key for database
chipInstance.addChip({
tag: 'text',
textColor: 'white-text',
tagColor: 'red',
tagId: id,
});
//get the data
var dataArray = chipInstance.chipsData;
//last added data
var myData = dataArray[dataArray.length - 1];
//last added chip div
var allChips = $(chipInstance.$chips);
//get the last chip (the one we just added)
var myChip = allChips.last()[0]; //the data is in the 0th position
$(myChip).addClass(myData["tagColor"]); //add the 'red' class
$(myChip).addClass(myData["textColor"]); //add the 'white-text' class
//need to preserve this because it will be the database key to handle any deletes.
$(myChip).attr('data-id', myData["tagId"]);
$(myChip).attr('title', 'more title text'); //adjust attributes
I am using draft.js, and I have everything I need working except for one thing.
I want to be able to add a custom block option that will apply a span with a custom class (e.g. content) around the selected content in the editor.
Is this possible with draft-js custom blocks?
Any good examples out there? (didn't find anything when googling)
You can do it without wrapping text to the element with a custom class. You can style selected text with method RichUtils.toggleInlineStyle. More details described here.
Look at this working example - https://jsfiddle.net/x2gsp6ju/2/
Define customStyleMap object. Keys of this object should be unique names of your custom styles and values - objects with appropriate styles.
const customStyleMap = {
redBackground: {
backgroundColor: 'red'
},
underlined: {
textDecoration: 'underline',
fontSize: 26
},
};
Pass this object to customStyleMap property of Editor component:
<Editor
placeholder="Type away :)"
editorState={this.state.editorState}
onChange={this._handleChange}
customStyleMap={customStyleMap}
/>
In this example, I apply styles for selected text after click on appropriate buttons, I call this.applyCustomSTyles method and pass style-name as first argument. In this method I generate new editorState with RichUtils.toggleInlineStyles:
applyCustomStyles = (nameOfCustomStyle) => {
this._handleChange(
RichUtils.toggleInlineStyle(
this.state.editorState,
nameOfCustomStyle
)
);
}
Is there a way to define own list styles for ckeditor. I have found the plugin http://ckeditor.com/addon/liststyle but it lets me choose only things like circle or square.
I want to define own css classes for ol or ul in my application that i can use. For example a class to define more space between list elements. the users of the editor should pick the list class via a context menu like in the nice "liststyle" plugin.
Is there a way to do this?
Confirmed the approach mentioned above works, I am using Drupal, Ckeditor List Style (plugin) and the Ckeditor List Style module (Drupal module).
I needed to make a change to the lang > en.js file to add the appropriate Title in instead of the function as the OP.
cute: 'Cute',
Once that was done, inside the liststyle.js file I updated the existing code to this:
Existing code in liststyle.js file:
commit: function(element) {
var value = this.getValue();
if (value)
element.setStyle('list-style-type', value);
else
element.removeStyle('list-style-type');
}
New code:
commit: function(element) {
var value = this.getValue();
if (value) {
if (value == 'cute') {
element.setAttribute("class", 'cute');
element.removeStyle('list-style-type');
} else {
element.setStyle('list-style-type', value);
}
} else {
element.removeStyle('list-style-type');
}
}
I am dealing with CKEditor to add custom list styling to the liststyle plugin.
I added one new style (you can add more if you like) using the CSS class.
Here's how: in liststyle.js (after de-obfuscating) I insert my .logo class:
..........
function e(c,e){
c.lang.liststyle.logo="My bullet"; // BBoyanov - adding 'My bullet' as title in dropdown list (in current language), otherwise it stay "empty" title
var b=c.lang.liststyle;
........
style:"width:150px",
items:[[b.notset,""],[b.circle,"circle"],[b.disc,"disc"],[b.square,"square"],
[b.logo,"logo"]],//BBoyanov - css class 'logo' as Bullet \,[b.logo,"logo"]\
........
commit:function(a){
var b=this.getValue();b?a.setStyle("list-style-type",b):a.removeStyle("list-style-type");
"logo"==b?a.setAttribute("class",'logo'):a.removeAttribute("class");//BBoyanv set 'logo' as CSS class
........
h={a:"lower-alpha",A:"upper-alpha",i:"lower-roman",I:"upper-roman",
1:"decimal", disc:"disc", circle:"circle", square:"square",logo:"logo"};//BBoyanov \,logo:"logo"\
........
You define the CSS class in ckeditor.css (to be visualised in CKEditor) and in your own CSS file.
If you prefer different titles for different languages, you must put translation in the corresponding language .js file of CKEditor.
It worked for me.
However, probably this is injection because it takes over the allowedContent - need tests and confirmation.
I have this form and several divs in it. The matter is, that color of one div is set with javascript, randomly, and border of another div has to be in one color with first one. It gets even more complicated, because several divs have one class names.
Basically, what I mean here is that one house should be of one color, and "roof" depends on content, color of which is set randomly with js.
worked on this for quite a long time, but seem to have no solution(
I guess, javascript should look something like this
document.getElementByClassName("roof").style.border-bottom-color = document.getElementByClassName("contents").style.background-color;
my jfiddle with html and css
If you'd like to keep "Pure" JS, take a look on this approach:
document.getElementsByClassName("roof")[0].style.borderBottomColor =
getStyle(document.getElementsByClassName("contents")[0], 'backgroundColor');
function getStyle(el,styleProp)
{
if (el.currentStyle)
return el.currentStyle[styleProp];
return document.defaultView.getComputedStyle(el,null)[styleProp];
}
Please notice, that getElementsByClassName returns a set of elements which have all the given class names. To access all of them and fill in elements border with ramdom color i can advice you to go in loop throuth them like:
var yourElements = document.getElementsByClassName('className');
for(var i=0; i<yourElements.length; i++) {
yourElements[i].style.borderColor= "#RANDOM_COLOR";
}
Advanced technique is to use jQuery, and correct answer was given above by JustAnil.
Hope it helps. Cheers!
I'm writing a very conflated Android Unit Conversion application, using all kinds of terrible things to make it pretty. Essentially its executing JS via vebviews, and displaying html formatted according to arbitrary size lists in fancy spinners, with abbreviations underneath... blah blah...
Anyway. Right now I've got somthing like this:
for (l = 0; l < this.slotData.length; l += 1) {
out += '<li>' + this.slotData[l].values[i] + " "+'<li class="sw-right">'+this.slotData[l].abbreviations[i]+'</li></li>';
}
Where slotData[l] represents say "Milimeters" and abbreviations is "Mm", which is underneath, and formatted slightly differently. The idea is that you can enter numbers, and they will show up, underneath the Large Milimeters, next to the small Mm, so that you can see "4400mm".
I'm trying to access and modify the child li, of class "sw-right" at a different point in my code. Wondering if anyone knows an easy way to do this? I can access the parent without trouble, but I'm not sure what the proper way to go from there is...
My access is somthing like this:
this.slotEl[slot].......
Anythoughts?
Thanks guys...
Nathaniel.
You should not try to nest <li> elements. HTML syntax does not permit nesting list items. Since the </li> closing tag is optional, a browser might well just treat your nested item as a sibling of the first one anyway, and discard the second close tag as a double-close on the second item.
Addional: Since you are trying to compose a list item of two parts, maybe what you really want is a definition list. For setting attributes on ranges nested inside of tags, consider using span.
I suggest using jquery:
$('li.sw-right').html('html_you_want_set');
you could use
var myNestedLI = document.getElementsByClassName( 'sw-right' )[ 0 ]
or
var topElements = document.getElementsByTagName( 'li' );
var nestedElements = []
for( var i = 0; i < topElements.length; i ++ )
{
var theseElements = topElements[ i ].getElementsByTagName( 'li' )
for( var j = 0 ; j < theseElements.length; j ++ ) nestedElements.push( theseElements[ j ] )
}
// nestedElements now contains all nested LI elements
As Sparky pointed out, you can't nest <li> tags like that. The second li will be treated as a separate list item from the first, making them siblings. Instead what you want are two separate <div>s inside your <li>. Div is a generic block-level element. (Block-level means there's a line break between them, and generic means that the div's meaning and style is entirely up to you.)
I'd suggest this more descriptive markup:
<li class="calculated-value">
<div class="unit">*large unit name*</div>
<div class="value">*small value with abbreviation*</div>
</li>
In your CSS, the following rule will make the value div display smaller:
li.calculated-value div.value { font-size: 75%; }
(You can add additional rules to give it an indentation, better spacing, bold or color settings, etc. And you can add another line for div.unit that styles that one separately.)