I can't find how to give a class to innermost div in react-window. In my case a have a flex wrapper containing list of data divs. But because react-window's innermost div separates my wrapper and list items I cannot properly align my list items. Is there a workaround either to access to innermost div and change it's class or directly to manipulate it's style.
Here is what react-window produces me as html.
<div style="position: relative; height: 600px; width: 100%; overflow: auto; will-change: transform; direction: ltr;">
<div style="height: 31900px; width: 100%;"> // ***here is where I want to style or give a class because there should be a flex wrapper here***
<div id="0" class="card product-card"><a class="product-title" href="/">
</div>
<div id="1" class="card product-card"><a class="product-title" href="/">
</div>
<div id="2" class="card product-card"><a class="product-title" href="/">
</div>
<div id="3" class="card product-card"><a class="product-title" href="/">
</div>
</div>
Thanks!
You can customize inner element and rows of each element
const Row = ({ index, style }) => (
<div
className={index % 2 === 0 ? "RowEven" : "RowOdd"}
style={{
...style,
top: `${parseFloat(style.top) + PADDING_SIZE}px`
}}
>
item {index}
</div>
);
const Example = () => (
<List
className="List"
height={150}
innerElementType={innerElementType}
itemCount={51}
itemSize={ITEM_SIZE}
width={300}
>
{Row}
</List>
);
const innerElementType = forwardRef(({ style, ...rest }, ref) => (
<div
ref={ref}
style={{
...style,
height: `${parseFloat(style.height) + PADDING_SIZE * 2}px`
}}
{...rest}
className="innerClass"
/>
));
here is Code sandbox example
Related
I am trying to create a react app using create-react-app. Following is my app function which is supposed to render a component thread inside my main app.
function App() {
return (
<div className="App">
<header className="App-header">
<div style={{ width: "280px", height: "320px", borderWidth:"5",borderColor:"white" }}>
<Thread threadId={"my-thread-id"} />
</div>
</header>
</div>
);
}
and here is the thread component
function Thread() {
return (
<div className="thread">
<h1 className="text-3xl font-bold underline ">Hello world!</h1>
</div>
);
}
export default Thread;
I just want my thread component's div with class "thread" to fill entire height and width inside the div of 280px:320px w:h in the main app. I am only getting a height of ~70px now.
I'm trying to change height, width, minHeight, minWidth parameters in the header class but to no avail. I am very bad at CSS so I would really appreciate the help. Thanks!
In order to achieve this you need to give the element with thread a class of h-full (height:100%) to fill the height of the container (which has a height of 320px).
function App() {
return (
<div className="App">
<header className="App-header">
<div style={{ width: "280px", height: "320px", borderWidth:"5",borderColor:"white" }}>
<Thread threadId={"my-thread-id"} />
</div>
</header>
</div>
);
}
function Thread() {
return (
<div className="thread h-full">
<h1 className="text-3xl font-bold underline">Hello world!</h1>
</div>
);
}
const rootElement = document.getElementById("app");
ReactDOM.render(<App />, rootElement);
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
give a class to Thread Component and style it
React:
<Thread className="t" />
CSS:
.t {
postion: absolute;
width: 100%;
height: 100%;
}
I am having trouble trying to have a responsive grid of 3 boxes with some aligned content inside using the library Bulma. I would like to make it work still maintaining the level inside a box if possible.
Any help would be appreciated.
This is the result I expect:
But when decreasing the width, it breaks:
This is the code I am using:
<div className="columns sub">
{this.props.options.map(option => (
<div className="column is-one-third" key={option.id}>
<div
name={option.id}
className={
`box ` +
(this.props.optionToBeChosen === option.id
? "box-is-active"
: "")
}
onClick={() => this.props.onClick(option.id)}
>
<div className="level is-mobile">
<div className="level-item level-left">
<div>
<p className="box-text-title">{option.title}</p>
<p className="box-text-small">{option.description}</p>
<p className="box-text-small">{option.description2}</p>
</div>
</div>
<div className="level-item level-right has-text-right">
<div>
<p className="box-text-demo">{option.cta}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>
The Bulma levels are explicitly told not to shrink
.level-left, .level-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
You'll have to override that to get the levels to not break out of the .box elements.
Rather than overriding ALL level items, I suggest you add a custom class to those levels that you want to be able to shrink.
Something like
<div class="level is-mobile level-is-shrinkable">
Level items here...
</div>
<style>
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
</style>
In my case, I had to add a third styling condition for centered level-item elements:
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-item,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
Many thanks to just-a-web-designer for his|her answer.
I'm trying to make an expansion effect in my navbar using angular.
I need when I click in "mostrar informações" the content must ride up.
The problem is that the superior part of my footer is not following the effect.
I try something like:
<footer class="page-footer font-small footer-fundo-cinza">
<div class="container">
<div class="row pt-3">
<div class="col-md-4">
<img src="../../../assets/estilomotocar-rodape.png" class="img-responsive img-fluid">
</div>
</div>
</div>
<div [#fadeInUpDown]="mostrar_informacoes" [#statusDisplay]="mostrar_informacoes" class="row">
<div class="container">
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
</div>
</footer>
My animations:
export const statusDisplay =
trigger('statusDisplay', [
state('aberto', style({ display: 'block' })),
state('fechado', style({ display: 'none' })),
transition('fechado => aberto', animate('0ms ease')),
transition('aberto => fechado', animate('0ms 200ms ease'))
])
export const fadeInUpDown =
trigger('fadeInUpDown', [
state('fechado', style({
transform: 'translate3d(0,100%,0)'
})),
state('aberto', style({
transform: 'translate3d(0,0,0)'
})),
transition('fechado <=> aberto', animate('400ms ease'))
])
If I put my animation direct in my footer the effect work but the translate3d make my nav go out the page, making a scroll.
My CSS:
footer{
position: absolute;
bottom: 0;
width: 100%;
}
Your code is not enough to evaluate your problem . Generally in Angular and any other web language you would need to explain your css very good . In that case I would propose a wrapper element :
<div class="wrapper">
<div class="ride-up">
<div class="ride-up-element"> Some text here </div>
</div>
</div
And then the CSS :
.wrapper {
display : flex ;
flex-direction : row/column ;
width : you choose it ;
height : as well :
other-options : also you choose;
}
.ride-up {
width : you choose it ;
height : as well :
}
.ride-up:hover {
some css goes here ....
}
.ride-up-element {
some other css goes here....
}
I am using Material UI to create cards that take an argument Actions which is a list of buttons.
The length of the Card is relative to the text I enter, but all Cards will be the same height.
I am very new to CSS and still wrapping my mind around position: fixed, relative, absolute.
This is the code that renders the Card:
export function ViewCurrentPitches2(props) {
const actions = [
<FlatButton
label="Cancel"
primary={true}
onClick={props.closeEditPitch}
/>,
<FlatButton
label="Save"
primary={true}
keyboardFocused={true}
onClick={props.savePitchBeingEdited}
/>,
];
return (
props.state.savedPitches.map((pitch, i) => {
return(
<Card key={pitch.id} className = 'form-margin card-width' zDepth={3}>
<CardText>{pitch.subject} </CardText>
<CardText className='card'>{pitch.pitch}</CardText>
<CardActions>
<FlatButton label="Edit" onClick={(e) => {props.toggleEdit(e, pitch); console.log(props.state.pitchBeingEdited)}}/>
<Dialog
className="dialogBox"
title="Test"
modal={false}
actions={actions}
open={props.state.editPitch}
contentStyle={customContentStyle}
autoScrollBodyContent={true}
>
<TextFieldExampleCustomize currentValue = {props.state.pitchBeingEdited} updateNewPitch = {props.updatePitchBeingEdited} />
</Dialog>
<FlatButton label="Delete" onClick={(e) => {props.deletePitch(e, pitch)}} />
</CardActions>
</Card>
)
})
)
}
<div className='card-parent'>
<ViewCurrentPitches2
state= {this.state}
deletePitch = {this.deletePitch}
handleSave={this.dialogBoxSave}
toggleEdit = {this.toggleEdit}
closeEditPitch = {this.closeEditPitch}
updatePitchBeingEdited = {this.updatePitchBeingEdited}
savePitchBeingEdited = {this.savePitchBeingEdited}
/>
</div>
This is what it looks like:
Can anyone explain to me
1.) When I'm adding in the CSS position: relative | fixed | absolute ...etc what is happening? I assign that to the child correct?
2.) If I want to move the buttons to the bottom of the Card, Card is the parent and I put the styling on the button? How would I go about doing this?
Generally speaking, you would assign relative to the parent and absolute to the child. The child is being positioned absolutely, relative to the parent.
Refer to full documentation for more details.
.card{
display:inline-block;
width:200px;
height: 100px;
border: 1px solid red;
position: relative;
}
.buttons{
position: absolute;
bottom: 0;
border: 1px solid blue;
width: 100%;
}
<div class="parent">
<div class="card">
<div class="buttons">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="card">
<div class="buttons">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="card">
<div class="buttons">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div>
I am having some problem with the first-child and nth-child function in CSS. I have some divs structured like this:
<div class = container>
<div id = 456, class = item>
<div id = header_123, class = item_header>
<div class = text_container>
<div class="header_span">This is Item 456</div>
</div>
</div>
</div>
<div id = 789, class = item>
<div id = header_124, class = item_header>
<div class = text_container>
<div class="header_span">This is Item 789</div>
</div>
</div>
</div>
<div id = 123, class = item>
<div id = header_125, class = item_header>
<div class = text_container>
<div class="header_span">This is Item 123</div>
</div>
</div>
</div>
</div>
I want to change the left-margin of the first div with class item. I use
.item div:first-child{
margin-left: 30px;
}
This changes the div with id 456's margin, but also the margin of all the text_container and header_span. This is not what I want; what am I doing wrong?
Use the immediate child selector >:
.item > div:first-child {
margin-left: 30px;
}
Note: And I could see that you are not wrapping your attributes inside " and also an id cannot start with a number.
I want to change the left-margin of the first div with class item.
If that's the case, you need to use:
div.item:first-child {
margin-left: 30px;
}
But that gives totally a different one.
Try This
.item:first-child{
margin-left: 30px;
}
Your html has few mistakes, Try to fix it like this: Demo
Wrap class and id with " "
Remove div's that have , in between id and class
HTML:
<div class="container">
<div id="456" class="item">
<div id="header_123" class="item_header">
<div class="text_container">
<div class="header_span">This is Item 456</div>
</div>
</div>
</div>
...
CSS:
.item:first-child {
margin-left: 30px;
}
As Sanjay and Praveen mentioned you need to use :first-child pseudo-class