Semantic UI allows for both left and right action input functionalities to be utilized

Is there a way to add actions on both ends of an input field? Here's what I've tried so far:

<form class="ui form">
    <div class="ui left action input">
        <select class="ui compact selection dropdown" name="seats">
            {% for seat in seatOptions %}
            <option value="{{ seat }}">{{ seat }}</option>
            {% endfor %}
        </select>
        <input id="seatsText" type="text" value="plaats" readonly>
    </div>
    <button class="ui right attached button" type="submit" >aanvragen</button>
</form>

Although this setup achieved the expected look, the button (right action) appears to overlap with the input field. The input's border is still visible around part of the button, as shown in the screenshot below.

https://i.sstatic.net/pY8K0.png

Answer №1

This response may be a bit delayed, but here is the solution I have found...

<div class="ui left action input">
                <div
                  role="listbox"
                  aria-expanded="false"
                  class="ui basic button floating dropdown"
                  tabindex="0"
                >
                  <div
                    aria-atomic="true"
                    aria-live="polite"
                    role="alert"
                    class="divider text"
                  >
                    This Page
                  </div>
                  <i aria-hidden="true" class="dropdown icon"></i>
                  <div class="menu transition">
                    <div
                      style={{ pointerEvents: 'all' }}
                      role="option"
                      aria-checked="true"
                      aria-selected="true"
                      class="active selected item"
                    >
                      <span class="text">This Page</span>
                    </div>
                    <div
                      style={{ pointerEvents: 'all' }}
                      role="option"
                      aria-checked="false"
                      aria-selected="false"
                      class="item"
                    >
                      <span class="text">This Organization</span>
                    </div>
                    <div
                      style={{ pointerEvents: 'all' }}
                      role="option"
                      aria-checked="false"
                      aria-selected="false"
                      class="item"
                    >
                      <span class="text">Entire Site</span>
                    </div>
                  </div>
                </div>
                <input type="text" placeholder="Search..." />
              </div>

The selection feature is not functioning properly, but hopefully someone can resolve it...

For those utilizing react, here is how you can implement it:

import React from 'react'
import { Dropdown, Input } from 'semantic-ui-react'

const options = [
  { key: 'page', text: 'This Page', value: 'page' },
  { key: 'org', text: 'This Organization', value: 'org' },
  { key: 'site', text: 'Entire Site', value: 'site' },
]

const InputExampleActionDropdown = () => (
  <Input
    action={
      <Dropdown button basic floating options={options} defaultValue='page' />
    }
    actionPosition='left'
    placeholder='Search...'
  />
)

export default InputExampleActionDropdown

If the appearance is unsatisfactory and requires CSS, remember to import the necessary styling for HTML or install the relevant package for react :) Cheers! Apologies for the limited assistance, but I hope this aids future searchers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatically resizing font to fit the space available

I am attempting to achieve the task described in the title. I have learned that font-size can be set as a percentage. Naturally, I assumed that setting font-size: 100%; would work, but unfortunately it did not. For reference, here is an example: http://js ...

What is the best way to align the main text to the far left in a Bootstrap 4 cover template?

I am struggling to align the text to the far left of the page instead of it being centered. "Cover your page. Cover is a one-page template for creating elegant and uncomplicated home pages. Customize it by downloading, modifying the text, and inserti ...

Learn the process of applying distinct CSS classes to various elements within an AJAX response

The client initiates an AJAX call via jQuery. Upon fetching data from the database, I return the response which includes the application of numerous classes and styles to various HTML tags. Unfortunately, this process results in code that appears unsightly ...

Any tips on how to personalize the loading animation for single pages using CSS and GIFs?

presentLoading(message) { this.loading = this.loadingCtrl.create({ dismissOnPageChange: false, spinner:'hide', content:`<img class="load" src="assets/dual.gif" />`, }); this.loading.present(); } Hello there! I am working with the ...

Sending Javascript Variable through Form

I'm a newcomer to JavaScript and struggling to solve a particular issue in my script. I need help passing the variable "outVal" to a PHP script when the submit form is clicked. The value of "outVal" should come from the "output" value in the script. I ...

