I am using material-ui with react "material-ui": "^0.19.2" and am trying to place a SelectField in a table. This much is working fine but the margin and/or padding applied to the select component is doing 2 unwanted things. First is the table rows now adjust to the height of the select which is making the size of the entire row too high. Secondly the alignment of everything else in the row is off.
My code:
<SelectField
value={ props.value }
hintText="Select location.."
style={ {
width: 150,
padding: 0,
margin: 0
} }
onChange={ (event, key, payload) => this.updateLocation(event, payload, props.index, props.original.something) }>
{ ::this.createMenu() }
</SelectField>
createMenu = () => {
const { locations } = this.props.list;
return locations.map((location, i) => {
return <MenuItem key={ i } value={ location } primaryText={ location } />
});
}
If I could control the styling around the component(Textfield??) that is rendered I would try and make it fit properly but the style prop on the SelectField only seems to style the dropdown list.
Another option for me here could be to go with a popover for the field and render a custom component to attach it to - but I haven't had much luck when trying use that.
The following props on the SelectField give me what I want:
<SelectField
value={props.value}
hintText="Select location.."
style={{
width: 150,
height: 15,
lineHeight: 15,
position: 'relative',
textAlign: 'center',
fontSize: '0.9em'
}}
menuStyle={{
position: 'absolute',
top: -12.5,
}}
underlineStyle={{
position: 'relative',
top: 20,
}}
onChange={(event, key, payload)=>this.updateLocation(event,payload,props.index,props.original.something)}
>
{
::this.createMenu()
}
</SelectField>
if anyone knows a better way please add an answer but for now this will answer my question.
<b>Just add maxHeight={200} inside SelectField</b>
< SelectField
multiple
fullWidth = {true}
value={this.state.candidate_profile_arr}
onChange = {this.handleChange}
maxHeight = {200}
>
{this.state.profile.map((profile, i) =>
<MenuItem value={profile.id} key={i} primaryText={profile.name} />)
}
</SelectField>
Related
in this data table i decalre rows and colums only as simple variables so i cant give them style with 'style={{textAlign: center}}' and i tried adding css file but it didnt work on either tr or th when using this material ui table so im not so sure how to do it... this is my code
import * as React from 'react';
import { DataGrid } from '#material-ui/data-grid';
export default function DataTable({data, someColumns}) {
const columns = someColumns
const rows = data;
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
</div>
);
}
by default the data in columns is aligned left and not center how can i change it?
EDIT: i've managed to fix it with this css. thanks to fahad
.MuiDataGrid-colCellTitle {
display: block;
text-align:center;
width: 100%;
}
.MuiDataGrid-cell {
display: block;
position: relative;
text-align: center;
}
which will center both rows and columns.
For anyone else who comes across this, check out the implementation of ColDef here.
The way to do this 'correctly' would be like this:
const [columns, setColumns] = useState([
{
field: 'status',
width: 130,
// these properties can only be 'left' | 'center' | 'right'
// note that these only set text-align property.
headerName: 'Status',
headerAlign: 'center',
align: 'center',
renderCell: (params) => {
return (
<Chip label={params.value} />
)
}
},
]);
If you're rendering anything other than text (like in the example above) it won't center your content. The cells are display: flex and align-items: center but to center horizontally you need to add a justify-content for centered cells:
.MuiDataGrid-cellCenter {
justify-content: center;
}
You can do the same for MuiDataGrid-cellLeft or MuiDataGrid-cellRight if needed.
This worked for me.
In your style.css you can target th and tr by
this property .MuiDataGrid-colCellTitle. So to align it in center use this
Style.css
.MuiDataGrid-colCellTitle {
display: block;
text-align:center;
width: 100%;
}
After importing things
import { DataGrid } from '#material-ui/data-grid';
Declare your rows and columns data inside the function.
export default function DataGridDemo() {
const columns = [
Data in columns
];
const rows = [
Data in rows
];
//Apply your styles
return (
<div
style={{
height: 400,
width: "100%",
backgroundColor: "red",
textAlign: "center"
}}
>
<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
</div>
);
}
Code Sandbox link : https://codesandbox.io/s/thirsty-leaf-izuhd?file=/src/App.js
I'm using material table from material UI react from here and I can't figure out how to style the table properly, especially the height of rows.
I've tried all the ways explained in doc, alternatively and altogether and nothing makes it.
But there seems to be something somewhere that takes precedence over my css. Some of these CSS prop do have effects (like textAlign and vertical align), but most don't.
What am I missing here ?
I also overrode some css directly, without any effect
tr {
height: 100px;
}
tr td {
height: auto !important;
overflow:scroll;
}
MuiTableRow-root.{
height:50px;
max-height:50px;
}
here's my code:
let columns = [];
//console.log(this.props.data.matrix[0][0])
for(var i=0;i<this.props.headers.length;i++){
let filtering = false;
let obj = {'title':this.props.headers[i].display,'field':this.props.headers[i].accessor,headerStyle: {
backgroundColor: '#315481',
color: '#FFF',
},cellStyle:{maxHeight:50,height:50,overflow:'scroll',padding:1}}
columns.push(obj)
}
return(
<div>
<a className="anchor" id={this.props.id}></a>
<div className="centeringDiv"><h3>{this.props.title}</h3></div>
{this.props.infoText && <SectionInfo infoText = {this.props.infoText} />}
<div style={{ maxWidth: '100%',marginTop:15}}>
<MaterialTable
columns={columns}
data={this.props.dataToDisplay}
title={''}
onRowClick={((evt, selectedRow) => this.setState({ selectedRow }))}
options={{
pageSize:pageSizeCalc,
maxBodyHeight:400,
paging:true,
filtering:this.props.filtering,
pageSizeOptions: pageSizeOptionsCalc,
//fixedColumns: {left: 1},
rowStyle: rowData => ({backgroundColor: (this.state.selectedRow && this.state.selectedRow.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF',maxHeight:100}),
headerStyle:{height:60,maxHeight:60,padding:0,overflow:'none',lineHeight:1,textAlign:'center',fontSize:'2.5vh'},
cellStyle:{height:100,overflowY:'scroll',verticalAlign:'top',fontSize:'2vh',overflow:'scroll',padding:1}
}}
/>
finally the computed css
Try to style cell with cellStyle property like:
const cellStyle = {
padding: '0 14px',
};
const [state, setState] = React.useState<TableState>({
columns: [
{ title: 'ID', field: 'id', cellStyle }...
]
...
})
index.js
import React from 'react'
import TextField from '#material-ui/core/TextField'
import style from './style'
import withStyles from 'hoc/withStyles'
import { connect } from 'react-redux'
class SearchField extends React.Component {
constructor (props) {
super(props)
this.onChange = this.onChange.bind(this)
}
onChange (event) {
const { dispatcher } = this.props
this.props.dispatch(dispatcher(event.target.value))
event.preventDefault()
}
render () {
const { classes, placeholder } = this.props
return (
<TextField
label={placeholder}
placeholder={placeholder}
InputProps={{ classes: { input: classes.resize } }}
className={classes.textField}
margin="normal"
autoFocus={true}
variant="outlined"
onChange={this.onChange}
/>
)
}
}
export default withStyles(style)(connect()(SearchField))
style.js
export default function () {
return {
container: {
display: 'flex',
flexWrap: 'wrap'
},
textField: {
width: 'auto'
},
resize: {
fontSize: 11
}
}
}
https://material-ui.com/api/text-field/
How can I change TextField height? I can't find it in the documentation. When I try to change it directly in CSS it works incorrectly (it looks like this - selected height on the screen 26px).
What should I do?
You can try out adding the size="small" which is mentioned in the Textfield API
<TextField variant="outlined" size="small" / >
The other answer is useful but didn't work for me because if a label is used in an outlined component (as it is in the question) it leaves the label uncentered. If this is your usecase, read on.
The way the <label> component is styled is somewhat idiosyncratic, using position: absolute and transform. I believe it's done this way to make the animation work when you focus the field.
The following worked for me, with the latest material-ui v4 (it should work fine with v3 too).
// height of the TextField
const height = 44
// magic number which must be set appropriately for height
const labelOffset = -6
// get this from your form library, for instance in
// react-final-form it's fieldProps.meta.active
// or provide it yourself - see notes below
const focused = ???
---
<TextField
label="Example"
variant="outlined"
/* styles the wrapper */
style={{ height }}
/* styles the label component */
InputLabelProps={{
style: {
height,
...(!focused && { top: `${labelOffset}px` }),
},
}}
/* styles the input component */
inputProps={{
style: {
height,
padding: '0 14px',
},
}}
/>
Notes
I just used inline styles rather than the withStyles HOC, as this approach just seems simpler to me
The focused variable is required for this solution - you get this with final-form, formik and probably other form libraries. If you're just using a raw TextField, or another form library that doesn't support this, you'll have to hook this up yourself.
The solution relies on a magic number labelOffset to center the label which is coupled to the static height you choose. If you want to edit height, you'll also have to edit labelOffset appropriately.
This solution does not support changing the label font size. You can change the input font size, only if you're fine with there being a mismatch between that and the label. The issue is that the size of the 'notch' that houses the label in the outlined border is calculated in javascript according to a magic number ratio that only works when the label font size is the default. If you set the label font size smaller, the notch will also be too small when the label shows in the border. There's no easy way to override this, short of repeating the entire calculation yourself and setting the width of the notch (the component is fieldset > legend) yourself via CSS. For me this wasn't worth it, as I'm fine with using the default font sizes with a height of 44px.
The component takes a multiline prop which is a boolean. Set this to true, and then set the component's rows prop to a number.
<TextField
multiline={true}
rows={3}
name="Description"
label="Description"
placeholder="Description"
autoComplete="off"
variant="outlined"
value={description}
onChange={e => setDescription(e.target.value)}
/>
You didn't show how you tried to specify the height, but the approach you used for font-size is the right approach.
Here's an example showing two text fields with different heights:
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import { withStyles } from "#material-ui/core/styles";
const styles = {
input1: {
height: 50
},
input2: {
height: 200,
fontSize: "3em"
}
};
function App(props) {
return (
<div className="App">
<TextField
variant="outlined"
InputProps={{ classes: { input: props.classes.input1 } }}
/>
<TextField
variant="outlined"
InputProps={{ classes: { input: props.classes.input2 } }}
/>
</div>
);
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);
And here is a code sandbox with the same code so you can see it running.
First of all, my heart goes out to any poor soul in this thread who has found themselves fighting against the awkward design of the MUI components. Second, if you're using themes AND the "filled" variant of TextField, this solution might work for you. Using the Chrome Dev Tools, I found success adjusting the height of the divs with the classes "MuiFormControl-root" and "MuiInputBase-root". This is what my code looks like (results may vary):
const theme = createMuiTheme({
overrides: {
MuiFormControl: {
root: {
height: '56px',
},
},
MuiInputBase: {
root: {
height: '56px',
},
},
},
})
<TextField
id="outlined-multiline-static"
label="Multiline"
multiline
fullWidth
defaultValue="Default Value"
inputProps={{
style: {
height: "600px",
},
}}
/>
To make it narrower, set a height, and add a "dense" margin prop on the TextField to keep the label aligned correctly:
<TextField margin="dense" style={{ height: 38 }} />
With material-ui v4+, you have to adjust the input padding and the label position to get what you whant.
<TextField label="Label" variant="outlined" />
Suppose we want the above TextField to be 48px height (it's default size is 56px), we just have to do (56px - 48px) / 2 = 4px and in our css file:
.MuiTextField-root input {
/* 14.5px = 18.5px - 4px (note: 18.5px is the input's default padding top and bottom) */
padding-top: 14.5px;
padding-bottom: 14.5px;
}
.MuiTextField-root label {
top: -4px;
}
.MuiTextField-root label[data-shrink='true'] {
top: 0;
}
For styled-components users, all the above block of code can be defined as Sass mixins that can be re-used throughout the code base
import { css } from 'styled-components'
const muiTextFieldHeight = (height: number) => {
const offset = (56 - height) / 2
return css`
input {
padding-top: calc(18.5px - ${offset}px);
padding-bottom: calc(18.5px - ${offset}px);
}
label {
top: -${offset}px;
}
label[data-shrink='true'] {
top: 0;
}
`
}
Then somewhere in your stylesheet
.MuiTextField-root {
${muiTextFieldHeight(40)} /* set TextField height to 40px */
}
This works with material-ui v3,
<div className="container">
<TextField
label="Full name"
margin="dense"
variant="outlined"
autoFocus
/>
</div>
.css
.container input {
height: 36px;
padding: 0px 14px;
}
.container label {
height: 36px;
top: -6px;
}
.container label[data-shrink="true"] {
top: 0;
}
https://codesandbox.io/s/elated-kilby-9s3ge
With React and "#mui/material": "^5.2.2",
import * as React from 'react';
import TextField from '#mui/material/TextField';
export default function BasicTextFields() {
return (
<TextField
label="Outlined"
variant="outlined"
InputLabelProps={{
style: {
fontSize: 14,
backgroundColor: '#FFF',
paddingLeft: 4,
paddingRight: 4,
color: '#383838',
},
}}
inputProps={{
style: {
fontSize: 14,
height: 40,
width: 272,
padding: '0 14px',
fontWeight: 'bold'
},
}}
/>
);
}
CSS
.MuiTextField-root{
border: 1px solid $BORDER_COLOR_2;
border-radius: 6px;
height: 40px;
box-shadow: 0px 2px 3px $BOX_SHADOW_1;
color: $TEXT_COLOR_3;
font-size: 14px;
font-weight: bold;
}
.MuiTextField-root label {
top: -6px;
}
.MuiTextField-root label[data-shrink='true'] {
top: 0;
}
Changing the height is simple, can be achieved using
InputProps={{style: { fontSize: '1.8rem', height: 70 },
But that isn't enough, because the label(placeholder in this case) will not be centered.
Label can be centered using:
sx={{'.MuiFormLabel-root[data-shrink=false]': { top: <put desired value here>} }}
I am using ant design to react UI components. I need to remove the padding given for the ant design card.
So I need to remove the padding given for the classes .ant-card-wider-padding and .ant-card-body.I am using JSS for styling the UI components.
cardStyle: {
marginTop: '30px',
boxShadow: '0px 1px 10px rgba(0,1,1,0.15)',
backgroundColor: '#ffffff',
borderStyle: 'solid',
outline: 'none',
width: '100%',
},
i am using cardStyle class to styling ant design card.Now i need to remove the padding in that card.
From the documentation of Ant Design
You need to override the style in bodyStyle not cardStyle
bodyStyle: Inline style to apply to the card content
<Card title="Card title" bodyStyle={{padding: "0"}}>Card content</Card>
use fullWidth props for removing padding..,
<Card.Section fullWidth>
<ResourceList
items={[
{
id: 341,
url: 'customers/341',
name: 'Mae Jemison',
location: 'Decatur, USA',
}
]}
renderItem={
(item) => {
const {id, url, name, location} = item;
const defaultImage = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNLS4wMi0uMDFoMTAwdjEwMGgtMTAweiIgZmlsbD0iI2ZmZTBjMyIvPjxwYXRoIGZpbGw9IiNmZjk2N2QiIGQ9Ik0wIDBoNjkuNDF2MTAwSDB6Ii8+PHBhdGggZD0iTTY5LjkyIDB2NDQuMzJMNTEuMzQgNTV2NDVIMTAwVjB6IiBmaWxsPSIjZmZlMGMzIi8+PHBhdGggZmlsbD0iIzMyY2FjNiIgZD0iTTM5LjMyIDc2YTExLjg1IDExLjg1IDAgMCAwIDEyIDExLjYyVjc2Ii8+PHBhdGggZmlsbD0iIzAwOTc5NiIgZD0iTTM5LjMyIDc2YTEyIDEyIDAgMCAxIDEyLTExLjgyVjc2Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNDMuNzQgMTkuODNhMTIuODIgMTIuODIgMCAxIDEtMjUuNjQgMCIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iNCIgZD0iTTI3LjM5IDMxLjZsLTEuNTggNS45Nm05LjM3LTUuNzJsMi41NSA1LjQ3bTQuMjYtOS44NWwzLjUzIDQuNW0tMjUuNDMtNC41bC0zLjUzIDQuNSIvPjwvc3ZnPgo=" ;
const media = <Thumbnail source={defaultImage} size="small" name={name} />;
return (
<ResourceList.Item id={id} url={url} media={media}>
<Stack alignment="center">
<Stack.Item fill>
<TextStyle>{name}</TextStyle>
</Stack.Item>
<Stack.Item>
<TextStyle>Last changed</TextStyle>
</Stack.Item>
<Stack.Item>
<Button>Edit Giffy</Button>
</Stack.Item>
</Stack>
</ResourceList.Item>
);
}
}
/>
</Card.Section>
very simple just add bodyStyle in Card Component
<Card bodyStyle={{ padding: "0"}}>
You can use this:
.cardStyle {
padding: 0;
}
If didn't work, use this:
.cardStyle {
padding: 0 !important;
}
I'm not too familiar with JSS but if your other styles are being applied then I assume the issue is not with that.
I was able to remove the padding from the card with the following code.
//style.less
.panelcard { ... }
.panelcard .ant-card-body {
padding: 0;
}
// panelCard.js
import { Card } from 'antd';
require('./style.less');
const PanelCard = ({ children }) => {
return (
<Card className='panelcard'>
{children} // <p>Some Child Component(s)</p>
</Card>
);
}
// invocation
<PanelCard label='Panel Title'>
<p>Some Child Component(s)</p>
</PanelCard>
This gave me the following output (card is the white box):
I am not sure if this is the preferred way of customizing antd's components but I didn't really find too much on antd's website about overriding styles, only on extending components.
Try using :global in you scss/less
div { // or any parent element/class
:global {
.ant-card-body {
passing: <number>px; // number can be 0 onwards
}
}
}
I'm building "Tagging from photo" functionality.
When the user move or pinch the square on the image,
PanResponder changes the state of x-coordinate(left), y-coordinate(top), the length of square(thumbSize)
With the data, I want to show the part of square real-time
So this image below should be placed into the left of A, All All from the image above.
Here is the part of render showing the "cropped" image.
console.log(left) // 80
console.log(top) // 200
console.log(thumbSize) // 150
<Image
source={{uri: image}}
style={{height:70, width: 70, bottom: (-top), right: (-left)
}} <- style is not complete. I'm putting some example code
/>
This is continuous problem from: How to show the only part of the image.
It works but the solution doesn't meet my expectation.
It's not changing width and height ( I want to fix resize the image from 'the width of square' to '70' for each width and height)
It breaks the whole style (A, All, All things disappear)
I've been trying to solve this idea for days but couldn't find the exact way.
Update: I almost solved it but resizing matters
I changed Image to CroppedImage (new component)
<CroppedImage
source={{uri: image}}
cropTop={top}
cropLeft={left}
cropWidth={thumbSize}
cropHeight={thumbSize}
width={width(100)}
height={width(100)}
resizeMode="contain" />
Here is CroppedImage
return (
<View style={[{
overflow: 'hidden',
height: this.props.cropHeight,
width: this.props.cropWidth,
backgroundColor: 'transparent'
}, this.props.style]}>
<Image style={{
position: 'absolute',
top: this.props.cropTop * -1,
left: this.props.cropLeft * -1,
width: this.props.width,
height: this.props.height
}}
source={this.props.source}
resizeMode={this.props.resizeMode}>
{this.props.children}
</Image>
</View>
);
It seems working but it can't resize (from square width x height to 70x70).
I made a fiddle to show what calculations you have to do to correctly position and resize your tag image:
$('#image').click(function(event) {
var size_ratio = .6;
var img_src = $(this).attr('src');
var tag = $('#tag-rectangle');
var top_position = tag.height()/2 - event.offsetX*size_ratio;
var left_position = tag.width()/2 - event.offsetY*size_ratio;
$('#tag-rectangle').css({
'background-image': 'url('+img_src+')',
'background-position': top_position +'px '+ left_position + 'px',
'background-size': $(this).width()*size_ratio + 'px ' + $(this).height()*size_ratio + 'px'
});
});
#tag-rectangle {
width: 50px;
height: 50px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="http://fakeimg.pl/250x100/" alt="">
<div id="tag-rectangle"></div>
Well, I finally managed to create a working React Native code (never used it before, sorry if it is noobish code) doing the same as in my other answer.
Here is the code:
import React, { Component } from 'react';
import { TouchableWithoutFeedback, ImageBackground, Image, View, StyleSheet } from 'react-native';
const IMAGEURI = 'http://fakeimg.pl/300x300/';
const SIZERATIO = .6;
const IMAGEWIDTH = 300;
const IMAGEHEIGHT = 300;
const CROPIMAGEWIDTH = 100;
const CROPIMAGEHEIGHT = 100;
export default class App extends Component {
state = {
style: {
marginLeft: 0,
marginTop: 0,
},
uri: ''
};
repositionImage(event) {
this.setState({
style: {
marginLeft: CROPIMAGEWIDTH/2 - event.nativeEvent.locationX*SIZERATIO,
marginTop: CROPIMAGEHEIGHT/2 - event.nativeEvent.locationY*SIZERATIO
},
uri: IMAGEURI
});
}
render() {
return (
<View>
<TouchableWithoutFeedback onPress={(event) => this.repositionImage(event)}>
<View>
<Image
style={styles.image}
source={{ uri: IMAGEURI }}
/>
</View>
</TouchableWithoutFeedback>
<View style={styles.tag}>
<ImageBackground style={[styles.cropped,this.state.style]} source={{uri: this.state.uri }} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
image: {
width: IMAGEWIDTH,
height: IMAGEHEIGHT,
},
tag: {
borderWidth: 1,
borderColor: '#000',
width: CROPIMAGEWIDTH,
height: CROPIMAGEHEIGHT,
overflow: 'hidden'
},
cropped: {
width: IMAGEWIDTH*SIZERATIO,
height: IMAGEHEIGHT*SIZERATIO
}
});
And here is the Snack
I really hope it helped!! Good luck!!
EDIT: Ok I will explain a bit what I'm doing here.
First, I set a State with the parameters that will change based on some event:
state = {
style: {
marginLeft: 0,
marginTop: 0,
},
uri: ''
};
Then, I make the component to get its properties from that state:
< ImageBackground style={[styles.cropped,this.state.style]} source={{uri: this.state.uri }} />
Finally, I prepare the onPress event to call a function which will update the state:
< TouchableWithoutFeedback onPress={(event) => this.repositionImage(event)}>
Here I'm feeding my function with the event object so I will be available to get the coordinates where the user pressed.
That last function takes the data from the event and updates the state. The view will automatically refresh with the new state data.
repositionImage(event) {
this.setState({
style: {
marginLeft: CROPIMAGEWIDTH/2 - event.nativeEvent.locationX*SIZERATIO,
marginTop: CROPIMAGEHEIGHT/2 - event.nativeEvent.locationY*SIZERATIO
},
uri: IMAGEURI
});
}
To position the image, I simply do a math operation:
CROPIMAGEWIDTH is the width of my tag element so to get the center I divide it by 2. Then, I substract the locationX of the event to move the image to the left so the locationX will be at the center of the tag.
That is only for positioning. To scale it just multiply the size of the image and the locationX by the same value. Note I multiplied the width and height of the image with the SIZERATIO in the cropped style
cropped: {
width: IMAGEWIDTH*SIZERATIO,
height: IMAGEHEIGHT*SIZERATIO
}
An example of this scaling stuff:
If your image has 200 width and you want to scale it to a half, you multiply it by 0.5. So if you click at the, say, pixel 180 starting for the left, the equivalent pixel for your scaled image will have to be multiplied by 0.5 too and it will be 90.
If there is something I didn't explaing clearly enough just ask me again a I will be glad to help you.