What is the process for incorporating a dropdown field and editable field within a container?

Looking to create a unique setup by incorporating dropdown fields and editable text fields within a designated box, similar to the image provided. Any tips on how to successfully implement this design? https://i.sstatic.net/6tGMp.jpg

Answer №1

Check out this demonstration on jsFiddle https://jsfiddle.net/utnw34d7/

.container {
  background-color: #eaeaea;
  box-shadow: 1px 2px 3px 0px;
}

.customContainer {
  background-color: white;
  box-shadow: -1px 2px 3px -2px;
}


<div class="row m-4">
    <div class="col-12 border p-4 container">
        <div class="row customContainer">
            <label class="fw-bold col-form-label col-auto" for="select1">Dropdown 1:</label>
            <div class="col">
                <select id="select1" class="border-0 form-select">
                    <option>Select</option>
                    <option>...</option>
                </select>
            </div>
        </div>
        <div class="row customContainer mt-3">
            <label class="fw-bold col-form-label col-auto" for="select2">Dropdown 2:</label>
            <div class="col">
                <select id="select2" class="border-0 form-select">
                    <option>Select</option>
                    <option>...</option>
                </select>
            </div>
        </div>
        <div class="row customContainer mt-3">
            <label class="fw-bold col-form-label col-auto" for="text1">Label 1:</label>
            <div class="col">
                <input id="text1" class="border-0 form-control" type="text" value="label1">
            </div>
        </div>
        <div class="row">
            <div class="col-auto ms-auto">
                <a href="#" class="fw-bold text-dark text-decoration-none">+ Add New</a>
            </div>
        </div>
        <div class="row customContainer mt-3">
            <label class="fw-bold col-form-label col-auto" for="text2">Label 2:</label>
            <div class="col">
                <input id="text2" class="border-0 form-control" type="text" value="label2">
            </div>
        </div>
        <div class="row">
            <div class="col-auto ms-auto">
                <a href="#" class="fw-bold text-dark text-decoration-none">+ Add New</a>
            </div>
        </div>
    </div>
</div>
<div class="row mt-4">
    <div class="col-auto mx-auto">
        <button class="btn btn-primary me-2">Button 1</button>
        <button class="btn btn-primary ms-2">Button 2</button>
    </div>
</div>

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

Verifying the presence of an image via its URL may not be functional across all browsers

Hey folks, I'm working on a project that involves displaying an image along with other fields in a loop where the image source changes with each iteration. I also need to check if the image exists and set a default source if it doesn't. The code ...

Inquiring about the usage of div elements in constructing an HTML webpage

When designing my own web pages, I consistently encounter issues with using divs for a multi-column layout. Despite utilizing the float attribute to align columns left or right, resizing the browser window often causes them to stack on top of each other an ...

Using Lodash to Substitute a Value in an Array of Objects

Looking to update the values in an array of objects, specifically the created_at field with months like 'jan', 'Feb', etc.? One way is to loop through using map as demonstrated below. However, I'm curious if there's a more co ...

Exploring ways to query a mapped array in React Native

Struggling to search a mapped list in react native? While using a Flatlist would be easier, this task is currently causing me major frustration. If anyone has any insights or solutions, please share them! Here's a snippet of the code: import React ...

How can I incorporate margins or adjust scaling within dompdf?

After creating a PDF using dompdf with the paper size set to A6, I am experiencing issues when trying to print it on A4 and letter paper sizes. The left and top borders are being cut off. Is there a way to generate a PDF that is compatible with A4, A6, l ...

Guide to refreshing extensive dataset using MySQL migration scripts

We are in the process of developing a Nodejs application for a client who has requested that we use migration scripts to streamline updating the production database. As someone new to MySQL, I am struggling with how to update table contents using only MySQ ...

What is the best way to set the theme for Material-UI in a React application?

I find myself puzzled when it comes to styling a front-end based on Material-UI. Can someone clarify where the theme originates from in the following example code and what impact the theme has? import React from "react"; import Container from "@material- ...

Changing the height of tablerows in Material UI v5: A step-by-step guide

I am attempting to adjust the height of the rows in this material-ui code example. import * as React from "react"; import { styled } from "@mui/material/styles"; import Table from "@mui/material/Table"; import ...

Creating TypeScript Classes - Defining a Collection of Objects as a Class Property

I'm trying to figure out the best approach for declaring an array of objects as a property in TypeScript when defining a class. I need this for a form that will contain an unspecified number of checkboxes in an Angular Template-Driven form. Should I ...

Tips for utilizing New FormData() to convert Array data from an Object for executing the POST request with Axios in ReactJs

When working on the backend, I utilize multer to handle multiple file/image uploads successfully with Postman. However, when trying to implement this in ReactJS on the frontend, I find myself puzzled. Here's a sample case: state = { name: 'pro ...

Is there a way to adjust the label size for a material ui TextField component?

My TextField element is defined like this: <TextField id="standard-with-placeholder" label="First Name" className={classes.textField} margin="normal" /> It currently appears as shown in the image below: https://i.sstatic.net/aYi1a.png How ...

While attempting to troubleshoot a program with mocha using the --debug-brk flag, it turns out that the debugging process actually

After setting up an open source project, I found that the mocha tests are running successfully. However, I am facing a challenge when trying to debug the functions being called by these tests. Every time I attempt to debug using 'mocha --debug-brk&apo ...

Error encountered while parsing Google Map link in Razor.Parse

Situation Within my application, I am utilizing Razor.Parse<>() to parse text, links, and tags to HTML. string Razor.Parse<TEmail>(string razorTemplate, TEmail model) where TEmail : BaseEmail I utilize the symbol '@' to extract dat ...

Having trouble with finding the correct object in an array of objects using indexOf and splice()?

Here is an example of an array of objects: "followers": [ { "id": "1be87842-2f7f-4e3b-8fde-9a998feb3a01", "bug_id": "4ae2707b-07ef-4e07-95da-77855c67fece", "user_id": "e9e81aa2-4994-483d-a3a7-3b88491f1fda", ...

showing console logs before initializing preferences may lead to inaccurate results

My Content Management System (CMS) is WordPress. Recently, after making some changes, I encountered an error on a specific page: An error occurred: loading pref showConsoleLogs before prefs were initialised, leading to incorrect results being displayed - ...

Combining Summernote images with Node.js using Express.js

While there are numerous solutions available for handling the Summernote file-upload in PHP, I have struggled to find a satisfactory solution for Node.js. Here is My JavaScript: $(document).ready(function() { // $('#summernote').summernote( ...

What is the best way to access the Node.js HelloWorld File that I created with a .js extension?

I am currently going through the materials at "NodeBeginner.org". Despite my limited experience with command line, I am struggling to execute my first file. The only success I've had so far is running "console.log('helloworld');" by typing ...

The function 'downloadFunc' is not recognized as a valid function within the context of ReactJS custom hooks

Here is a unique custom hook that triggers when the user presses a button, calling an endpoint to download files as a .zip: import { useQuery } from 'react-query'; import { basePath } from '../../config/basePath'; async function downlo ...

Uploading files on a web page using AJAX technology

I'm attempting to perform a file upload on an ajax response page. The main.php file contains basic ajax code as shown below: <html> <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if ...

Multiple executions of Ajax callback detected

I am trying to utilize an ajax-call to a script that searches for numbers. The response is expected to be a json array containing names and surnames as strings. However, I am facing an issue where the script seems to be looping and sending multiple respons ...