Having some trouble with a custom widget and CSS positioning

JonMoriSegra — Thu, 09 May 2024 14:21:07 GMT

Hello,

I am having some issues with the positioning of a custom widget. I need it to be a "splash screen" widget so it forces the user to enter an address. I'm having a couple of issues. The widget is positioned perfectly if I leave the setting "inpanel": true, but I do not want the window in the back to be visible. Screenshot below. if InPanel:true. This is exactly where I want the placement of the widget, but I do not want the other panel on the left visible.

If I put the setting on InPanel:False, This is where the widget is showing, it is almost as if it is ignoring the CSS.

Here is my CSS.

.jimu-widget-customgeocode { position: fixed; /* Fixed positioning relative to the viewport */ top: 50%; /* Position the top edge of the element at the center of the viewport */ left: 50%; /* Position the left edge of the element at the center of the viewport */ transform: translate(-50%, -50%); /* Shift the element back by half its own width and height to center it exactly */ width: 50vw; /* Set the width to 50% of the viewport width */ height: 50vh; /* Set the height to 50% of the viewport height */ display: flex; /* Ensures flexbox layout */ flex-direction: column; /* Stacks children vertically */ justify-content: center; /* Centers children vertically */ align-items: center; /* Centers children horizontally */ z-index: 1000; /* Ensure it's on top of other elements */ box-sizing: border-box; /* Include padding and borders in the element's size */ padding: 10px; /* Padding around the content */ border: 1px solid #ccc; /* Border for visibility */ background-color: #fff; /* Background color */ } .jimu-widget-customgeocode .search-container { width: 80%; /* Adjust width as necessary, can be 100% if needed */ margin-bottom: 20px; /* Space between this container and anything below it */ display: flex; justify-content: center; /* This will center the children within the container */ align-items: center; } .jimu-widget-customgeocode .search-input { flex-grow: 1; /* Allows the input to grow and fill space */ margin-right: 10px; /* Space between input and button */ padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; } .jimu-widget-customgeocode .search-button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }

topic Having some trouble with a custom widget and CSS positioning in ArcGIS Web AppBuilder Questions

Having some trouble with a custom widget and CSS positioning