a fix for coordinate editor layout on safari (#234) (#6445)

geosolutions-it · Jan 22, 2021 · 71bc4ff · 71bc4ff
1 parent d652670
commit 71bc4ff
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 51 deletions.
diff --git a/web/client/components/misc/coordinateeditors/CoordinatesRow.jsx b/web/client/components/misc/coordinateeditors/CoordinatesRow.jsx
@@ -149,55 +149,59 @@ class CoordinatesRow extends React.Component {
                 <div style={{cursor: this.props.isDraggableEnabled ? 'grab' : "not-allowed"}}>
                     {this.props.showDraggable ? this.props.isDraggable ? this.props.connectDragSource(dragButton) : dragButton : null}
                 </div>
-                <div className="coordinate lat">
-                    <InputGroup>
-                        <InputGroup.Addon><Message msgId="latitude"/></InputGroup.Addon>
-                        <CoordinateEntry
-                            format={this.props.format}
-                            aeronauticalOptions={this.props.aeronauticalOptions}
-                            coordinate="lat"
-                            idx={idx}
-                            value={this.state.lat}
-                            onChange={(dd) => this.onChangeLatLon("lat", dd)}
-                            constraints={{
-                                decimal: {
-                                    lat: {
-                                        min: -90,
-                                        max: 90
-                                    },
-                                    lon: {
-                                        min: -180,
-                                        max: 180
+                <div className="coordinate">
+                    <div>
+                        <InputGroup>
+                            <InputGroup.Addon><Message msgId="latitude"/></InputGroup.Addon>
+                            <CoordinateEntry
+                                format={this.props.format}
+                                aeronauticalOptions={this.props.aeronauticalOptions}
+                                coordinate="lat"
+                                idx={idx}
+                                value={this.state.lat}
+                                onChange={(dd) => this.onChangeLatLon("lat", dd)}
+                                constraints={{
+                                    decimal: {
+                                        lat: {
+                                            min: -90,
+                                            max: 90
+                                        },
+                                        lon: {
+                                            min: -180,
+                                            max: 180
+                                        }
                                     }
-                                }
-                            }}
-                            onKeyDown={this.onSubmit}
-                        />
-                    </InputGroup>
-                    <InputGroup>
-                        <InputGroup.Addon><Message msgId="longitude"/></InputGroup.Addon>
-                        <CoordinateEntry
-                            format={this.props.format}
-                            aeronauticalOptions={this.props.aeronauticalOptions}
-                            coordinate="lon"
-                            idx={idx}
-                            value={this.state.lon}
-                            onChange={(dd) => this.onChangeLatLon("lon", dd)}
-                            constraints={{
-                                decimal: {
-                                    lat: {
-                                        min: -90,
-                                        max: 90
-                                    },
-                                    lon: {
-                                        min: -180,
-                                        max: 180
+                                }}
+                                onKeyDown={this.onSubmit}
+                            />
+                        </InputGroup>
+                    </div>
+                    <div>
+                        <InputGroup>
+                            <InputGroup.Addon><Message msgId="longitude"/></InputGroup.Addon>
+                            <CoordinateEntry
+                                format={this.props.format}
+                                aeronauticalOptions={this.props.aeronauticalOptions}
+                                coordinate="lon"
+                                idx={idx}
+                                value={this.state.lon}
+                                onChange={(dd) => this.onChangeLatLon("lon", dd)}
+                                constraints={{
+                                    decimal: {
+                                        lat: {
+                                            min: -90,
+                                            max: 90
+                                        },
+                                        lon: {
+                                            min: -180,
+                                            max: 180
+                                        }
                                     }
-                                }
-                            }}
-                            onKeyDown={this.onSubmit}
-                        />
-                    </InputGroup>
+                                }}
+                                onKeyDown={this.onSubmit}
+                            />
+                        </InputGroup>
+                    </div>
                 </div>
                 {this.props.showToolButtons && <div key="tools">
                     <Toolbar

diff --git a/web/client/themes/default/less/annotations.less b/web/client/themes/default/less/annotations.less
@@ -462,10 +462,13 @@
                 flex: 1;
                 justify-content: space-between;
                 flex-wrap: wrap;
-                .input-group {
+                > div {
                     flex: 1;
                     padding: 4px 0;
                     margin-right: 2px;
+                }
+                .input-group {
+                    width: 100%;
                     .form-group{
                         input#intl-numeric{
                             float: unset;

diff --git a/web/client/themes/default/less/get-feature.less b/web/client/themes/default/less/get-feature.less
@@ -70,13 +70,16 @@
             flex: 1 1 0%;
             justify-content: space-between;
             flex-wrap: wrap;
+            > div {
+                flex: 1 1 0%;
+                padding: 4px 0px;
+                margin-right: 8px;
+            }
             .input-group {
                 .input-group-addon {
                     min-width: 45px;
                 }
-                flex: 1 1 0%;
-                padding: 4px 0px;
-                margin-right: 8px;
+                width: 100%;
                 .form-group{
                     width: 100%;
                     position: relative;