In CodeMirror lang-css extension, there isn't any tag specific for different CSS selectors: Tag Selector, Universal Selector, Attribute Selector, ID Selector. In all of those cases, prefix is identified as an operator, while class/id/tag name is a qualifier/string/keyword.
Is there any way to make the same color for an operator and a name following it? So "#id" would be green, instead of "#" being white, while only "id" is green.
Or even better, is it possible to style individual selectors in CSS?
Related
I'm trying to dynamically change the color of Ionic's Ion-Toggle and Ion-Checkbox at runtime. I know I can change it to a pre-defined sass variable like this:
<ion-toggle [color]="somePredefinedColor"></ion-toggle>
where "somePredefindedColor" is the string of the predefined sass variable...but because there is a section in my app that adapts to the corporate design colors of a company (which it gets from server as hex-strings) this is not possible.
The closest I got was to query the document by the component's class ".toggle-icon" and set its background color. This works at the first load but as soon as the page is loaded again it falls back to the sass predefined colors...
Have you tried this:
<ion-toggle [style.color]="colorVariable"></ion-toggle>
Where colorVariable is a variable in your component in .ts file, which you can change it dynamically:
if (this.redCondition)
this.colorVariable = 'red';
else
this.colorVariale = 'black';
Alternatively, you can define two CSS classes in your SCSS file, call it red-toggle, and black-toggle. Then you can:
<ion-toggle [class.red-toggle]="redCondition" [class.black-toggle]="!redCondition"></ion-toggle>
These methods are called style and class binding respectively.
If you want to dynamically change a value in your css style, you can use ngStyle directive:
[ngStyle]="{ 'background-color': hexColorString}"
EDIT:
The problem is that ion-toggle after transpile will have two child nodes, and you want to change the style of those child nodes dynamically. These nodes are toggle-icon, and toggle-inner:
This is not the cleanest way of doing it, but you can use the following typescript code, and modify it so that the colors change dynamically:
var div1 = document.getElementById('mytoggle').getElementsByTagName('div');
if(div1[0]){
div1[0].style.backgroundColor = '#0F0';
var div2 = div1[0].getElementsByTagName('div');
if(div2[0])
div2[0].style.backgroundColor = '#00F';
}
Notice that you have to set "mytoggle" as the id of the ion-toggle element in your html file.
Disclaimer: This code is rather hacky and may not work correctly with future versions of Ionic!
You just need to add square brackets on the dynamic attribute that is receiving the variable.
<ion-toggle [color]="somePredefinedColor"></ion-toggle>
Predefined colors can be setup in the theme/variables.scss file under $colors
$colors: (
primary:#48B0F7,
secondary:#10CFBD,
....
somePredefinedColor:#000
)
Which can then be added to the [color] attribute
<ion-toggle [color]="somePredefinedColor"></ion-toggle>
I am using ZK framework. I have a static line of text in a label:
<label
value="If you have already submitted a leave application or need to modify
an existing leave, do not submit an online application. " />
I need to underline only some parts of this sentence. I've tried putting <u> </u> around the text I wish to underline, but this is not allowed in ZK.
I've also tried creating separate labels, with style="text-decoration: underline;" which does underline the specified text. However this way of underlining makes each label display on it's own line.
Is there some way that I can underline only certain parts of my label?
There is no way you could append style to certain parts of a label.
Like #Link already commented you could use multiple labels and set the sclass different of each label.
If you have real HTML in your text, you could use the following :
HtmlNativeComponent n = new HtmlNativeComponent("html", "<h2>title</h2>","<p>your text</p>");
Explication of constructor :
"html" => the element where all your text is between. (wrapper element)
"<h2>title</h2>" => the first part. If you append more children to the native component, its after this they will come.
"<p>your text</p>" => the second part. If you append more children to the native component, its before this they will come.
By default TinyMCE (4) has a "Paragraph ▼" dropdown, and if you click on it you get a list of formatting options ("Paragraph", "Heading 1", etc.).
I'd like to be able to do two things. First, I want to change the options and their names (eg. to "Normal" and "Heading"), and I found the block_formats option which does exactly that:
block_formats: 'Normal=p;Heading=h1'
However, I'm stuck on thing #2: adding classes to the generated elements. Instead of plain <h1> elements, when someone picks "Heading" I want to generate a <h1 class="heading">.
I thought maybe this would work:
block_formats: 'Normal=p;Heading=h1.heading'
... but it doesn't, and I haven't been able to find any other option that would let me do this. Then again, the TinyMCE documentation isn't always the easiest place to find answers, which is why I came here.
Does anyone know how I configure TinyMCE to have a "Paragraph ▼" dropdown with customized names AND custom classes on the generated elements?
I never did find a way to do this, so what I wound up doing instead was remove the block format drop-down entirely and replace it with the (custom) format dropdown. In other words I:
removed the formatselect from the toolbar1 config (removing the un-configurable normal formatting dropdown)
added the custom format dropdown (styleselect) to the toolbar1 config
defined a style_formats config entry with my custom styles
The style_formats config looked like this:
style_formats: [
{
title: 'Header',
inline: 'span',
classes: 'someClass',
styles: {someStyle: '5px'}
},
], // next style would go here
There were only two downsides of this approach. First, the dropdown now says "Formats", and I don't seem to be able to configure that anywhere. However I do have a single formatting dropdown, with only the options I want, and those options add the desired classes to the formatted text, so the dropdown's name isn't a big deal.
The second issue was that TinyMCE uses an <iframe>, which prevents it from using our stylesheet. I could have written a stylesheet for TinyMCE and then appended it to the <iframe> (or used some TinyMCE mechanism, if there is one) ... but I'm lazy so I just used style: entries for each custom format to define the style.
I'm know how to add custom decorators and use view helpers to set decorators for named elements.
Is their a method or an attribute that would allow me to set a default decorator for all textareas or for all text inputs or all selects?
Thank you
yes you can override default zend decorator for your html object like textarea or text box
here is good example to create our own decomrator Link
I have a strongly typed partial view CheckBox.ascx that renders a checkbox. This is used by another partial view that renders a list of checkboxes using CheckBox.ascx.
I am having problems figuring out how to use the Html.Label helper method to get labels working correctly, i.e. setting the label for property to be the id of the related checkbox.
My view markup for the checkbox looks like this:
(I'm using non-sequential list binding as described under Non-Sequential Indices)
<%= Html.CheckBox(string.Format("checkBoxes[{0}].Checked", Model.Id), Model.Checked)%>
The complexity here is that my checkbox ID will be mangled - [, ], . characters replaced with _.
Can the Html.Label helper method help me here?
My solution was to manually code the label element...
<label for="<%= string.Format("checkBoxes_{0}__Checked", Model.Id)%>"><%= Html.Encode(Model.Label)%></label>
(noting that the ., [ and ] characters in the checkbox name get rendered as underscores)