Dropdown element with PrimeNG adorned with a span

I am trying to create a simple form with text inputs and dropdowns. I have successfully implemented the textInput, but I am struggling with the dropdowns.

Below is the code that I have so far:

 <div class="p-grid p-dir-col p-offset-2">

      <div class="ui-g ui-fluid">
        <div class="ui-md-10">
          <div class="ui-inputgroup">
            <span class="ui-inputgroup-addon" style="width:280px">Text</span>
            <input type="text" pInputText placeholder="abcdef">
          </div>
        </div>
      </div>

      <div class="ui-g ui-fluid">
        <div class="ui-md-10">
          <div class="ui-inputgroup">                
            <span class="ui-inputgroup-addon" style="width:280px">Dropdown</span>
            <p-dropdown [options]="options" optionLabel="value"></p-dropdown>
          </div>
        </div>
      </div>

</div>

However, the dropdown does not align properly with the width of the span. Here is an image showing the issue:

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

edit

  <div class="p-grid p-dir-col p-offset-2">

      <div class="ui-g ui-fluid">
        <div class="p-col p-md-10">
          <div class="ui-inputgroup" fxLayout="row">
            <div fxFlex class="p-col p-md-4">
              <span class="ui-inputgroup-addon" style="width:100%">Text</span>
            </div>
            <div fxFlex class="p-col p-md-8">
              <input type="text" pInputText placeholder="abcdef">
            </div>
          </div>
        </div>
      </div>

      <div class="ui-g ui-fluid">
        <div class="p-col p-md-10">
          <div class="ui-inputgroup" fxLayout="row">
            <div fxFlex class="p-col p-md-4">
              <span class="ui-inputgroup-addon" style="width:100%">Dropdown</span>
            </div>
            <div fxFlex class="p-col p-md-8">
              <p-dropdown [options]="options" optionLabel="value"></p-dropdown>
            </div>
          </div>
        </div>
      </div>

    </div

The alignment has improved, but I want the span to be equally aligned with the input/dropdown. Also, there is too much margin between the rows.

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

htmlcssangularprimeng

Answer №1

If you're looking to create a responsive layout, consider utilizing Flex Layout

<div class="p-grid p-dir-col p-offset-2">

  <div class="ui-g ui-fluid">
    <div class="ui-md-10">
      <div class="ui-inputgroup" fxLayout="row">
        <div fxFlex><span class="ui-inputgroup-addon" style="width:280px">Text</span></div>
        <div fxFlex><input type="text" pInputText placeholder="abcdef"></div>
      </div>
    </div>
  </div>

  <div class="ui-g ui-fluid">
    <div class="ui-md-10">
      <div class="ui-inputgroup" fxLayout="row">                
        <div fxFlex><span class="ui-inputgroup-addon" style="width:280px">Dropdown</span></div>
        <div fxFlex><p-dropdown [options]="options" optionLabel="value"></p-dropdown></div>
      </div>
    </div>
  </div>

Please note that the code has not been tested, so feel free to make adjustments as needed.

Answer №2

  <div class="ui-g ui-fluid">
    <div class="p-col p-md-10">
      <div class="ui-inputgroup" fxLayout="row">
        <div fxFlex class="p-col p-md-4">
          <span class="ui-inputgroup-addon" style="width:100%">Text</span>
        </div>
        <div fxFlex class="p-col p-md-8">
          <input type="text" pInputText placeholder="abcdef">
        </div>
      </div>
    </div>
  </div>

  <div class="ui-g ui-fluid">
    <div class="p-col p-md-10">
      <div class="ui-inputgroup" fxLayout="row">
        <div fxFlex class="p-col p-md-4">
          <span class="ui-inputgroup-addon" style="width:100%">Dropdown</span>
        </div>
        <div fxFlex class="p-col p-md-8">
          <p-dropdown [options]="options" optionLabel="value"></p-dropdown>
        </div>
      </div>
    </div>
  </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

What is the reason behind HTML5 Canvas drawing layering a fresh path onto the current path with each new point added?

Trying to explain the issue is a bit challenging, which is why I created a JS Fiddle to demonstrate what's happening: http://jsfiddle.net/dGdxS/ - (Only compatible with Webkit browsers) When you hover over the canvas, you can draw, but you may need to ...

htmlcanvasdrawing

Having trouble with rendering components in React and Bootstrap?

Attempting to display basic Bootstrap components using React. This corresponds to the index.html file: <!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="j ...

javascripthtmltwitter-bootstrapreactjs

The issue of PHP timing out occurring within a public function

After pulling a "large" SQL query from the database with 50,000 records and completing it in about 5 seconds, I run it through a function to create an HTML table. However, the process keeps timing out for some reason. If I limit the query to less than 30k ...

phphtmlfunction

Creating a Vertical Stack of Three Divs in ReactJS

Just Getting Started: As a newcomer to ReactJS and web development in general, I've put effort into researching my question without success. I acknowledge that the solution might be simpler than I think, so I apologize in advance if it turns out to b ...

