The dropdown next to the text area does not seem to be functioning properly

Question

The dropdown next to the text area does not seem to be functioning properly

Hello everyone, I am attempting to align a textarea, an image upload button, and a select dropdown all in the same line as shown in the image below. https://i.sstatic.net/8Ws0m.png

Here is my current code:

<div class="col-md-10 div_qtype">
   <textarea name="question_text" class="question_text"></textarea>
   <input name="Select File" type="file" />
   <select id='question_options'>
     <option value="0">Multiple Choice</option>
     <option value="1">Check Box<option>
     <option value="2">Passing on to a client</option>
   </select>
</div>

However, my design currently looks like this:

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

Could anyone provide guidance on how to achieve the desired design? Thanks in advance.

html css bootstrap-4

Answer 1

Answer №1

This information may be beneficial to you. You could also use an img tag instead of a button.

Source : https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

const fileSelect = document.getElementById("fileSelect"),
  fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
}, false);

<input type="file" id="fileElem" multiple accept="image/*" style="display:none">
<button id="fileSelect" >button or could be img</button>

Answer 2

This information may be beneficial to you. You could also use an img tag instead of a button.

Source : https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

const fileSelect = document.getElementById("fileSelect"),
  fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
}, false);

<input type="file" id="fileElem" multiple accept="image/*" style="display:none">
<button id="fileSelect" >button or could be img</button>

The dropdown next to the text area does not seem to be functioning properly

Answer №1

Similar questions

Is there a way to automatically send users to a different PHP file once they click "submit"?

The collapsible hamburger navbar is unresponsive and fails to collapse

What is the best way to center buttons beneath a navbar that has been expanded for small screens using navbar-expand

Ways to troubleshoot and resolve the jQuery error with the message "TypeError: 'click' called"

Implementing slideDown() functionality to bootstrap 4 card-body with jQuery: A step-by-step guide

HTML containers continue to show gaps even with no margin or padding applied

How can I use jQuery to pre-select an option in two connected dropdown lists that are populated with JSON data?

How can a Spinner be incorporated into a Button within a Modal while running in the background?

Turn off column wrapping in Bootstrap 4

What is preventing my accordion from closing completely?

Guide on placing an <img> within a navigation bar

Table design variation for desktop and mobile display

Utilize MySQL to populate highcharts with data

A one-page digital space that functions as a dynamic slide show

Check out this awesome tip: Enhancing your styles with Regex for maximum specificity detection in

Unlocking the Power of jQuery's toggle Method for Dynamic Functionality

Alter hyperlink colors according to <spans>

"Creating a Customized Justified Navigation Menu with Bootstrap

Apply a specific class to the input field when the name matches x

Is it possible for a "position:absolute" div to maintain its relative width?