DaisyUI "responsive" modal not working in iphone browser

37 views Asked by At

In my Nextjs App Router application, I'm trying to use the responsive modal from https://daisyui.com/components/modal/ in "Method 1: using dialog element" - the one at the bottom. It's working on my android , Windows, Linux devices but not working on any iphone devices. It even works on my browser iphone devices perfectly. Even I tried Z index to figure out the problem

How it should look like in phone (my device)

responsive modal works fine and everything is ok

====================================

How it looks in iphone (friend's device)

modal goes to back. I tried z index, but now worked

====================================

I am using "daisyui": "^4.4.24",

Here is parent code page.jsx

  return (
    <>
//  this should come to the back of all divs
      <div className="flex flex-col items-center justify-center min-h-[90vh] bg-[#EEEDED] lg:bg-white  text-[#23272A]">
        <div className="relative">
          <div
            className="border mx-auto"
            style={{
              width: canvasSize.width,
              height: canvasSize.height,
            }}
          >
            <canvas
              ref={canvasRef}
              className="w-full h-full"
              width={canvasSize.width}
              height={canvasSize.height}
              onMouseMove={handleCanvasMouseMove}
            ></canvas>
          </div>
        </div>
        <h1 className="text-center mb-16 text-3xl font-bold leading-5 mt-5">
          {imageData?.title}
        </h1>
      </div>


//  this should come to the front of all divs
        {selectedTextIndex === null ? (
          <BottomDefaultToolbar
            style={{
              zIndex: 1000,
              position: "fixed",
              bottom: 0,
              left: 0,
              right: 0,
            }}
            handleSaveAndPreviewClick={handleSaveAndPreviewClick}
            handleAddText={handleAddText}
          />
        ) : (
          <BottomTextEditingToolbar
            style={{
              zIndex: 1000,
              position: "fixed",
              bottom: 0,
              left: 0,
              right: 0,
            }}
            selectedTextIndex={selectedTextIndex}
            handleUpdateButtonClick={handleUpdateButtonClick}
      handleTextChange={handleTextChange}
          />
        )}

    </>
  );
};

This is my BottomTextEditingToolbar.jsxx

 const BottomTextEditingToolbar = ({
      handleTextChange,
      handleUpdateButtonClick,
      ...props
    }) => {
      return (
        <>
          <div className="block lg:hidden" key={props.selectedTextIndex}>
            <div className="btm-nav btm-nav-sm flex overflow-x-auto content-start justify-start h-20">
      <button className="min-w-[16.7%]">
                <EditTextModal
                  handleTextChange={handleTextChange}
                  textStyles={textStyles}
                  selectedTextIndex={selectedTextIndex}
                  handleUpdateButtonClick={handleUpdateButtonClick}
                />
              </button>
              </div>
            </div>
          </div>
        </>
      );
    };

    export default BottomTextEditingToolbar;

And it is my modal code for

const EditTextModal = ({
  handleTextChange,
  textStyles,
  selectedTextIndex,
  handleUpdateButtonClick,
}) => { 
return (
    <div>
      <label
        className="flex flex-col justify-center items-center gap-y-1"
        htmlFor="EditTextModal"
      >
        <EditText />
        <span className="btm-nav-label font-thin">Edit Text</span>
      </label>
      <input type="checkbox" id="EditTextModal" className="modal-toggle" />
      <div className="modal modal-bottom  " role="dialog">
        <div className="modal-box min-w-full">
          <div className="flex justify-end h-6">
            <p className="w-full text-black font-bold text-1xl text-center">
              Font Size
            </p>

            <label htmlFor="EditTextModal" className="pr-5">
              <div className="p-1 bg-[#EDEDED]  rounded-full">
                <X size={20} absoluteStrokeWidth />
              </div>
            </label>
          </div>
          <div className="divider"></div>
          <div className=" my-2">
            <div className="relative  flex-auto">
              <textarea
                id={`textInput-${selectedTextIndex}`}
                value={textStyles[selectedTextIndex]?.text}
                onChange={(e) => handleTextChange(selectedTextIndex, e)}
                className="border border-gray-300 rounded px-2 py-1 mt-1 placeholder:text-black w-full resize-none"
                style={{ whiteSpace: "pre-wrap" }}
                rows={4} // Set the number of rows you want to display initially
              />
            </div>

            <div className="flex items-center justify-end py-3 border-t border-solid border-slate-200 rounded-b">
              <label
                className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                type="button"
                htmlFor="EditTextModal"
                // onClick={() => setShowModal(false)}
              >
                Close
              </label>
              <label
                className="bg-[#23272A] text-white active:bg-[#23272A] font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                type="button"
                onClick={handleUpdateButtonClick}
                htmlFor="EditTextModal"
              >
                Update
              </label>
            </div>
          </div>
          <div className="mx-4 my-2"></div>
        </div>
        <label className="modal-backdrop" htmlFor="EditTextModal">
          Close
        </label>
      </div>
    </div>
  );
};

