Question 299540 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to add/remove event on screen resize

Following is my code:

useEffect(() => {
    const handler = ev => {
      console.log(ev.data, src, ev.data.form);

      if (ev.data.type === "height") {
        if (ev.data.form === src) {
          setHeight((parseInt(ev.data.message, 10) + 10) + "px");
        }
      }
      if (ev.data.type === "popup") {
        if (ev.data.form === src) {
          setPopUpModel(ev.data.message);
        }
      }
    };

    if (typeof window !== "undefined") {
      window.addEventListener("message", handler);

      return () => window.removeEventListener("message", handler);
    }
  },

In web form I have a Submit button and it looks very good when I resize my screen the submit button gets cut like below:
enter image description here

Can anyone help me with what should I add to my syntax to solve this issue?

Tags:

2

Answers


  1. 0

    Attach the same listener for resize also

    If its possible please try to do this stuff using css itself, it will save you a lot of maintenance time!

    useEffect(() => {
    const handler = ev => {
      console.log(ev.data, src, ev.data.form);

      if (ev.data.type === "height") {
        if (ev.data.form === src) {
          setHeight((parseInt(ev.data.message, 10) + 10) + "px");
        }
      }
      if (ev.data.type === "popup") {
        if (ev.data.form === src) {
          setPopUpModel(ev.data.message);
        }
      }
    };

    if (typeof window !== "undefined") {
      window.addEventListener("message", handler);
      window.addEventListener("resize", handler);

      return () => {
          window.removeEventListener("message", handler);
          window.removeEventListener("resize", handler);
      }
    }
  },
    Login or Signup to reply.
  2. 0 
    const [ height, setHeight ] = useState('');

useEffect(() => {
 const handler = ev => {
   // here will be your existing code
 };
 
 if( typeof window !== "underfined") {
   window.addEventListener('message', handler);
   return () => window.removeEventListener('message', handler);
 }
}, []);


return(
  <div style={{ minHeight: '100vh }}>
    <button>
      style={{ height: height, minWidth: '150px' }}
      onClick={handleClick}
    </button>
  </div>
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search