Angular material input featuring an additional component

Trying to integrate an additional text element next to an input using angular-material. The goal is to replicate the functionality of bootstrap's .input-group-addon:

The closest approach achieved so far can be seen in this example:

<md-content layout-padding>
    <div layout="row" class="md-whiteframe-z1" style="width: 40%">
        <md-select placeholder="Type" ng-model="discount.type" flex="50" class="md-select-full-width">
            <md-option value="AMOUNT">Amount</md-option>
            <md-option value="PERCENT">Percent</md-option>
        </md-select>
        <div flex="50" layout="row" layout-align="center center">
            <md-input-container flex>
                <label>Value</label>
                <input ng-model="discount.value">
            </md-input-container>
            <span>%</span>
        </div>
    </div>
</md-content>

This setup currently results in misalignment between the two fields.

An attempt was made to apply vertical-align directly to the <span>%</span> instead of using layout-align="center center", but it seems to have no effect.

csstwitter-bootstrap-3material-designangular-material

Answer №1

I managed to solve the issue with the help of <md-icon>:

<md-content layout-padding>
    <div layout="row" class="md-whiteframe-z1" style="width: 40%">
        <md-select placeholder="Type" ng-model="discount.type" flex="50" class="md-select-full-width">
            <md-option value="AMOUNT">Amount</md-option>
            <md-option value="PERCENT">Percent</md-option>
        </md-select>
        <div flex="50" layout="row">
            <md-input-container flex>
                <label>Value</label>
                <input ng-model="discount.value">
            </md-input-container>
            <md-icon md-font-set="regular-font">%</md-icon>
        </div>
    </div>
</md-content>

The "regular-font" is a fictional icon font library used to prevent the content inside <md-icon> from being recognized as a Material icon.

Now everything is properly aligned:

You can view the functional solution here: http://codepen.io/LukaszWiktor/pen/oXoqYg

Answer №2

I recently discovered a method to customize add-ons in a way that allows for more than just a single character, utilizing flexbox.

<md-input-container flex>
    <label>Length</label>
    <input type="number" ng-model="length" flex="80">
    <span flex>seconds</span>
</md-input-container>

The key components here are flex="80" on the input element and flex on the span. This configuration instructs the input to occupy 80% of the available space and the span to take up the remaining percentage (or so I believe - still gaining familiarity with flexbox).

As a result, the end product appears as follows:

https://i.stack.imgur.com/B6t6i.png

Answer №3

I enhanced the appearance to reflect a design similar to Bootstrap in this manner:

<md-input-container class="md-block">
     <label for="discount">Discount</label>
     <input style="text-align: right; padding-right: 15px;" type="text" id="discount" ng-model="discount" ng-change="updateDiscount()">
     <span style="margin-top: 5px; position: absolute; right: 0;">%</span>
</md-input-container>

Here is a screenshot for your reference:

https://i.stack.imgur.com/PVLtA.png

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 best way to use PHP to call an ACF variable and substitute a nested HTML element?

Utilizing the repeater field in Wordpress' advanced custom fields, I have made the content on my site dynamic. View an image of the static markup here The following is how I structured the content using plain HTML: <div class="container" ...

phphtmlcsswordpressadvanced-custom-fields

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

I'm working on an Angular project where I've implemented a navbar component. The navbar is responsive and includes a toggle button that appears when the browser window is resized. This button allows users to hide or display the menus. One issue ...

htmlcssangulartypescriptbootstrap-4

Show the image on top of the div block as the AJAX content loads

Implementing this task may seem easy and common, but I am struggling to figure it out! What should take five minutes has turned into an hour of frustration. Please lend me your expertise in getting this done. I have a div container block: <div cla ...

javascriptjqueryhtmlcssajax

Customizing the CSS shadow for a specific ionic select text color, while ensuring that other ion select instances remain unaffected

I'm encountering an issue while attempting to customize the text color inside an ion select element based on the option selected. Unfortunately, when I make changes to the shadow part in one component, it affects other components as well. I want to ap ...

cssreactjsionic-frameworkshadow-dom

The webpage fails to return to its original position after the script has been executed