htmlcssreactjsmaterial-ui

Django is refusing to display my CSS and JavaScript files - static files

Within my code in settings.py, I define the static URL like so: STATIC_ROOT = os.path.join(BASE_DIR, "static") STATIC_URL = '/static/' The location of my static files and folders is at /home/myLinuxUsername/myApp/static/interactive-preview-depe ...

pythonhtmlcssdjango

Angular 2 fails to apply active class colors to tabs in a modal popup

https://i.sstatic.net/T8lIu.pnghttps://i.sstatic.net/O21ZO.pngIn my modal popup, I have multiple tabs in the modal body. The issue I am facing is that when the modal is invoked, the active tab color is not being applied. The modal itself is built using ngx ...

angularangular-material2ngx-bootstrap

Issue with making a call to retrieve an image from a different directory in ReactJS

This is how it appears <img className='imgclass' src={"../" + require(aLc.value)} alt='' key={aLc.value} /> I am trying to create a path like ../m/b/image.jpg, where aLc.value contains the path /m/b/image.jpg. I need to add only ...

javascripthtmlcssreactjswebpack

Using R for web scraping, I encountered a unique situation where the 'next page' button was only programmed to navigate to the top of the page

I am attempting to extract the headline snippets from a local newspaper's articles by utilizing rvest and RSelenium. To access pages beyond the initial one, I need to click on the 'next page' button. Strangely, when I perform this action thr ...

jqueryhtmlrweb-scrapingclick

What could be causing my website to extend beyond 100% width?

I've been working tirelessly on solving this issue for the past week, but unfortunately, I haven't had any luck finding a solution. The problem arose as I was designing a launch page for a program that my friend is developing. Despite setting the ...

htmlcssweb

How can we prevent new chips (primeng) from being added, but still allow them to be deleted in Angular 2?

Hey there! I'm currently exploring how to make the chips input non-editable. I am fetching data objects from one component and using the keys of those objects as labels for the chips. Check out my HTML code below: <div class="inputDiv" *ngFor="le ...

angulartypescriptprimeng

What could be causing my function to fail after pressing the button?

I am new to coding in HTML and JS and attempted to create a button that combines two strings into one when clicked. Can someone please review my code and point out where I may have made an error? <!DOCTYPE html> <html> <body> ...

javascripthtml

Dynamically size and position elements to fit perfectly within the container

I am currently facing a challenge with my absolutely positioned elements that have different position.top and height values generated from the database. The main goal is to resolve collisions between these elements by shifting them to the right while adju ...

javascriptjquerycssjquery-collision

Passing a click event to a reusable component in Angular 2 for enhanced functionality

I am currently working on abstracting out a table that is used by several components. While most of my dynamic table population needs have been met, I am facing a challenge with making the rows clickable in one instance of the table. Previously, I simply ...

javascripthtmlangulartypescriptevent-handling

Avoid Scrolling within an iFrame in HTML with the Use of #

I have a menu loading in an iframe with links using # like http://<location>/page.html#part1. When I click inside the iframe, the entire page outside of the iframe scrolls to the location of #. How can I stop this from happening? I only want the me ...

javascripthtmlcss

Adding a timestamp to an array in Angular/Typescript services

I've been struggling with adding a timestamp OnInnit to track the time a user visited a page. I want to include the timestamp in an array within my services, but I keep encountering errors and can't seem to figure it out on my own. Any assistance ...

arraysangulartypescriptservicetimestamp

Tips for utilizing identical properties across numerous styled elements:

Utilizing the styled-components library, I have enhanced the header components from the Blueprintjs library. The current template for the H6 component appears as follows: export const DH6 = styled(H6)` color: ${(props) => (props.white ? "white&qu ...

javascriptcssreactjsreact-nativestyled-components

How to properly format credit card input using JavaScript or jQuery

I need to implement a feature where users input their credit card information, and once they complete the form, I want to display the credit card number in this format: xxxxxxxxxxxx1111 or xxxx-xxxx-xxxx-1111, without altering the actual input value. Is ...

javascriptjqueryhtmlinput

Issue with header background images not showing up in Safari browser

On my website, the top header background and the background of the "Kreation Team" Div are not appearing on Safari for iPads and iPhones, but they are visible on iMacs and MacBooks. The background images do not show up on smaller devices. If you compare C ...

htmlcsstwitter-bootstrapmobile-safari

Ensure that a span within a cell table has a height of 100%

Is there a way to have the span element expand to full height? Click here <table class="table table-condensed table-hover table-striped"> <thead> <tr> <th class="shrink"></th> <th class ...

csstwitter-bootstrap

Explore the diverse webpages on my website

My website is built in html+css and the main content is contained within a div with the id "content" on index.html. There's a link on the menubar that leads to page2.php, but I want the content of page2.php to be displayed inside the <div "content" ...

phphtmlweb