I'm trying to dynamically change the style of an undeclared div. I'm using Angular and PrimeNG, and it's creating divs that I'm having trouble accessing through inline styles. The goal is to have a user input a width as a string (500px, 30rem, etc) and that width be text interpolated into those invisible divs.
Here is my HTML
<p-card>
<div class="wrapper">
<div class="percent basin-color-info">
<h2>{{ percentage }}%</h2>
</div>
<div class="info">
<h4>Percentage of time when outstanding risks are received</h4>
</div>
<div class="break"><hr /></div>
<div class="days">
<h5>{{ days }} Days</h5>
</div>
<div class="text"><h4>on average to correct outstanding risks</h4></div>
</div>
</p-card>
If I use inspector, it shows the following layout:
<p-card> (This is in the HTML)
<div class="p-card"> (This is **not** in the HTML)
<div> (This is **not** in the HTML)
<div> (This is **not** in the HTML)
<div class="wrapper"> (This is in the HTML)
...
</div>
</div>
</div>
</div>
</p-card>
I know that if I change the width of the first undeclared div with the p-card class in the inspector, the card changes how I'd like it to.
My hope is that I can use text interpolation {{ 500px }} or some sort of CSS injection to change the style of the undeclared divs, or some other workaround..
The p-card element from primeNG documentation says inline styles are an acceptable attribute but for some reason it doesn't change.
Hello Vincent Thomason,
From what I Understood, you are trying to style the div that is nested inside the p-card, that you don't have access to in your component HTML.
The only solution that I see is to give your p-card an id. Then use that id in querySelector and select the div inside ('myCardId>.p-card').
Here is a working stackblitz with what you want to accomplish:
https://stackblitz.com/edit/angular-ivy-nxjpwe?file=src/app/app.component.ts
Related
I have seen this answer but it answers for jquery and not angular/typescript.
My question is similar to this question, but my question is seeking a solution for angular.
How can I remove wrapper (parent element) without removing the child in Angular using typescript or scss? (If it is possible by both kindly show both methods).
For example how to programatically manupulate the dom below from
<div class="wrapper">
<span>This is It!</span>
</div>
<div class="button">Remove wrapper</div>
to: (After clicking on the button I would like to have the dom iook like below)
<span>This is It!</span>
<div class="button">Remove wrapper</div>
EDIT:
Kindly also show how to set it so that it can add the wrapper div back when I click the button again. Basically toggling the wrapper div.
I think you can simulate using ng-template and two divs, some like
<div *ngIf="toogle" class="wrapper">
<ng-content *ngTemplateOutlet="template"></ng-content>
</div>
<ng-content *ngTemplateOutlet="!toogle?template:null"></ng-content>
<ng-template #template>
<hello name="{{ name }}"></hello>
</ng-template>
<button (click)="toogle=!toogle">toogle</button>
See a example in stackblitz
I am building a page preloader with ReactJS. The Codepen snippet I am using is written in HTML and I need help converting it into HTML ready for React.
Part of the snippet
<div class="socket">
<div class="gel center-gel">
<div class="hex-brick h1"></div>
<div class="hex-brick h2"></div>
<div class="hex-brick h3"></div>
</div>
</div>
Conversion to React
<div className={s.socket}>
<div className={s.gel s.center-gel}>
<div className={s.hex_brick s.h1}></div>
<div className={s.hex_brick s.h2}></div>
<div className={s.hex_brick s.h3}></div>
</div>
</div>
So I have replaced hyphens with underscores, used curly brackets instead of quotes, and added Name to the class. However, I don't know how to add the second div modifier (for example in div gel there is element center-gel). When a second element is added to a React div, it fails to compile.
React does not allow these second div elements. After testing, my loading animation does not look correct if I separate out the elements, the structure needs to stay the same.
Snippet Used
When you write JSX code in React you are actually writing JavaScript code. Let's say you put those expression into a variable like so:
var styles = s.gel s.center-gel;
It just doesn't make any sense in JS. You need to write a valid expression like this:
var styles = [s.gel, s['center-gel']].join(' ');
Keeping that in mind, your code should work this way:
<div className={s.socket}>
<div className={[s.gel, s['center-gel']].join(' ')}>
<div className={[s.hex_brick, s.h1].join(' ')}></div>
<div className={[s.hex_brick, s.h2].join(' ')}></div>
<div className={[s.hex_brick, s.h3].join(' ')}></div>
</div>
</div>
I need an XPath expressions for the following HTML fragment (DOM structure)
<div class="content">
<div class="product-compare-row">
<div class="spec-title half-size">Model</div>
<div class="spec-values half-size">
<span class="spec-value">kast</span>
</div>
</div>
So I need the kast value if the spec-title div contains Model.
I've tried //div[preceding-sibling::div[contains(.,"Model)")]] but that doesn't work.
The XPath you are looking for is:
//div[contains(#class, "spec-title") and contains(text(), "Model")]/following-sibling::div/span/text()
It is a little bit tricky to follow, but in plain English:
Select all div elements who have a class spec-title and who have text that contains 'Model'.
Find any of this div's following siblings if they are a div.
Traverse to any of their children which are a span and return their text.
I have the following HTML snippet:
<div id="result-1">
<div class="page">
<div class="collapsingblock">
<h4>Click Me</h4>
</div>
<div class="collapsingblock collapsed">
<h4>No, Click Me</h4>
</div>
</div>
</div>
What I'm trying to do, is to find the second collapsingblock and it's h4
I have the following:
(//div[#id="result-1"]/div[#class="page"]/div[#class="collapsingblock"])[2]/h4
My xPath doesn't return the element. If I replace it with [1] it finds the first instance of collapsingblock though
Any ideas?
Thanks
UPDATE:
I have just noticed, that the HTML is using JavaScript to add/remove an additional class to the second collapsingblock, which collapsed
The problem is that the value of the class attribute of the second inner div element is not equal to "collapsingblock", as you can see:
<div class="collapsingblock collapsed">
<h4>No, Click Me</h4>
</div>
Even though class has very clear-cut semantics in HTML, it does not mean anything special to XPath, it's an attribute like any other.
Use contains() to avoid this problem:
(//div[#id="result-1"]/div[#class="page"]/div[contains(#class,"collapsingblock")])[2]/h4
Then, the only result of the expression above is
<h4>No, Click Me</h4>
By the way, parentheses around the lefthand part of the expression are not necessary in this case:
//div[#id="result-1"]/div[#class="page"]/div[contains(#class,"collapsingblock")][2]/h4
will do exactly the same, given this particular input document.
the parenthesis is necessary because of priority :
(//div[#id="result-1"]/div[#class="page"]/div[#class="collapsingblock"])[2]/h4
My module position in my Joomla template is just a div with a "row" class. When I add content to that module position using the custom html module and give it module class suffixes of "first", "mod-light" and "bord-left"it appears to nest 2 divs within my module position both with the same classes which is causing problems. How do I modify this so that it is not creating this nested structure or at least does not apply these classes to the inner div?
For example, if I simply entered this raw html into the editor...
"<p>...entered content appears here...</p>"
I would get this output from Joomla...
<div class="moduletable first mod-light bord-left span4">
<div class="custom first mod-light bord-left">
<p>...entered content appears here...</p>
</div>
</div>
How can I make Joomla do this instead...
<div class="moduletable first mod-light bord-left span4">
<p>...entered content appears here...</p>
</div>
You can use custom module chrome to create your own module layouts:
http://docs.joomla.org/Applying_custom_module_chrome