Signature pad not taking the full height and width

[TNAJanssen]

The red area is HTML and blue is the signature pad, on all other devices this works perfectly.

[YanYuanFE]

Please provide code example

[atefwahab]

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}**

    />

[stonedauwg]

@TNAJanssen: by pad and device assuming you mean iPad?

[zhenkaGo]

@TNAJanssen add margin: 0px; to .m-signature-pad

[azebuji]

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?