Is there a way to initiate an Angular event when clicking on an HTML input element within a Bootstrap 4 input-group?

Within my Bootstrap 4 input group, there is a prepended title along with two input fields. The structure looks like this:

    <div class="input-group" (click)="openDoc()">
      <div class="input-group-prepend input-group-prepend-split rounded-0">
          <label class="input-group-text rounded-0 bg-white">Name</label>
      </div>
      <input type="text" class="form-control rounded-0" value="{{_transaction.originalDoc?.name}}" disabled>
      <input type="text" class="form-control rounded-0 link" value="{{_transaction.doc?.name}}" disabled>
   </div>

I am trying to trigger the (click)="openDoc()" event specifically on the second input field that displays {{_transaction.doc?.name}}. However, I'm facing difficulty as the event only fires when applied to the wrapper input-group. It seems like the element is blocking the input. Is there any CSS workaround or Bootstrap solution that can help me overcome this issue?

htmlcssangularbootstrap-4

Answer №1

Successfully resolved! The problem was identified as the disabled attribute on my inputs, completely unrelated to Bootstrap or the wrapper div.

By removing the disabled attribute, the event was able to trigger properly.

UPDATE: If you're facing this issue, simply swap out 'disabled' for 'readonly' on the input to resolve it. This adjustment will make the link within the input clickable while preventing any edits to the input field itself.

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

Is there a way to set the menu to automatically open when the page loads?

Looking for some help with a slide out menu that I want to be always open and cannot be closed. I tried changing the open=true setting to open=false but it didn't work as expected. Here's the code snippet below. I aim to remove the open and close ...

javascripthtmlcss

Activate browser scrollbar functionality

Below is the HTML code snippet: <html> <head> <style> #parent { position : absolute; width : 500px; height : 500px; } #top { position : absolute; width : 100%; height: 100%; z-index : 5; } #bottom { position : absolute; width : 100%; ...

javascripthtmlcss

Tips on implementing a script injected through the JS console to update form data in an Angular webpage and ensure that the changes are successfully saved

I am currently working on enhancing an existing electron app integrated with Angular. The main goal is to inject a script once the application is loaded in order to add a hotkey for efficiency. This hotkey should automatically click an edit button, input s ...

javascriptangular

Is there a way to prevent a background video from automatically playing whenever the user navigates back to the home page?

Recently, I was given a design that requires a background video to load on the home page. Although I understand that this goes against best practices, the client has approved the design and now I need to come up with a solution. The video is already in pla ...

javascriptjqueryhtmlcssvideo

Modify the styling of the initial picture in a Google Drive file

Having an issue.. I am working on a website where each page is managed through Google Drive. I need to change the CSS styling of only the first image on one specific page. Using :first-child won't work because the HTML structure contains "p > span ...

javascriptjquerycssgoogle-drive-api

Is there a way to efficiently update the template within the *ngFor directive when working with an array of objects in Angular 2/

My Json Object is structured as follows: var obj = { "TimSays":"I can Walk", "RyanSays":"I can sing", "MaxSays":"I can dance", "SuperSays":"I can do it all" } To iterate through this object in the template, I am using a pipe helper due to ...

angularngforangular-pipe

ways to clear the float on the right side of an image

So I have two images that I am trying to float, like this: img{ float:left; clear:right; } <img src='http://img1.imgtn.bdimg.com/it/u=1005212286,2432746147&fm=21&gp=0.jpg' alt=''><br> <img src ...

htmlcss

How can HTML and CSS be linked to display images independently?

Check out this code: body{ background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg'); } div.header{ background-color:#F0F8FF; text-align:center; padding:3px; ...

javascriptjqueryhtmlcss

Tips for creating a mobile-friendly Bootstrap carousel that is both scalable and zoomable while maintaining the default slide functionality

I have a website using Bootstrap 4.x carousel. The layout is user-scalable with the following viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, shrink-to-fit=no">. Currently, users can pinch to z ...

csstwitter-bootstrapbootstrap-4

Is it possible to arrange JSON Objects vertically on a webpage using tables, flexboxes, divs, and Javascript?

Within my JSON data, I have multiple products defined. My goal is to loop through this JSON and display these products side by side on a web page for easy comparison. Initially, I envision structuring them in columns and then rows: https://i.sstatic.net/K ...

javascripthtmlcsshtml-tableflexbox

What could be causing my line-clamp to malfunction when using a fixed height in the Safari browser?

I have a problem with the design of my episode list on mobile devices. The list has a fixed height, and I am using the line-clamp-2 property for the episode titles that exceed two lines. While everything looks fine on my PC and even when using Dev Tools t ...

cssiossafaritailwind-css

Incorporating a swisstopo map from an external source into an Angular

I am looking to integrate a swisstopo map into my angular 8 app. As I am new to angular, I am unsure how to include this example in my component: I have tried adding the script link to my index.html file and it loads successfully. However, I am confused a ...

javascriptangulartypescript

When removing a specific option from a dropdown menu, the default selection is chosen instead of the

So I have a select element that initially had multiple options selected. After I manipulated it with my code, only one option remains selected, but because I removed the previous selections, the default option is now being shown instead of the next selecte ...

javascriptjqueryhtml

Storing HTML elements in a database using jQuery's html() method

I have encountered a dilemma that has left me stumped after extensive online research. I have a dynamically generated webpage and need to save the entire appended body of the page to a database using PHP and MySQL. My current approach involves using the fo ...

javascriptphpjqueryhtmlmysql

What is the best way to ensure that Bootstrap 4 card decks have consistent widths on each row

I have a layout where I am displaying four cards in each row using a card deck: <div class="row"> <div class="card-deck"> <!-- Four of these --> <div class="card"> <img class="card-img-top img-adjusted" > ...

htmlcsstwitter-bootstrapbootstrap-4

Conflicting elements in Drupal's Flexslider causing a disruption

Having some trouble getting Flexslider to work on my website. I've searched through forums and the project page but couldn't find any solutions that worked for me. I installed it on another site without any issues, so I think this might be a uniq ...

jquerycssdrupaldrupal-7flexslider

Ways to correct inverted text in live syntax highlighting using javascript

My coding script has a highlighting feature for keywords, but unfortunately, it is causing some unwanted effects like reversing and mixing up the text. I am seeking assistance to fix this issue, whether it be by un-reversing the text, moving the cursor to ...

javascripthtmlcsstextinnerhtml

Bootstrap 3 Implementation of a Clear Navbar

I'm trying to create a transparent navbar using the code below: <div class="navbar navbar-default navbar-fixed-top" style="top:50px; background:transparent;"> <div class="navbar-inner"> <div class="container"> <ul cla ...

csstwitter-bootstrap

Adjust the size of the child div to fit the remaining space within the parent div

I'm dealing with a situation where there are two child divs inside a parent div. The first child div takes up 32% of the width, while the second child div takes up 68% of the width. If I were to set the display of the first child div to "none", how ca ...

htmlcss

Looking to enhance this JavaScript code for updating an object's description - any tips on optimization?

I have a list of group items, with 7 items per column. Each item has an id, such as #a1, #b2, etc. I am using the Simple Slider plugin to display two columns on each slide: one with the list and one with the description #descr. I am looking for a more effi ...

javascriptjquerybootstrap-4