How would i use css to style this array? my css that I am using right now is not working, I am using a separate style sheet.
enter image description here
I'm assuming, you want to stylize not the array but the html list of items, which you are creating using the array.
You can do it (stylisation) just adding to your css file next rule
li {
// your css properties go here
}
If you have more than one list on the page and you want add some styles only for this list, you can add some class name to the list you are creating by this php code. To do so you can change the code inside foreach statment:
foreach () {
print "<li class='my-list'>";
...
}
Then you might add to css next rule wich will apply only to this specific list
li.my-list {
// your css properties go here
}
Related
Is there a way to add a css class name to empty paragraphs in ckeditor so I can target them with css?
Empty paragraphs in ckeditor are not really empty because they contain a br tag so I can not use :empty to target them.
From what I can see, the good thing is that those <br> inside empty paragraphs have an attribute which makes them easy to target.
In the future, you might use a pure CSS solution like this one.
p:has(> br[data-cke-filler="true"]) {
/* styles here */
}
For now, you either have to style the directly.
Depending on what you're trying to accomplish, maybe applying css to the <br> would suffice.
br[data-cke-filler="true"] {
/* styles here */
}
And if you are able to run javascript in ckeditor. This can easely be done today.
Examples : with jQuery
$( "p:has(br[data-cke-filler="true"])" ).addClass( "MyEmptyParagraphsClass" );
or
$( "br[data-cke-filler="true"]" ).parent().addClass( "MyEmptyParagraphsClass" );
Example : with Native Javascript
var brs = Document.querySelectorAll("br[data-cke-filler="true"]");
brs.forEach(function(br) {
br.classList.add("MyEmptyParagraphsClass");
});
In CKEditor 4, you can have a configuration file.
And you can add the custom config with the options here.
In your case, you might need these options :
config.ignoreEmptyParagraph = false;
config.fillEmptyBlocks = false; // Prevent filler nodes in all empty blocks.
Meanwhile in CKEditor 5, you can try these documentations about Block Widget :
Adding a css class to block elements
Inline and block content
Below is the dom structure of the page :
I have tried
button:contains("srave")
I also tried
button[innerText="srave"]
button[text="srave"]`
button[innerHtml="srave"]`
none of them work.
Need way to get elements when element attribute is not defined.
PS: textContent() return srave as outcome.
Edit:
I have many such button elements on the page. I know I can iterate through all of them and check text. But I want to get web element directly based on the text it contains to reduce the execution time
Did you try: button[class='k-button k-button-icontext'] or button[dir='ltr'] I don't think the cssSelectors you were attempting in your example are correct because you pluralized button. If neither of these work, it may be that there are more than one button on the page with the same selector. In which case it might be better to use xpath or you could get a list of all the elements with the same selector and then get whichever one from that list you created and click it.
No, you can't use CSS Selector. You can use XPath.
//button[text()='srave']
Or
//button[contains(text(),'srave')]
You can use jquery for get the same because css is not select the text.
Working fiddle
fiddle link
Try this
alert($('button').find('span').html());
You can use following css to get the button name with "srave".
HTML
<button data-name="srave">
<span>Brave</span>
</button>
css
button[data-name="srave"] {
background:tomato;
}
To add to danidangerbear here is a java method that will do what you want:
public String getElementText(String elementText){
List<WebElement> elements = driver.findElements(By.cssSelector("button"));
String elementText = null;
for(WebElement element : elements)
if(element.getText().equals(actualValue)){
elementText = element.getText();
break;
} else {
elementText = "element text does not exist";
continue;
}
return elementText;
}
I am trying to add CSS when clicked on row or column of table, Following is code
private rowClicked(event: Event): void {
event.srcElement.setAttribute("class", "highlighted");
}
But it's not working as accepted. Am I doing in wrong way, Is there any alternate way to add CSS dynamically?
Note-
Is there any way to add CSS using dom element, my table has thousands of data and to create this table, I have used MetaWidget.
The easiest way to your problem is to assign a unique ID to each included element together with employing another variable to hold selected ID. The logic to turn on my-class CSS class will now be based on the selected ID.
Your new HTML template:
<div (click)="rowClicked(1);" [ngClass]="{'my-class': highlightedDiv === 1}">
> I'm a div that gets styled on click
</div>
Your rowClicked function:
highlightedDiv: number;
rowClicked(newValue: number) {
if (this.highlightedDiv === newValue) {
this.highlightedDiv = 0;
}
else {
this.highlightedDiv = newValue;
}
}
A working demo is here.
More can be found here.
You are using MetaWidget, but you are not mentioning what version you are using.
If you want work with Angular2 and MetaWidget, you should have use a compatible version of MetaWidget, which can be found here-
https://github.com/AmitsBizruntime/MetawidetA2
Using this library will be the best solution for you.
Re-
Angular does not work based on DOM, it works based on Component.
If you like to work on DOM, then you should include jQuery in tour angular project from here-
How to use jQuery with Angular2?
But it is not a good practice.
For example, you can change the ink colour in paper-tabs by changing --paper-tab-ink: var(--accent-color);. Is it possible to change the value of the CSS custom properties dynamically similar to how you can toggle a class or change the style in JS?
There are different ways to do this, but a simple answer is to use the Polymer.updateStyles() method after making your class changes.
For example, let's say your styles are:
<style>
.yellow x-example {
--light-primary-color: #fdd85f;
}
.red x-example {
--light-primary-color: red;
}
</style>
and you want to make the component use the styles in the .red class. You simply add it as you normally would in javascript, then be sure to also use this function to actually update it on the page.
<div class="yellow" onclick="this.className='red'; Polymer.updateStyles()">
<x-example></x-example>
</div>
Yes, first get the object of your custom element. Then get the customStyle object. Add a style to that object. And then run element.updateStyles();
t.clickListener= function(e) {
var t = Polymer.dom(e).localTarget; //retarget if needed
t.customStyle['--the-color-etc'] = 'pink';
t.updateStyles(); // mandatory for the CSS variables shim
};
See the docs
I'm creating a span in my web page with dojo.create, and need to apply CSS to it. I can see how to apply a style to it in the dojo reference, but I'd rather apply it via the external stylesheet (there's quite a few attributes I need to set and I'd rather not do it inline).
So given the example code below, how would I apply the CSS for the printSpan class?
var node = dojo.create("span", {innerHTML:_text, id:"printSpan", class:"printSpan"}, map);
You can write this in your external stylesheet:
.printSpan { color: red; }
This is called the class selector.
By the way, your code should be:
{ innerHTML : _text, id : "printSpan", "class" : "printSpan" }
Notice the colon was inside the "class" string, though it should be outside and printSpan is a different string.