displaying a pair of inputs next to each other

Is it possible to display two input fields side by side? I am using Angular's matInput forms, but struggling to position the second input next to the first.

What I would like to achieve is to have "input1 , input2" on the same line. Here is my code:

<div *ngIf="data.mod=='goLocation'" class="panel-body">
  <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
    <table>
      <tr>
        <td>
          <mat-form-field>
            <input matInput placeholder="Longitude(X)" name="lon" id="lon" #lon="ngModel" ngModel required>
            <mat-error *ngIf="lon.touched && lon.invalid">
              <div *ngIf="lon.errors.required">Please fill out this field.</div>
            </mat-error>
          </mat-form-field>
        </td>
      
        <td>
          <mat-form-field>
            <input matInput placeholder="Latitude(Y)" name="lat" id="lat" #lat="ngModel" ngModel required>
            <mat-error *ngIf="lat.touched && lat.invalid">
              <div *ngIf="lat.errors.required">Please fill out this field.</div>
            </mat-error>
          </mat-form-field>
        </td>
        
      </tr>
    </table>
    <button [disabled]="!f.valid" class="btn btn-outline-primary">Go</button>
  </form>
</div>

Answer №1

Your table arrangement could be improved by placing both columns in the same row rather than separate rows. Consider restructuring it like so:

<table>
 <tr>
  <td>1st column</td>
  <td>2nd column</td>
 </tr>
</table>

By implementing this change, the 1st and 2nd columns will appear inline with each other.

Answer №2

Give this a try.

<div *ngIf="data.mod=='goLocation'" class="panel-body">
        <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
            <table>
                <tr>
                    <td>
                        <mat-form-field>
                            <input matInput placeholder="Longitude(X)" name="lon" id="lon"
                                   #lon="ngModel" ngModel required>
                            <mat-error *ngIf="lon.touched && lon.invalid">
                                <div *ngIf="lon.errors.required">Please fill in this field.</div>
                            </mat-error>
                        </mat-form-field>
                    </td>
                     <td>
                        <mat-form-field>
                            <input matInput placeholder="Latitude(Y)" name="lat" id="lat"
                                   #lat="ngModel" ngModel required>
                            <mat-error *ngIf="lat.touched && lat.invalid">
                                <div *ngIf="lat.errors.required">Please fill in this field.</div>
                            </mat-error>
                        </mat-form-field>
                    </td>
                </tr>

            </table>
            <button [disabled]="!f.valid" class="btn btn-outline-primary">Go</button>
        </form>
    </div>

Answer №3

 <div *ngIf="data.mod=='goLocation'" class="panel-body">
            <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
                <table>
                    <tr>
                        <td>
                            <mat-form-field>
                                <input matInput placeholder="Longitude(X)" name="lon" id="lon"
                                       #lon="ngModel" ngModel required>
                                <mat-error *ngIf="lon.touched && lon.invalid">
                                    <div *ngIf="lon.errors.required">This field cannot be empty.</div>
                                </mat-error>
                            </mat-form-field>
                        </td>
                        <td>
                            <mat-form-field>
                                <input matInput placeholder="Latitude(Y)" 
                                       name="lat" id="lat"
                                       #lat="ngModel" ngModel required>
                                <mat-error *ngIf="lat.touched && 
    lat.invalid">
                                    <div *ngIf="lat.errors.required">This 
    field cannot be empty.</div>
                                </mat-error>
                            </mat-form-field>
                        </td>
                    </tr>
                    <tr>
                        
                    </tr>
                </table>
                <button [disabled]="!f.valid" class="btn btn-outline-
    primary">Go</button>
            </form>
        </div>

Answer №4

It is recommended to enclose both the button's td within a single tr.

Code Snippet

<div *ngIf="data.mod=='goLocation'" class="panel-body">
  <form #f="ngForm" (ngSubmit)="go(f.value); f.reset();" class="settings-form">
    <table>
      <tr>
        <td>
          <mat-form-field>
            <input matInput placeholder="Longitude(X)" name="lon" id="lon" #lon="ngModel" ngModel required>
            <mat-error *ngIf="lon.touched && lon.invalid">
              <div *ngIf="lon.errors.required">You cannot leave this field empty.</div>
            </mat-error>
          </mat-form-field>
        </td>
        <td>
          <mat-form-field>
            <input matInput placeholder="Latitude(Y)" name="lat" id="lat" #lat="ngModel" ngModel required>
            <mat-error *ngIf="lat.touched && lat.invalid">
              <div *ngIf="lat.errors.required">You cannot leave this field empty.</div>
            </mat-error>
          </mat-form-field>
        </td>
      </tr>
    </table>
    <button [disabled]="!f.valid" class="btn btn-outline-primary">Go</button>
  </form>
</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

Building a user interface in Angular2 that consists of multiple components and utilizes

What is the recommended structure for an Angular2 (beta3) application with routing when incorporating a parent/child multi-component setup? When dealing with individual tables, I have set up the following structure: https://i.stack.imgur.com/BYqGU.jpg I ...

