i using the semantic-ui-react. I have a Container main which has an Segment inside for show page details. but this Segment's height is changing according content inside. i want to set an mix height to alway stay fixed size. here is my code:
class App extends Component {
render() {
return (
<div className="App">
<Container>
<Header />
<Segment />
</Container>
</div>
);
}
}
You can set minHeight style/css on your component or any div inside :
<Segment style={{ minHeight: 15 }} />
Related
Im trying to make image to fit a div.
Im using react-slideshow-image.
this is the CodSandbox :
https://codesandbox.io/s/react-slide-imageshow-heightproblem-mforb?file=/src/App.js
return (
<div className="App">
<div style={{ width: "30%", height: "70px" }}>
<Slide ref={this.slideRef} {...properties}>
{slideImages.map((each, index) => (
<img style={{ objectFit: 'contain', height : '100%'}} src={each} key={index} alt="sample" />
))}
</Slide>
</div>
</div>
I want the images to fit the div , so i can make the div responsive.
if the div height is 70px, so the images inside it will also be the same height:70px
I have tried this How to make an image fit the carousel?.
I have noticed that the <Slide > add divs so i looked at the docs and saw that you can add a property called cssClass that gets a string:
Use this prop to add your custom css to the wrapper containing the sliders. Pass your css className as value for the cssClass prop
but it doesnt seems to work and i didnt found any examples for it.
I have been trying to resize this logo without making the container itself larger. I'm completely stuck and dont know what to do. Modifying the logo svg file with inline styling
<svg viewBox="0 0 493.19 493.19" width='400'height='400'> produces the above result. I just want to make the logo bigger without pushing down all the components under it. I will post the layout code itself, if that will make things easier to help me out. Thank you!
const data: QueryResult = useStaticQuery(query)
return (
<ThemeProvider theme={theme}>
<>
<GlobalStyles />
<Wrapper>
<SideBarInner bg={color} as="aside" p={[6, 6, 8]}>
<Flex
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems={['center', 'center', 'center', 'flex-start']}
justifyContent="space-between"
>
<Box width={['3rem', '4rem', '5rem', '8rem']}>
<Link to="/" aria-label="LekoArts, Back to Home">
<Logo />
</Link>
</Box>
<Nav
color={color}
mt={[0, 0, 0, 10]}
as="nav"
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems="flex-start"
>
{data.navigation.nodes.map((item) => (
<PartialNavLink to={item.link} key={item.name}>
{item.name}
</PartialNavLink>
))}
</Nav>
</Flex>
</SideBarInner>
<Main>{children}</Main>
<Footer color={color}>
<Box p={[6, 6, 8]} fontSize={0}>
little things with love LekoArts.<br />
Source.
</Box>
</Footer>
</Wrapper>
</>
</ThemeProvider>
)
}
export default Layout```
The SVG viewBox dimensions don't change the size of the paths in the SVG, they change the size of the SVG object that contains the paths which results with that extra white-space.
I would undo the changes you made to the viewBox and remove the width and height inline styles. Then, the SVG should resize automatically to fit the container that it is in.
Try setting the width to 100% in the svg code and then control the size of svg with CSS (however you are implmenting css) by adjusting the width of the container that holds the svg.
Something like:
.sl-container {
width: 4rem;
}
EDIT:
If you need help implementing the css you can find a good explanation of numerous implmentations here. Inline styling is probably the simplest way to do it.
<Logo style="width: 4rem;" />
I have an SVG image that must be imported. The original image is too big so it must be made smaller.
This is the image added in code:
render() {
return (
<div>
<Grid>
<img src={mySvgImage}></img>
//other elements
</Grid>
</div>
);
}
Playing with Developers tools I had discovered that if in Styles > element.style it is added: height: 10% the image size is shrunk to the desired size. Like here:
So how can this be done in code?
I added it like inline CSS but doesn't work:
render() {
return (
<div>
<Grid>
<img style={{ heigth: '10%' }} src={mySvgImage}></img>
//other elements
</Grid>
</div>
);
}
Tried with saving it in a css file and import it with className='myClassName', same, no changes. The image has the original size.
How can this be done?
You might have a typo:
// not heigth
<img style={{ height: '10%' }} src={mySvgImage}></img>
.imgClassName {
height: 10%;
}
<div>
<Grid>
<img className="imgClassName" src={mySvgImage}></img>
</Grid>
</div>
I am trying to disable scrolling beyond the monitor resolution by hiding overflow. I am not sure why it is not working.
App.js file:
function App() {
return (
<BrowserRouter>
<div className="App"
style={{
overflow:"hidden"
}}
>
<Route
exact
path="/"
component={DefaultView}
></Route>
</div>
</BrowserRouter>
);
}
Default View File:
render(){
return(
<div
style={{
overflow:"hidden"
}}>
<div
className="bg"
style={{
backgroundColor:"#FFFFF",
position:"absolute",
width:"100%",
height:"100%"
}}
/>
<div
className="line"
style={{
backgroundColor:"#289BD3",
position:"absolute",
height:"1000px",
width:"1920px",
transform:"rotate(45deg)",
top:"200px",
left:"-800px"
}}
>
</div>
</div>
)
}
Right now, there is no X scrolling, but I can scroll up and down.
A codesandbox of the issue:
https://codesandbox.io/s/rylyo4zy24
Thanks for any help!
I changed the parent div's position to absolute and my child div's positions to relative, solving the issue.
I'm not sure exactly what you're trying to accomplish here, but for overflow hidden to have any meaning you need to define some height and/or width for the respective element:
<div
style={{
overflow:"hidden",
height:"1000px",
width:"1920px"
}}
>
...
Hello I try to make data view with prime react component in Dialog with dynamic photo size content. By default the photo popup with scroll bar and in the centre of screen.
How to make it with dynamic size and without scrollbar and on top of the screen.
I tried to use max/min height and weight but there is no result.
Found "Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via contentStyle so longer content displays a scrollbar." from https://www.primefaces.org/primereact/#/dialog
But how implement it.
<Dialog header="Client Details"
visible={this.state.visible}
modal={true}
onHide={() => this.setState({visible: false})}>
{this.renderClientDialogContent()}
</Dialog>
renderClientDialogContent() {
if (this.state.selectedClient) {
return (
<div className="p-grid" style={{fontSize: '16px', textAlign: 'center', padding: '20px', maxHeight:'800px', maxWidth:'700px', minWidth:'300px'}}>
<div className="p-col-36" style={{textAlign: 'center'}}>
<img src={this.state.selectedClient.bigPhotoLink}
alt={this.state.selectedClient.name} />
</div>
<div className="p-col-12">{this.state.selectedClient.name}</div>
<div className="p-col-12">{this.state.selectedClient.description}</div>
</div>
);
}
else {
return null;
}
}
How to make dialog size equal photo size.
Just pass the contentStyle object with the desired max-height, (the same way you do with the style attribute):
<Dialog
contentStyle={{ maxHeight: "300px" }}
header="Client Details"
visible={this.state.visible}
modal={true}
onHide={() => this.setState({visible: false})}
>
{this.renderClientDialogContent()}
</Dialog>