<Avatar style={{
width: 40,
height: 40,
float: 'left',
objectFit:'cover',
backgroundColor:'#aa0000',
}} src='./image/head.png'/>
The Avatar display a broken image,I don't know why?Any body any help.
imprt AvatarBg from './image/head.png'
<Avatar src={AvatarBg}/>
After use the top code it works
Related
This issue seems to apply TextFields that are: variant='outlined'
. I am trying to export my own outlined text field with a height of 40px:
import { withStyles } from '#material-ui/core/styles';
import TextField from '#material-ui/core/TextField';
const MyTextField = withStyles({
root: {
backgroundColor: 'yellow',
height: 40,
margin: 0,
paddingBottom: 0,
marginTop: 0,
}
})(TextField);
export default MyTextField;
I use the component as an outlined text-field because exporting the variant='outlined' does not seem to work from the styled component.
<MyTextField
value={"hello"}
variant="outlined"
/>
The height of the outlined text-field is larger than 40px because there is additional padding at the bottom of the field; but the background yellow is now only 40px. How do you change the height of the TextField that is outlined?
Congrats! You're code works exactly as you want it, when you isolate it. When put in a sandbox, the <TextField> shows a height of 40px. Something else in your app is causing the height issue.
The below code gives me a picture, but the legend is a bit naff.
SO won't let me upload a picture right now, but the legend is stuck in the bottom left corner... and it's tiny.
Is there a way to take control of the legend position and / or boost text size etc etc?
<div style={{height: "90vh", width: "95vw"}}>
<FlexibleXYPlot
xType="time"
colorType="category"
// onMouseLeave={this._onMouseLeave}
// style={{bottom:'50', top:'50'}}
// margin={{left: 40, right: 10, top: 30, bottom: 85}}
>
<DiscreteColorLegend
// onItemClick={this.clickHandler}
orientation="horizontal"
// width={180}
items={series.map(series => {
// console.log(series.props.colour+"");
return {title: series.props.color+"", color: series.props.color}
})
}
/>
<HorizontalGridLines/>
<XAxis top={0} title="Dates"/>
<YAxis title="Price"/>
{series}
</FlexibleXYPlot>
</div>
Try moving DiscreteColorLegend outside of FlexibleXYPlot (insted of being nested inside FlexibleXYPlot).
I'm having trouble changing the size of a google pie chart that I have made. I'm trying to draw multiple pie charts with the size of each chart proportional to the total amount of data that I'm feeding it. I am aware that we are able to change the size of the div container of the chart by adding options to the chart like as follows:
var options = {width: 400, height: 300};
However, what I'm interested in, is not changing the size of the div, but of the actual pie chart itself.
Is there any way I can change the radius of the pie chart?
I've searched around and wasn't able to find anything. Here is quick paint of what I mean:
As you can see, what I would like is for the div to remain on the same size but the size of the circle to change, depending on what value I feed it.
Any help is appreciated
try the option for chartArea
e.g.
chartArea: {width: 400, height: 300}
Try the example as below
http://jsfiddle.net/toddlevy/c59HH/
function initChart() {
var options = {
legend:'none',
width: '100%',
height: '100%',
pieSliceText: 'percentage',
colors: ['#0598d8', '#f97263'],
chartArea: {
left: "3%",
top: "3%",
height: "94%",
width: "94%"
}
};
I use the plugin jbimages, everything goes ok but I need to set a defined width for image, width = 600px. Exists a solution?Help me please.Thnx
you can set the width in your css on the pages you upload them? for example if the images are all in a div wrapper , use
.wrapper img {
width: 600px;
height: auto;
}
I have been using the following css code:
#MainBox
{ width: 488px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px; //this being half the width
}
To ensure that the items on the page are centred. The problem is, when viewing this on an iphone (and i'm assuming similar on other smartphones) the left hand side of the page is chopped off! Does anyone know how I can resolve this issue and bring everything into fit?
Thank you!
You're moving the element to the left by 244px with that CSS, and the iphone screen being so small this is causing it to be cut off. Try this:
#MainBox{
width: 488px;
height: 181px;
margin: 236px auto 0 auto;
}
The technique above to center a div is a little obsolete.
Use margin: auto, width to a fixed value (which you already have), and make the parent position:relative.