I have some accordions from PrimeReact which I use in my code. But there are pictures inside and I want to make them smaller. This is the current problem:
As you can see, the picture is way too big. I want to set the width to 100%.
Now I did this already before when I used Angular with PrimeNG (same library, just for Angular) and I managed to this in the css file like:
:host ::ng-deep .p-accordion-content img {
width: 100%;
}
This code did exactly what I wanted.
Now I need the same for React. But it is not working when I use:
:host .p-accordion-content img {
width: 100%;
}
This is the code I used to create the accordions. Maybe it will help:
createAccordions = () => {
const allFAQs = this.state.allFAQs;
let accordions = [];
for (const faq of allFAQs) {
const accordion = <AccordionTab key={faq.uuid} header={faq.question}><div dangerouslySetInnerHTML={{ __html: faq.answer }}></div></AccordionTab>;
accordions.push(accordion);
}
return accordions;
}
render() {
return (
<div>
<div className="p-grid">
<div className="p-col-3">
</div>
<div className="p-col-6">
<Accordion>
{this.createAccordions()}
</Accordion>
</div>
<div className="p-col-3">
</div>
</div>
</div>
)
}
Does anyone know what I did wrong? How can I style the picture inside the accordionTab?
Thanks for every help!
this is easy you just need to do some experiments with your image dimensions for example...
add height along with width(this is used in CSS with pure html similar can be used in your code also)
:host .p-accordion-content img {
width: 100%;
height: auto;
}
thankyou
Related
I have this page like image below:
The filter has a dynamic width and is an external angular component
the table is inside the "parent" component
FYI:
The table component has a [height]="something" that accepts either string or number as parameters.
The table is a pivot table using a custom component called Dev-Extreme
All i want is to assign a value inside the [height]="" in the HTML component page that is dynamic so that the height of the table resizes based on how much space there is left in the page.
Could also use TypeScript to do that and maybe calculate the height each components takes in the page except the table and do calculations on that.
Can anyone help me here, i've been stuck on this for two hours.
You could use some css for what you need.
Use display: flex to distribute the sections as you need (top section fixed and bottom section with dynamic height).
And use overflow: auto to set the scroll in the table container only.
Example:
https://codepen.io/bcngr/pen/wvXdWBE
<div class="main">
<div class="filters-container">
<span>Filters</span>
</div>
<div class="table-container">
<div class="table">
<span>Table</span>
</div>
</div>
</div>
html, body {
padding: 0;
margin: 0;
}
.main {
height: 100vh;
display: flex;
flex-direction: column;
}
.filters-container {
background-color: #edf2f4;
height: 100px;
}
.table-container {
flex: 1;
overflow: auto;
}
.table {
background-image: linear-gradient(#8d99ae, #2b2d42);
height: 600px
}
I found a solution to this here's what i did:
Creating a #ViewChild() to gather the div element in my .ts:
#ViewChild('pivotFilter', { static: false }) stickyHeader?: ElementRef;
Here:
The div has an id="pivotFilter"
Using ViewChild we can get the HTML element
Declaring getter to calculate table height:
get filterHeight() { return window.innerHeight - (this.stickyHeader?.nativeElement.offsetHeight + 88); }
Here:
window.innerHeight is the height of the page
this.stickyHeader?.nativeElement.offsetHeight is the height of my component
That + 88 is the rest of the page height (the title, and the space between filter and table)
I had to run change detection on content initialization to prevent errors like so:
ngAfterContentInit(): void {
this.cd.detectChanges();
}
Then i just applied the height to the html page.
Hope this helps someone, cheers !
I'm trying to use multiple languages in my nextjs project and MUI library, and I m setting my body element of my project direction using locale.
const App = (props: MyAppProps) => {
const {
Component,
emotionCache = clientSideEmotionCache,
pageProps,
} = props;
const router = useRouter()
const { locale } = router;
return (
<CacheProvider value={emotionCache}>
<ThemeProvider theme={getTheme(theme)}>
<CssBaseline />
<GlobalStyles styles={{
body:{
backgroundColor:getTheme(theme).palette.Background.background,
direction:locale==="fa"?"rtl":"ltr"
}
}}/>
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
};
and that works fine with the text-align property
but I have a problem with positioning my elements because there are right, left, bottom, top properties in positioning, and there isn't a start and end property. for example:
width:50px;
height:50px
position: relative;
left:2px
my element with the position above, I want to position 2px from left in RTL directional language like Persian but I want to position it 2px from right in LTR directional language such as the English Language. it is usually done with start and end properties but in css i dont know because there isnt sutch a thing in position property.so my question is how can I position the elements base of start and end?
I am unable to understand your code, But question is related to CSS that's why I am providing you some idea.
Let's you have a element <div id="element" class="{{ direction:locale==='fa'?'rtl':'ltr' }}">Your contents</div>
Now, put this css in your style page->
#element.rtl {
left: 2px;
}
#element.ltr {
right: 2px;
}
Hope this will help you. If not, comment here.
display Put your element in flex mode and use the justify-content, ... capabilities.
go to
enter link description here
You have to set position relative to div element and lest or right position to nested div element.
Structure your HTML similar to this:
<div id="container">
<div class="top left"></div>
<div class="top right"></div>
</div>
CSS
#container {
position: relative;
}
#container > * {
position: absolute;
}
.left {
left: 2px;
}
.right {
right: 2px;
}
I'm trying to create with React.js a type of scroll like this one: http://spassky-fischer.fr/, where two divs are scrolling in inverse directions. They are using transform: translateY(), and I tried to implement it as well but I don't get where I'm wrong here. Here's the architecture of the projet. The current version is also here: http://noiseless-tendency.surge.sh/
App.js:
ComponentDidMount(){
window.addEventListener("scroll", this.scrollHandler);
}
...
scrollHandler = () => {
this.setState({
scrollPositionY: window.scrollY
})
}
...
render() {
return (
<div className="App">
<MainItemsContainer {...this.state} />
</div>
);
}
MainItemsContainer.js:
render() {
let style_first = {
transform: `translateY(${this.props.scrollPositionY})`,
overflow: "hidden"
}
let style_second = {
transform: `translateY(-${this.props.scrollPositionY})`,
overflow: "hidden"
}
return (
<div className="main_items_container">
<section
style={style_first}
className="main_items_container_child">
<ItemsContainer {...this.props}/>
</section>
<section
style={style_second}
className="main_items_container_child">
<ItemsContainer {...this.props}/>
</section>
</div>
);
}
App.css:
.main_items_container {
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
}
.main_items_container .main_items_container_child{
width: 50%;
height: 100vh;
overflow: scroll;
}
The sample site you linked actually uses the wheel event rather than the scroll event. It looks like they use this library to accomplish it: https://swiperjs.com/demos/ . My understanding is that the scroll event only fires if there's a scrollbar, which is why your event handler didn't fire.
I've created a Code Sandbox that produces the effect you want in React. It does rely on jQuery to compute the height of the whole element, and to set the initial transformation for the left half. However, those are just convenience methods, and if you don't want jQuery as a dependency, you can find workarounds for those pretty easily.
So you could use hooks and pass a custom css var through inline styling on state change to update your translateY. I have not tested but I hope you get my drift.
let elRef = useRef(null)
let[ height, setHeight] = useState()
use useLayoutEffect hook to add the event listener
useLayoutEffect (()=>{
if(!elRef) return
elRef.current.addEventListener("scroll", setHeight(elRef.current.scrollY));
return elRef.current.removeEventListener("scroll", setHeight());
}, )
and put the ref on you outermost div perhaps , so your outer div would look like
<div className='container' ref={elRef} style{{ --height: height}} >
<div className='columOne' > </div>
<div className='columTwo' > </div>
</div>
in your css (I haven't put all that is required but just showing how you custom css var is used
.container{
display: flex;
flex-direction: row
}
And within that equal sized columns
.columnOne{
transform: `translateY(calc(var(--height) * 1px)`,
overflow: "hidden"
}
.columnTwo{
transform: `translateY(-calc(var(--height) * 1px)`,
overflow: "hidden"
}
Does that help. Let me know if I could be more clear. Or use styled components and pass a prop in to achieve the same result.
I'm injecting html in my react component using dangerouslySetInnerHTML in a format like this :
<div
className="mt-2 col variant-attr-cell p-0"
dangerouslySetInnerHTML = { {
__html: JSON.parse(attrs[i].snippet).snippet.replace("{text}",
attrs[i].choices[j].visualization_data)
} }
>
</div>
and it works fine but I'm trying to pass style to the injected html at the same time but don't know how!
I'm trying to add different styles to the injected html based on the api I get, something like this:
height: 12px;
width: 12px;
border-radius: 50%;
display: inline-block;
margin: 0 4px;
FYI the injected html is something like this mostly:
<span></span>
and the styles must be added to this and not the container div!
Any solution is appreciated,
thanks.
You can still add the desired style. Just add another props style:
const styleObj = {
color: 'white',
backgroundColor: 'red'
};
<div
className="mt-2 col variant-attr-cell p-0"
dangerouslySetInnerHTML = {
{ __html: JSON.parse(attrs[i].snippet).snippet
.replace("{text}", attrs[i].choices[j].visualization_data)
}
}
style={styleObj}
>
</div>
If you're trying to add style inside the element that resides in the html, then you should have their styles there in the html itself.
I managed to do this by adding a ref to the container and using the useLayoutEffect hook.
const elRef = useRef();
useLayoutEffect(()=>{
if (elRef.current){
elRef.current.firstElementChild.style.height = '12px';
// set other style attributes
...
}
});
return <div
ref={elRef}
dangerouslySetInnerHTML={yourHTML}
/>
This assumes you only want to style the first child of your container, but you could use a similar approach for multiple children.
Since I get the HTML from API, I set the style attribute for the HTML with a static value in the database and replaced the static value from API in my component!
You can easily style element in dangerousHTML like this style='background-color:red' instead style={{backgroundColor:'red'}}
I am including angular-bootstrap-toggle in my library for toggling. I am also setting the on and off values. But the labels are overflowing, and is overlapped by the toggle button - Image 1, and Image 2. I want to set my own style. According to the documentation online on angular-bootstrap-toggle, we can just add style attribute. I tried that, but am getting an error saying ': expected' as shown here:
<div>
<toggle ng-model="selectedTicket" ng-change="toggleTicket()" on="Ticket" off="Image" style="ami"></toggle>
</div>
Style is defined in my index.html file under after including all the css files as:
<style>
.toggle.ami {
width: 80px;
}
.toggle.ami .toggle-handle{
width: 80px;
}
</style>
I would appreciate any suggestions to help me overcome this problem.
It should work if you change "style" to "class" in your HTML:
<div>
<toggle ng-model="selectedTicket" ng-change="toggleTicket()" on="Ticket" off="Image" class="ami"></toggle>
</div>
You will also need to remove the . from your .toggle CSS selector because toggle isn't a class:
<style>
toggle.ami {
width: 80px;
}
toggle.ami .toggle-handle{
width: 80px;
}
</style>