Unable to display content when the button is triggered

I am facing an issue with hiding a div (class="login-form") and displaying it only after clicking the Login button on my HTML page using jQuery. However, despite clicking the button, the login form does not appear. Can anyone help me understand why this ha ...

Retrieving a specific attribute pair from a JSON object

Currently, I am trying to retrieve the temperature data and display it on my webpage. Since these are objects with no specific order, I am struggling to understand how to access them without using an index. { "response": { "version": "0.1", "termsofServic ...

optimal application of css with jquery

I have a question about using jQuery to set the padding of a class or id. I am able to successfully change the height of an element with this code: $('.menu').css({ height: '90px' }); But now, I need to apply a specific CSS rule in jQ ...

Exploring Firestore Snapshots - Keeping an Ear Out for Fresh Documents

Currently, I am in the process of developing a dynamic scrolling pagination feature using Firestore. My approach involves loading a limit of 10 real-time documents into an array that will be displayed on the screen. The plan is to implement the loadMore() ...

Is there a way to acquire and set up a JS-file (excluding NPM package) directly through an NPM URL?

Is it feasible to include the URL for the "checkout.js" JavaScript file in the package.json file, rather than directly adding it to the Index.html? Please note that this is a standalone JavaScript file and not an NPM package. The purpose behind this appr ...

Using media queries, one can adjust the positioning of elements in CSS

Can someone please help me? I'm struggling to change the position of a div from absolute to static when the page width reduces to 800px. The challenge is that I can't modify certain code because I am displaying a slideshow that maintains an aspec ...

A guide on iterating through a JSON object fetched using Http in Angular 2/Typescript

I am attempting to extract specific data from my JSON file using http. The structure of the JSON is as follows: [{"name":"Name1","perc":33},{"name":"Name2","perc":22},{"name":"Name3","perc":41}] To loop through this retrieved object, I use the following ...

Ditch the if-else ladder approach and instead, opt for implementing a strategic design

I am currently working on implementing a strategic design pattern. Here is a simple if-else ladder that I have: if(dataKeyinresponse === 'year') { bsd = new Date(moment(new Date(item['key'])).startOf('year&apos ...

What is the best way to create a smooth transition for a bootstrap navbar in chrome, toggling from right to left on

I have successfully modified the bootstrap navbar to toggle from right to left instead of top to bottom using the following code: For HTML- <nav class="navbar navbar-inverse" role="navigation" style="height: 55px; padding-top: 2px; background-color: # ...

Tips for resolving the issue of 'defineExpose' method being undefined in Vue3

Struggling to pass a method from child to parent; unfortunately, the defineExpose() method seems to be malfunctioning. Could anyone provide guidance on what might be going wrong? For additional context, feel free to check out my previous question <scri ...

Bootstrap CSS: image is overlapping text inside a div

In my layout, I have four inner div containers arranged as follows: small picture - text - small picture - text. <div class="container"> <div class="col-md-12"> <div class="row"> <div class="col-sm-2"> <div c ...

Having trouble running nodemon on my Windows 10 machine

Recently, I started diving into Node.js and managed to run my first node app successfully, albeit without using nodemon. To remedy this, I globally installed nodemon by running npm install -g nodemon, which went smoothly. However, upon executing nodemon in ...

Assistance with Ajax for content loading

Greetings, I am encountering an issue with the following code snippet (located in a js file named ajax.js) $(function(){ $("#loading").hide(); $("ul#nav a").click(function(){ page = "content/"+$(this).attr('href') ...

Ensuring the Sticky Table Header Moves Alongside Horizontal Scroll

I've been working with an HTML table that has a sticky header, meaning the header stays in place as the table scrolls vertically. However, I'm facing an issue where I need the header to move along with the horizontal scroll, but remain fixed ver ...

What is the best way to load a database URL asynchronously and establish a database connection prior to the initialization of an Express

My express.js app is set up to run on AWS lambda, with the database URL stored and encrypted in Amazon KMS. To access the URL, decryption using the AWS KMS service is required. // imports import mongoose from 'mongoose'; import serverless from & ...

Unable to progress past first image in Bootstrap 5 carousel

I'm having trouble implementing a carousel on my HTML page. It only displays the first image, and the next and previous buttons are not functioning. I copied and pasted the code from Bootstrap directly. <link href="https://cdn.jsdelivr.net ...

Is async/await necessary even if the outcome is not important to me?

Imagine I have an API call that performs X and I convert it into asynchronous code using async/await: export default async (req: NextApiRequest, res: NextApiResponse) => { let success = await sendEmail({ //... }); return res.status(200) ...

Eliminating the final space in CSS flexbox layout

When I set the display of an element to flex, I noticed that the last space in a text string gets removed. <div class="has_flex"> Some text <a href="link">Link</a></div> After setting display to flex: <div class="has_flex"> ...

Transferring information from offspring to parent

Greetings! I'm currently getting my feet wet with React and finding myself stuck on an issue regarding passing states. Is it possible for me to pass a child state to a parent component in order to selectively render other child components? ...