I have html stored in the database and I want to render it on my react page and for that I used
import low from "../css/low.module.css";
<div dangerouslySetInnerHTML={{__html: data}}/>
and this works perfectly. I am also using css modules and I want this html (from database) to detect the css.
I can not use cssFileName.className as it is stored in the database.
For example
data = <div class="news_page_detail">
<p class="news_page_detail">My Para1<br class="Pc_only">My Para2</p>
<p class="news_page_detail">My Para3</p>
<p class="news_page_detail">My Para4
</p>
<a href="/someLink" class="btn-pink-b ovbg ">
<div class="btn-inner">
<div class="ovbg_pink"></div>
<span class="btn-pink-b-txt">My span1</span>
</div>
</a>
Is there any solution so that I apply the css modules here. I dont want to import the css as conventional way because they are interfering with the other css.
Please help.
You can try the html-react-parser library. I have used it and I can style inline my content.
import parse from 'html-react-parser'
<div
style={{ color: 'black' }}
>
{parse(item?.content)}
</div>
Related
I'm using styled-jss in my app. During development it compiles my components to ugly classnames and I see this in my Web Inspector
<div class="div-2-0-1-1">
<div class="div-3-0-1-2">
<div class="div-4-0-1-4">
<div class="div-5-0-1-5"></div>
<div class="div-6-0-1-6"><textarea class="textarea-7-0-1-7"></textarea></div>
<div class="">
<div class=""><input class="input-8-0-1-8"><input class="input-9-0-1-9"></div>
</div>
</div>
</div>
</div>
I'd rather want to see component names in my classnames. I've set mode: 'development' in my webpack.config.js but this didn't help. Is there something I can do about it?
Automated way to do that would require to build a babel plugin that would take the variable/identifier name and pass it to the styled function and later use it as part of the className. This doesn't exist yet and we are working on a new version here if you want to follow https://github.com/cssinjs/jss/pull/1094
I am attempting a dynamic form generator based on Angular's Dynamic Forms template using Angular 7 and I'm running into a css issue. I am using Bootstrap 4.0 and I hope it's not an issue where I need to go back to 3.0 (I had a prior issue that involved that, but correct re-coding got it to work in 4.0). If so, please let me know.
Now, here is the way that my app works correctly for my end product. My code to generate the drop downs is:
<div class="row">
<div *ngFor="let question of questions" class="col-md-6 form-group">
<label for="{{question.key}}">{{question.label}}</label>
<span [ngSwitch]="question.controlType">
<select *ngSwitchCase="'dropdown'"
[id]="question.key"
[formControlName]="question.key"
[className]="question.fieldClass">
<option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
</select>
</span>
<span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>
</div>
</div>
When this gets rendered to the screen, the drop downs are aligned correctly, with the correct widths, as you can see:
Now, if I follow Angular's method, my main code block will now become:
<div class="row">
<app-question *ngFor="let question of questions" [question]="question" [form]="form"></app-question>
</div>
And my app-question component has the following code:
<div [formGroup]="form">
<div class="col-{{question.colType}}-{{question.colWidth}} form-group">
<label for="{{question.key}}">{{question.label}}</label>
<span [ngSwitch]="question.controlType">
<select *ngSwitchCase="'dropdown'"
[id]="question.key"
[formControlName]="question.key"
[className]="question.fieldClass"
>
<option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
</select>
</span>
<span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>
</div>
</div>
When the form renders to the screen it looks like this:
As you can see, the column widths are gone. I'm certain it has something to do with the div tag holding the FormGroup attribute, but that is required for the component to compile and work. I've tried adding it with a span tag, adding the col-md-6 class to the same tag as FormGroup, but I get the same, incorrect CSS rendering.
Is this another Bootstrap 4 issue where I may need to go down to Bootstrap 3 for this to work? If not, what is going on and how can I get the page to correctly render like the first image and yet still be able to use the app-question component in my code?
I believe that the problem is that Angular renders app-question component as a tag <app-question></app-question> and your div tags inside of it have styles relative to that app-question tag, but not the parent <div class="row">. So if you add a class col-md-6(for example) it will cover 50% of the app-question tag, but not the row one.
So if you want the styles to work, you should add the classes here
<div class="row">
<app-question *ngFor="let question of questions"
[question]="question"
[form]="form"
class="col-md-6">
</app-question>
</div>
As an alternative, you can change your app-question component decorator to make it an attribute.
#Component({
selector: '[app-question]'
})
And then use it to any tag you like
<div class="row">
<div app-question
*ngFor="let question of questions"
[question]="question"
[form]="form"
class="col-md-6">
</app-question>
</div>
So I am trying to understand the BEM naming structure. So lets say I have the following html
<div class="banner">
<div class="banner__toprow">
<span class="banner__teamName">
{{team.name}}
</span>
<span class="banner__score">
{{team.score}}
</span>
</div>
<div class="banner__timeouts">
{{team.timeOuts}}
</div>
</div>
Now where I get confused is when you have nested divs, how that works. For example for banner__teamName, I would usually do banner__toprow__teamName. Now maybe I can do this, but does this break BEM?
From the BEM's FAQ
What would be a class name for an element inside another element? .block__el1__el2?
According to BEM method, block structure should be flattened; you do
not need to reflect nested DOM structure of the block. So, the class
names for this case would be:
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
Whereas the DOM representation of the block may be nested:
<div class='block'>
<div class='block__elem1'>
<div class='block__elem2'>
<div class='block__elem3'></div>
</div>
</div>
Besides the fact that the classes look much nicer, it makes the elements be dependent on the block only. So, you can easily move them across the block when providing changes to the interface. The changes of the block DOM structure would not need corresponding changes to the CSS code.
<div class='block'>
<div class='block__elem1'>
<div class='block__elem2'></div>
</div>
<div class='block__elem3'></div>
I would suggest doing it like this:
<div class="banner">
<div class="banner__toprow">
<span class="banner__toprow-teamname">
{{team.name}}
</span>
<span class="banner__score">
{{team.score}}
</span>
</div>
<div class="banner__timeouts">
{{team.timeOuts}}
</div>
</div>
I don't believe it is correct to have two Elements (__) of Modifiers (--). I also try not to use camel case in my classes, that might be a personal preference but I feel it could cause problems with certain frameworks like Angular.
I'm using multiple window on the same page and i want to apply
different styles on which window. I try to write a wrapper over the
window so it can be identified in the css by id but that does not work.
This is the source:
<div class="wrapper">
<div kendo-window="InitialisingApp">
</div>
</div>
This is the result:
<div class="wrapper"></div>
<div class="k-widget k-window....">
..........................
</div>
Any ideas about this problem?
Thank you! Have a nice day!
You can take a look at this:
Limit scope of external css to only a specific element?
Only other option that I see is to copy the theme and add a css selector in front of everything so that the theme only apply when wrapped with a specific class. Also keep in mind the CSS priorities to make sure the blue style gets applied over the default style.
Example:
<style>
.blueStyleWrapper .k-window {
/* Some kendo styles */
}
</style>
<div class="blueStyleWrapper">
<div class="k-window">
This window will be using the blue theme!
</div>
</div>
i want to fill text in selenium firefox broswer
how to find entering text selector its very complex for me please explain me the only way i want to achieve this using only css selector
<div class="Gb WK">
<div class="Rd"guidedhelpid="sharebox_editor">
<div class="eg">
<div class="yw oo"">
<div class="yw vk"">
</div>
<div class="URaP8 Kf Pf b-K b-K-Xb">
<div id="195" class="pq"
Share what's new...
</div>
<div id=":37.f" class="df b-K b-K-Xb URaP8 editable" contenteditable="true"
g_editable="true"role="textbox"aria-labelledby="195"></div>
</div>
</div>
</div>
</div>
You already wrote the cssSelector. However I will explain this for you. CssSelector allows you to use single/multiple attribute search. In case if you don't find a single attribute unique you can keep adding more attribute to the selector
Single attribute
[role='textbox']
Multiple attributes
[role='textbox'][contenteditable='true']
If you want to add div for a faster search that's possible too
div[role='textbox'][contenteditable='true']
Notice if I don't add div it's going to be tag independent search