Open TNAJanssen opened 1 year ago
Please provide code example
add const to your code as below
const style = `.m-signature-pad--footer {display: none; margin: 0px;}
.m-signature-pad {
position: absolute;
font-size: 10px;
width: 100%;
height: 100%;
top: 0;
// left: 50%;
// border: 1px solid #e8e8e8;
background-color: transparent !important;
// box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
}
body {
background-color: transparent !important;
}`;
and then add this const to web style property as below
<SignatureScreen
ref={ref}
onEnd={handleEnd}
onOK={handleOK}
onEmpty={handleEmpty}
onClear={handleClear}
onGetData={handleData}
autoClear={false}
backgroundColor={'transparent'}
descriptionText={text}
**webStyle={style}**
/>
@TNAJanssen: by pad and device assuming you mean iPad?
@TNAJanssen add margin: 0px;
to .m-signature-pad
I was having this problem and then I solve to put the const style like above:
(
const style = `.m-signature-pad {
margin-left: 0%;
margin-top: 0%;
}
.m-signature-pad--body {border: none}
.m-signature-pad--footer
.button {
bottom: 0px;
background-color: ${customColor};
line-height: 30px;
text-align: center;
color: #FFF;
border: none;
outline: none;
}
`;
return (
<View style={[mainStyles.container]}>
<Signature
webStyle={style}
style={{
margin: 0, padding: 0
}}
onOK={(img) => { setSignature(img); setShowSignature(false); }}
clearText="Limpar"
descriptionText="Insíra a sua assinatura acima."
confirmText="Salvar"
imageType="image/png"
/>
</View>
);
)
and that's works! but... some clients related to me the area are out of the box, like when I don't put the style const propertys. What would be happening?
The red area is HTML and blue is the signature pad, on all other devices this works perfectly.