What steps should be followed in order to integrate two themes within a single DOM element while utilizing a ThemeProvider?

<ThemeProvider theme={theme}> My goal is to utilize two themes simultaneously on a single DOM element using a theme provider. style={theme.flexRowLeft} Struggling with incorporating multiple themes at once, I am currently restricted to applying on ...

Tips for updating the value within a textfield in HTML

I am looking to dynamically update the value displayed in my Revenue textfield by subtracting the Cost of Goods from the Sales Price. I have included an image of the current layout for reference, but I want the Revenue field to reflect the updated value af ...

Trigger the onChange event for a number input using JQuery

Regarding the input that has type number: <input type="number" id="input-number" onChange="DoSomething();"/> Is there a way to trigger the onChange event using jQuery? [UPDATE] I was able to achieve this with the following code: $("#input_0").tr ...

How can I make multiple elements change color when hovering with CSS?

Hey there! I have a little design challenge that I need help with. On my website (), I am trying to make multiple elements of a specific item change color when the user hovers over the text. If you hover over the "more" menu item, you'll notice that o ...

Place the button inside the form following another block element

Here is the HTML code I am working with: <div class="actions"> <input id="submit-car" name="commit" type="submit" value="Добавить объявление"> </div> and here is a fiddle example: http://jsfiddle.net/348U4/ In ...

Having trouble customizing a particular view within Angular

I am struggling to customize the background of a specific view in Angular. When I tried to style it with the code below, the entire view disappeared. Here is the relevant code: HTML (index.html): <div class="col-md-8 col-md-offset-2"> <div ng ...

Contrasting the distinctions between a pair of CSS class declarations

After using my customized CSS class named myclass alongside Bootstrap's built-in class container, I have a question about how to declare a div element with both classes. Should I go with: <div class="myclass container">some code</div> o ...

When an HTML input button within a table fails to trigger any jQuery function upon being clicked

I currently have a table set up with multiple rows and columns. <table style="width: 100%;" class='table_result'> <tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td> ...

Ineffectiveness of Less Guard feature

I have a mixin with a guard clause that I've implemented following the provided guidelines. According to the syntax below, @palette should be selected from a list of custom colors and @color should be assigned a value from a specific set. The curren ...

"Is an Ionic Top Navigation Bar the best choice for your

Creating an Ionic Top Navigation Bar Greetings! I am facing some challenges while trying to implement a Top Navigation Bar in my Ionic Project. Despite the lack of documentation on this specific topic, I am struggling to make it work properly. Your as ...

Combine going to an anchor, performing an AJAX request, and opening a jQuery-UI accordion tab all within a

My goal is to have the user click on the hyperlink below, which will (1) anchor to #suggestions, (2) navigate to the url suggestions.php?appid=70&commentid=25961, and (3) open the jquery-ui accordion #suggestions. However, I am facing an issue where c ...

Error: Unexpected end of argument list in file c:/.../list.ejs during ejs compilation

Hello, I am a beginner in programming and I have been working hard to learn. Unfortunately, I encountered a SyntaxError: missing) after argument list in c://.../list.ejs while compiling ejs error and I am struggling to find the solution. I am reaching out ...

The conversion of XML to HTML using setQuery(QString) in QXmlQuery is unsuccessful

Whenever I use the method setQuery(QUrl(file.xsl)), it functions properly. However, if I first load the file into a QString and then invoke setQuery(theString), the subsequent evaluateTo() operation fails (resulting in a boolean exception and empty result) ...

Utilizing Backward and Forward Navigation with AJAX, JavaScript, and Window.History

TARGET Implement Ajax for fetching pages Utilize JavaScript to update the window URL Leverage Window History to preserve Ajax page for seamless forward-backward navigation without reloading the page Modify the Navigation bar's attributes (such as co ...

The straightforward onclick action only functioned once

Looking for assistance: Can someone explain why this code snippet isn't functioning properly? It seems that the increment is only happening once. var player = document.getElementById("player"); var button = document.getElementById("button"); functio ...