export default EditTextModal;

In my Nextjs App Router application, I'm trying to use the responsive modal from https://daisyui.com/components/modal/ in "Method 1: using dialog element" - the one at the bottom. It's working on my android , Windows, Linux devices but not working on any iphone devices. It even works on my browser iphone devices perfectly. Even I tried Z index to figure out the problem

How it should look like in phone (my device)

responsive modal works fine and everything is ok

====================================

How it looks in iphone (friend's device)

modal goes to back. I tried z index, but now worked

====================================

I am using "daisyui": "^4.4.24",

Here is parent code page.jsx

  return (
    <>
//  this should come to the back of all divs
      <div className="flex flex-col items-center justify-center min-h-[90vh] bg-[#EEEDED] lg:bg-white  text-[#23272A]">
        <div className="relative">
          <div
            className="border mx-auto"
            style={{
              width: canvasSize.width,
              height: canvasSize.height,
            }}
          >
            <canvas
              ref={canvasRef}
              className="w-full h-full"
              width={canvasSize.width}
              height={canvasSize.height}
              onMouseMove={handleCanvasMouseMove}
            ></canvas>
          </div>
        </div>
        <h1 className="text-center mb-16 text-3xl font-bold leading-5 mt-5">
          {imageData?.title}
        </h1>
      </div>


//  this should come to the front of all divs
        {selectedTextIndex === null ? (
          <BottomDefaultToolbar
            style={{
              zIndex: 1000,
              position: "fixed",
              bottom: 0,
              left: 0,
              right: 0,
            }}
            handleSaveAndPreviewClick={handleSaveAndPreviewClick}
            handleAddText={handleAddText}
          />
        ) : (
          <BottomTextEditingToolbar
            style={{
              zIndex: 1000,
              position: "fixed",
              bottom: 0,
              left: 0,
              right: 0,
            }}
            selectedTextIndex={selectedTextIndex}
            handleUpdateButtonClick={handleUpdateButtonClick}
      handleTextChange={handleTextChange}
          />
        )}

    </>
  );
};

This is my BottomTextEditingToolbar.jsxx

 const BottomTextEditingToolbar = ({
      handleTextChange,
      handleUpdateButtonClick,
      ...props
    }) => {
      return (
        <>
          <div className="block lg:hidden" key={props.selectedTextIndex}>
            <div className="btm-nav btm-nav-sm flex overflow-x-auto content-start justify-start h-20">
      <button className="min-w-[16.7%]">
                <EditTextModal
                  handleTextChange={handleTextChange}
                  textStyles={textStyles}
                  selectedTextIndex={selectedTextIndex}
                  handleUpdateButtonClick={handleUpdateButtonClick}
                />
              </button>
              </div>
            </div>
          </div>
        </>
      );
    };

    export default BottomTextEditingToolbar;

And it is my modal code for

const EditTextModal = ({
  handleTextChange,
  textStyles,
  selectedTextIndex,
  handleUpdateButtonClick,
}) => { 
return (
    <div>
      <label
        className="flex flex-col justify-center items-center gap-y-1"
        htmlFor="EditTextModal"
      >
        <EditText />
        <span className="btm-nav-label font-thin">Edit Text</span>
      </label>
      <input type="checkbox" id="EditTextModal" className="modal-toggle" />
      <div className="modal modal-bottom  " role="dialog">
        <div className="modal-box min-w-full">
          <div className="flex justify-end h-6">
            <p className="w-full text-black font-bold text-1xl text-center">
              Font Size
            </p>

            <label htmlFor="EditTextModal" className="pr-5">
              <div className="p-1 bg-[#EDEDED]  rounded-full">
                <X size={20} absoluteStrokeWidth />
              </div>
            </label>
          </div>
          <div className="divider"></div>
          <div className=" my-2">
            <div className="relative  flex-auto">
              <textarea
                id={`textInput-${selectedTextIndex}`}
                value={textStyles[selectedTextIndex]?.text}
                onChange={(e) => handleTextChange(selectedTextIndex, e)}
                className="border border-gray-300 rounded px-2 py-1 mt-1 placeholder:text-black w-full resize-none"
                style={{ whiteSpace: "pre-wrap" }}
                rows={4} // Set the number of rows you want to display initially
              />
            </div>

            <div className="flex items-center justify-end py-3 border-t border-solid border-slate-200 rounded-b">
              <label
                className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                type="button"
                htmlFor="EditTextModal"
                // onClick={() => setShowModal(false)}
              >
                Close
              </label>
              <label
                className="bg-[#23272A] text-white active:bg-[#23272A] font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                type="button"
                onClick={handleUpdateButtonClick}
                htmlFor="EditTextModal"
              >
                Update
              </label>
            </div>
          </div>
          <div className="mx-4 my-2"></div>
        </div>
        <label className="modal-backdrop" htmlFor="EditTextModal">
          Close
        </label>
      </div>
    </div>
  );
};

export default EditTextModal;
0

There are 0 answers