My website has a sticky div that stays at the top when scrolling down, but does not return to its original position when scrolling back up. Check out this example function fixDiv() { var $div = $("#navwrap"); if ($(window).scrollTop() > $div.data("top ...

javascriptjquerycss

Is there a way to modify the color of ASCII art letters within HTML's <pre> tags?

For this illustration, I aim to transform the letter "y" into a shade of blue. ,ggggggggggggggg dP""""""88""""""" Yb,_ 88 `"" 88 88 88 gg gg 88 I8 8I gg, 88 ...

htmlcssasciiascii-art

Retrieve the element that is currently being hovered over within the same nested selector

I am facing a challenge in selecting the currently hovered element with a nested selector. The ".frmElement" class is used as the selector. When I hover over the ".frmElement" element at a certain level, all the previous selector elements display the hover ...

javascriptjqueryhtmlcss

What is the best way to position a logo and navbar in alignment?

I'm still learning the ropes here. I'm having trouble getting the navbar to align with the logo because margin-top/bottom doesn't seem to be working for some reason. <HTML> <HEAD> <link href="style.css" rel="stylesheet"&g ...

htmlcss

Combine two FontAwesome icons in a stacked manner

Is there a way to group 2 icons together and display them one above the other? I attempted to use the fa-stack class, but the images are overlapping. How can I achieve this layout? <span class="fa-stack fa-lg"> <i class="fa fa-envelope fa-stack ...

cssfont-awesome

How to set a canvas as the background of a div element

Check out my code snippet below: <!DOCTYPE html> <html> <body> <div id='rect' style='width:200px;height:200px;border:1px solid red'> </div> <canvas id="myCanvas" style="borde ...

javascripthtmlcsscanvas

Mastering the art of calculating the width for a responsive scroll menu

I found a useful tutorial on building a scrolling menu for smaller screen sizes. You can check it out here. However, I encountered an issue when trying to add a border width element. Whenever I define the width, it overrides the scrolling: auto; element. ...

htmlcss

Forgot to include a semicolon in your code? If you attempted to parse SCSS using the regular CSS parser, give it another shot but this time with the

I am currently working on an Angular 14 project and one of my tasks involves changing the default font to our company's specific font. We are utilizing Angular material components and styles, so it is important for me to not only set the default font ...

angularsassangular-material

Exploring the world of CSS font families in Sublime Text 3 and linking them to the web

Is there a way to connect a font from the internet (such as those on Google Fonts: ) to my Sublime Text CSS file? I have tried linking it to an HTML file that is already linked to my CSS code, but it hasn't been successful. ...

htmlcsssublimetext3font-family

Scale transformation - I am aiming for it to exceed the limits, yet it remains contained within

Currently, I am working on enhancing my carousel by implementing a zoom effect when hovering over the images. However, I have encountered an issue where the image gets hidden within the div container and doesn't overflow as expected. I tried adjusting ...

javascriptcssreactjsnext.jssass

What is the best way to adjust the size of a button using CSS within a ReactJS

I am facing an issue where I need to create a button with a specific width, but the template I'm using already has predefined styles for buttons. When I try to customize the button's style, nothing seems to change. Below is the code snippet: Her ...

javascriptcssreactjs

Attempting to emulate the grid showcase using flexbox styling

Creating this layout using CSS Grid was a breeze. However, I wonder if it can be achieved with Flexbox. What do you think? .Message { display: inline-grid; grid-template-areas: ". name""date text"; } .Date { align-items: ...

htmlcss

Exchange one HTML element with a different HTML element

I've been attempting to change an HTML tag using PHP or jQuery. The current default tag is: <li class="dropdown"> <a href="index.html" class="dropdown-toggle"> Home</a></li> My desired replacement for the above HTML tag is: ...

javascriptphpjqueryhtmlcss

Mastering image focus with javascript: A comprehensive guide

On my HTML page, I have two images and a textbox. I want the focus to shift between the images based on the first character entered in the textbox. For example, when the user types '3', the first image should be focused, and for '4', th ...

javascripthtmlcss

How can I position text next to an input within a <td> element in a vertical arrangement?

Below is the HTML code: <fieldset><legend>Callout Report</legend> <table> <tr><td>Start Time</td><td> <input type="text" id="startTimeUI" autocomplete="off" /> </td></tr> <tr><td& ...

htmlcsshtml-tablemultiple-columns

Centering an Image of Unspecified Dimensions Both Vertically and Horizontally with Hover Effect on Anchor

To achieve both horizontal and vertical centering of an image with unknown dimensions, I need to use max-width and max-height to constrain it within a container size of 101x84. Additionally, I want the image to display an icon in the middle when hovered ov ...

htmlcss