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)
====================================
How it looks in iphone (friend's device)
====================================
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)
====================================
How it looks in iphone (friend's device)
====================================
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;