oversized user interface selection container

When using semantic-ui for my search form with large input fields, I am facing an issue where the select option field does not adjust its size. I have followed the documentation but it seems like I might be missing something. Can someone help me figure out if I am implementing it correctly?

HTML

<div class="ui large form">

  <div class="four fields">
    <div class="field">
      <select class="large ui dropdown">
        <option value="">All areas</option>
        <option value="1">Chef</option>
        <option value="0">Barman</option>
      </select>
    </div>

    <div class="field">
      <select class="large ui dropdown">
        <option value="">All regions</option>
        <option value="1">New York</option>
        <option value="0">London</option>
      </select>
    </div>

    <div class="field">
      <input placeholder="Ex: Position, etc" type="text">
    </div>

    <div class="field">
      <div class="large ui blue button"><i class="search icon"></i> Search</div>
    </div>
  </div>

</div>
htmlcsssemantic-ui

Answer №1

If you want to customize the style of a large dropdown in your select element, you can do so by adding the following CSS:

min-height: 2.7142em;

Alternatively, you could create a custom dropdown using HTML and JavaScript like this:

<div class="ui selection large dropdown">
    <input type="hidden" name="gender">
    <i class="dropdown icon"></i>
    <div class="default text">Gender</div>
    <div class="menu">
        <div class="item" data-value="1">Male</div>
        <div class="item" data-value="0">Female</div>
    </div>
</div>

To activate the dropdown functionality with JavaScript, use the following code:

$('.ui.dropdown').dropdown();

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

buttons are arranged horizontally, stacked neatly on top of one another

I'm currently working on a setup for toggle buttons using absolute positioning for labels on top of checkboxes. My goal is to have them aligned horizontally, but instead, they are stacking on top of each other. <ul style="display: block; float: le ...

htmlcssbuttoncheckbox

Refresh a page automatically upon pressing the back button in Angular

I am currently working on an Angular 8 application with over 100 pages (components) that is specifically designed for the Chrome browser. However, I have encountered an issue where the CSS randomly gets distorted when I click the browser's back button ...

javascripthtmlangulartypescript

Am I on the right track with incorporating responsiveness in my React development practices?

Seeking advice on creating a responsive page with React components. I am currently using window.matchMedia to match media queries and re-rendering every time the window size is set or changes. function reportWindowSize() { let isPhone = window.matchMed ...

javascripthtmlreactjscss-grid

Submitting forms with Ajax in IE(8)

Sample Google form Related spreadsheet I modified the original code to create two custom forms: First created form Second created form Both forms are functional on most browsers except for IE(8). Any idea why? First form: <!DOCTYPE html> <h ...

javascriptjqueryhtmlajaxforms

What steps do I need to take in order to integrate an mpg video onto my

I am in need of embedding mpg (dvd compliant mpeg2) movie files onto my webpage. Unfortunately, I do not have the ability to convert these videos into any other format. This webpage is solely for personal use, so any solution would be greatly appreciated. ...

phpjavascripthtmlmpeg

How to disable the click handler of a div using only classes

Although I'm not an expert in HTML, I am eager to create a basic bootstrap button in HTML that can be enabled and disabled. My question relates to the following scenario: <div class="button" onClick=doSomething >My Button</div ...

csstwitter-bootstrapbootstrap-4

Does creating a form render the "action" attribute insignificant in an AJAX environment?

When submitting forms exclusively through AJAX, is there any advantage to setting the action attribute at all? I have yet to come across any AJAX-form guides suggesting that it can be left out, but I fail to see the purpose of including it, so I wanted t ...

javascripthtmlajaxformsajaxform

disappearance of background image at bootstrap breakpoint

Hey there, I'm diving into a new journey in web design and I've encountered my first newbie issue. I'm attempting to place an image and text side by side on my web layout, but as soon as the breakpoint hits below 560px, the image disappears ...

htmlcssimagebootstrap-5

What is the best way to incorporate text or characters into your website using CSS only, without using

Will it be able to function in IE? I am aware that IE does not support the content property for anything outside of what? ...

htmlcsstags

Looping through items with ng-repeat and creating a submenu with M

When constructing a menu from a JSON file with submenus using the JQuery.mmenu plugin, I encountered an issue when trying to implement the submenu structure with ng-repeat. The raw HTML approach worked perfectly, but as soon as I introduced ng-repeat to dy ...

javascriptjqueryhtmlangularjsmmenu

space required on the upper side of the cell

I have formatted a text (including title and paragraph) in a cell using CSS styles to achieve the desired appearance. The only thing left is to create some space between the top of the Title and the content below it. I attempted to use the margin parameter ...

htmlcsstagsmarginparagraph

Combining an Image with a CanvasJS Graph and Generating a Downloadable Image of the Composite

I am attempting to combine an image (a background image for my graph) with my canvasJS chart. Once these elements have been merged on a canvas, I aim to obtain a DataURL of this canvas, enabling me to download an image of it (depicting the graph along wit ...

javascriptjqueryhtmlimagecanvas

Continuous addition of Node structures in a tree

I am attempting to append a node tree to the DOM that has been created using createHTMLDocument. Originally, I approached it like this: (doc represents the node tree) while(doc.head.children.length > 0){ iframewin.document.head.appendChild(doc. ...

javascripthtml

Tips for managing an event using the bxSlider callback API

I am currently using bxSlider to create a slideshow on my website. However, I now want to implement a manually controlled slideshow that also displays text content related to each image below the slideshow: Here is the code I have so far: <!--SlideSho ...

javascriptjqueryhtmlsliderbxslider

Tips on how to showcase a picture with the focus on the center by enlarging it within

We have a long frame on the page, with an aspect ratio of about 3.5:1 width to height. However, most of the photos being displayed are in a 4:3 ratio, which is larger and not a proper fit for the frame. The customer really wants the long frame and has no ...

htmlcss

Is there a way to conceal the scrollbar in the mobile view (on a mobile device or emulator) in a React application without disrupting the scrolling functionality?

I am looking to conceal the scrollbar on mobile devices throughout my app while still allowing users to scroll. I have attempted to hide the scrollbar using CSS properties like scrollbar, scrollbar-thumb, scrollbar-thumb:hover, and scrollbar-track. This ...

htmlcssreactjs

Bootstrap allows for the creation of five columns of equal width that span the full width of the container

My PSD template includes a CONTAINER with 5 equal width columns measuring 344px each. I initially opted for Bootstrap to handle responsiveness, but now I'm feeling overwhelmed by the task. Is there a way to tackle this issue, or should I: Revise my ...

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Creating a custom design for input outline borders using CSS3

My CSS3 code is structured as follows: input[type="text"], input[type="date"], textarea, input[type="radio"], input[type="number"], input[type="time"], input[type="password"] { background: #ffffff; /* Old browsers */ /* IE9 SVG, ne ...

htmlformscssinput

bxSlider adds in an empty slide after deleting an image

Whenever I click a link in my navigation, I want to remove certain images from the page. I tried implementing a solution, but now I have two empty spaces where the images used to be. How can I remove those as well? I searched on Stack Overflow for a soluti ...

javascriptjqueryhtmlcssbxslider

How can I determine if a user has reached the end of a non-scrollable div by utilizing HostListener and directives within Angular?

In my Angular project, I have designed a main layout using flex display with specific height and overflow settings. The main content div inside this layout has its own unique styling to ensure consistent appearance for any components inserted within it. By ...

htmlangularscrollangular2-directives