Use controlgroup class for routing search input fields

qgis · Dec 20, 2024 · e73bf11 · e73bf11
1 parent 9c32d7e
commit e73bf11
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 13 deletions.
diff --git a/plugins/Routing.jsx b/plugins/Routing.jsx
@@ -21,7 +21,6 @@ import Icon from '../components/Icon';
 import ResizeableWindow from '../components/ResizeableWindow';
 import ButtonBar from '../components/widgets/ButtonBar';
 import DateTimeInput from '../components/widgets/DateTimeInput';
-import InputContainer from '../components/widgets/InputContainer';
 import NumberInput from '../components/widgets/NumberInput';
 import SearchWidget from '../components/widgets/SearchWidget';
 import Spinner from '../components/widgets/Spinner';
@@ -535,7 +534,7 @@ class Routing extends React.Component {
     };
     renderSearchField = (entry, idx, config, removeable, placeholder = null) => {
         return (
-            <InputContainer className="routing-search-field" key={"field" + idx}>
+            <div className="routing-search-field controlgroup" key={"field" + idx}>
                 <SearchWidget placeholder={placeholder} resultSelected={(result) => this.searchResultSelected(config, idx, result)} role="input" searchParams={this.state.searchParams} searchProviders={this.state.searchProviders} value={entry.text} />
                 {idx === 0 ? (
                     <button className="button" disabled={!this.props.locatePos} onClick={() => this.updatePoint(config, 0, this.locatePos())} role="suffix">
@@ -547,7 +546,7 @@ class Routing extends React.Component {
                         <Icon icon="remove" />
                     </button>
                 ) : null}
-            </InputContainer>
+            </div>
         );
     };
     renderImportButton = (config) => {

diff --git a/plugins/style/Routing.css b/plugins/style/Routing.css
@@ -91,19 +91,12 @@ div.routing-points-commands > div.VectorLayerPicker {
 }
 
 div.routing-search-field {
-    display: flex;
     margin-bottom: 0.25em;
+    width: 100%;
 }
 
-div.routing-search-field input.search-widget-input[type=text] {
-    border: none;
-    outline: none;
-    height: calc(2em - 2px);
-}
-
-div.routing-search-field button.button {
-    border-right: none;
-    width: 2em;
+div.routing-search-field > div {
+    flex: 1 1 auto;
 }
 
 button.routing-compute-button {