I'm using react-slick in one of my projects and for some reason when I turn off arrows the entire slider disappears
The code is looking like this
<div className="container" style={{position: "relative", padding: 0}}>
<div className={styles.class_name}>
</div>
<Slider onSwipe={this.swipeHandler} arrows={false}>
{this.props.children}
</Slider>
</div>
I'm using customized Bootstrap with only responsive utilities and grid.
Any help, suggestion etc would be very appreciated!
Related
I am having a small issue fitting an icon into a Row element.
right now the icon takes up the whole row ::
<LinkedInIcon />
I was able to make it not take up the whole row ::
<div style={{ background: "white", display: "inline-block" }}>
<LinkedInIcon />
</div>
now I have to add some text on the right side of the icon, but its not working out. I added my code to the sandbox::
<Row>
<p className="text-center text-white">Bosky</p>
{/* this icon does not behave properly, it does not allow the text'Bosky' to show in the same row */}
<div style={{ background: "white", display: "inline-block" }}>
<LinkedInIcon />
</div>
</Row>
https://codesandbox.io/s/bosky-active-ow4qs7?file=/src/Components/Footer.js:447-559
Maybe like this? It's a lot of style inline, but seem to get the job done...
https://codesandbox.io/s/bosky-active-forked-bcbd35?file=/src/Components/Footer.js
I'm trying to get the Add Server button to move to the far right side of the screen. Since float:right does not exist in React, what's the best way to go about doing this?
I made a wrapper called serverNavButtonWrapper tried adding padding to the left but this seems a bit hacky. I also tried adding a wrapper around both h3 titles then did flex-grow: 1 but this didn't work and ending up squishing them into columns. I would appreciate your help!
<div className={classes.serverNav}>
<h3 className={classes.title}>Current Servers</h3>
<h3 className={classes.title}>All Servers</h3>
<div className={classes.serverNavButtonWrapper}>
<Button
className={classes.serverNavButton}
variant="outlined"
size="medium"
color="default"
>
<AddIcon /> Server
</Button>
</div>
</div>
preview of current render
If you set the margin to auto on a flex item, it will grow to the maximum available space. So the following will do the trick:
.serverNav {
display: flex;
}
.serverNavButtonWrapper {
margin-left: auto;
}
Or, if you don't need the wrapper anymore:
.serverNav {
display: flex;
}
.serverNavButton {
margin-left: auto;
}
The float property is primary the CSS property.
You can pass the stylesheet to the React components via the style attribute, e.g.:
<p style={{fontSize: "12px"}}>Text</div>
Two curly brackets are there because the argument type of style is an object and you are initializing it there.
So your code should look like this:
<div className={classes.serverNav}>
<h3 className={classes.title}>Current Servers</h3>
<h3 className={classes.title}>All Servers</h3>
<div className={classes.serverNavButtonWrapper}>
<Button
className={classes.serverNavButton}
variant="outlined"
size="medium"
color="default"
style={{float: "right"}}
>
<AddIcon /> Server
</Button>
</div>
</div>
I'm working on a reactJS web app . I get a value from the server , and i want to display it inside a grid item , but the problem is that the value is a long text,the value in my code is {signature} , and when it is displayed it does not fit the screen .
This is my try
<Paper className={classes.paper}>
<Grid container spacing={3} wrap="wrap">
<Grid item xs >
Your Signature:
<div style={{ flexWrap:'wrap' }}>
{signature}
</div>
</Grid>
</Grid>
</Paper>
<Copyright />
This is a screenshot of the result :
This is a simple css issue. You can try this.
<div style={{ maxWidth: '100%', overflow: 'hidden', wordBreak: 'break-all' }}>
You can wrap a long string with no spaces by using word-wrap css property with break-word value. Below is an example using HTML with CSS.
For React style; adapt the below css property to use camel case.
.wrap{
width: 200px;
word-wrap:break-word;
}
<div class="wrap">
oisphfpashdfpiahusdfpiuhapsiduhfpiuasdhfpiuahsdfpihaspiduhfpiasdhfpiuhasdpifuhapisduhfpiahsdfpihaspdifhpiausdhfpisdahfpihdspiuh
</div>
Hei
Trying to get my page to display an image that is behind the text and icons.
Here is what I have currently:
import React from 'react';
import SamplePicture from '../../images/sample-picture.jpg';
class Front extends React.Component {
render() {
return (
<div className="ui segment">
<img className="ui floated image" src={SamplePicture} />
<p>
This is a front page that will have an image in the background
<br />
Sampletext
</p>
</div>
);
}
}
export default Front;
It displays the image but the text gets rendered below.
Basicly I want to create text that gets rendered on top of the image.
First time asking a question here so maybe there is some information that I should have shared, but haven't. Anyway, be harsh, tell me what is wrong about the code, the question.
You can do something like this using flexbox:
<div className="ui segment">
<div className="ui medium image">
<div
className="ui active center"
style={{
display: 'flex',
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
zIndex: 1,
}}>
<div className="content">Sampletext</div>
</div>
<img
src="https://via.placeholder.com/410x210"
className="ui floated image"
alt="alt"
/>
</div>
</div>
This solution uses flexbox to center the text over the image.
I've used via.placeholder.com as an image source to make it easy to demo, but you can change it to your image's src.
If the text isn't exactly centered, either change your container to a smaller size (from medium to small for example) or choose a bigger (wider) image.
I have a function printDocument that onClick downloads the pdf that has the content of <ComponentViewToDownload/>. I do not want to show that component in the UI, just Download button. Is there a way to achieve this?
render() {
return (
<div>
<button onClick={this.printDocument}>Download</button>
<div id="divToPrint" >
<ComponentViewToDownload/>
</div>
</div>
);
}
Found a solution:
style={{
position: "absolute",
top: "-9999px",
left: "-9999px"
}}
Works well and doesn't mess up the main UI layout