Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the layout breaks when the window is resized.

<div md-dialog-content>
  <div class="section-top">
    <p id="title" style="float:left;">Adding document</p>
    <div md-dialog-actions style="float:right;">
      <button class="edm-button" md-button (click)="onNoClick()" tabindex="-1">Cancel</button>
    </div>
  </div>
  <div>
    <app-document-data></app-document-data>
  </div>
</div>
javascripthtmlcssangularangular2-template

Answer №1

Your message may be a bit cryptic, but I think I understand what you're trying to say.

One method you could employ is utilizing the flex layout:

<div md-dialog-content>
  <div style="display: flex; flex-direction: row;flex-wrap: nowrap;justify-content: center;">
    <p id="title">Adding document</p>
      <div md-dialog-actions>
        <button class="edm-button" md-button (click)="onNoClick()" tabindex="-1">Cancel</button>
      </div>
    </div>
    <div>
      <app-document-data></app-document-data>
    </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

Is it possible to utilize a contenteditable div in place of a textarea?

Is it possible to replace a textarea with a content editable div? Will the behavior be the same? Can data processing be done in the same way as with textarea data? ...

jquerycsshtml

Generate a dynamic list using NG-Repeat with changing classes

Is there a way to print each item that matches the index of the first loop as an li element with different classes? For instance, having li elements with classes like cat1_li, cat2_li, cat3_li for each respective loop iteration. I'm struggling with ...

javascriptangularjsloops

Track the number of clicks on the pop-up registered in the PHPMyAdmin database

There seems to be an issue with the IP not appearing in the other table within the same database. On the page "recette1.php?id=1" <?php $bdd = new PDO('mysql:host=localhost;dbname=recettes', 'root', 'root'); include("C:/ ...

javascriptphpajaxcounter

In a responsive design, rearrange a 3-column layout so that the 3rd column is shifted onto or above the

My question is concise and to the point. Despite searching online, I have not been able to find any information on this topic. Currently, my layout consists of 3 columns: ---------------------------- |left|the-main-column|right| ------------------------- ...

javascriptjqueryhtmlcssresponsive-design

Preventing Duplicate Form Submissions in Rails 5 using jQuery

As a coding novice, I'm currently working on my Rails 5 app and implementing image cropping and uploading directly to AWS S3 from the client side using blueimp/jQuery-File-Upload. However, I have encountered an issue where multiple form submissions o ...

javascriptjqueryruby-on-railsruby-on-rails-5

JavaScript: retrieving undefined value from a text element

My goal is to retrieve the text entered into each textbox by querying and looping through their ID tags. However, when I attempt to print what I have retrieved, it always displays "undefined". Seems like your post consists mostly of code: </h ...

javascripthtmlselectorelement

Is there a way to extract information from the HTML source code of an external website and display it in my application?

Seeking a method to search an external URL for content that matches "title" and then display the results on my HTML page using Javascript. Despite my efforts with Javascript, I have not come across any resources that address this issue. Could it be that I ...

javascriptjqueryhtml

Utilizing Angular 5: Enhancing ngFor with a Pipe and a Click Event

Iterating through an array of objects using *ngFor, I apply various filters via pipes to manipulate the resulting list. One of these pipes relies on a user input from a search field. Upon clicking on one of the ngFor elements, the corresponding object is p ...

javascriptangularngforkey-eventspipes-filters

Submit form data asynchronously using Ajax and serialize the form data before posting

I'm currently facing an issue with posting HTML form values in my code. Everything works fine except for the fact that I can't get it to post single quotes ' . I believe this problem is caused by the usage of serialize. I've attempted c ...

javascriptjqueryhtmlajax

What is the method for populating a dropdown using ajax in the Jade template engine?

Looking to dynamically populate a dropdown based on the selection of another dropdown. Here's the code snippet: script. var b_name = []; function jsFunction() { var client = document.getElementById('drop_client'); var c_name = cli ...

javascriptnode.jsajaxexpresspug

Is there a way to verify the presence or absence of content in a DNN template editor token?

I created a form where individuals can input data, and each field is assigned a token. For instance, if someone enters their name in a textbox labeled as "name," using the [NAME] token will display the entered name on another page. Currently, I am working ...

jqueryhtmltokendotnetnuke

PHP variable not receiving Ajax variable

As a beginner in Ajax and jQuery, I am learning through Stack Overflow and online tutorials. Please be considerate of my novice level as you read and potentially offer advice on my post. I have successfully created a form that displays a message upon subm ...

javascriptphpjqueryajaxforms

Allow consumers of the component to customize the ChangeDetectionStrategy

Imagine a scenario where a component in a UI library is configured with ChangeDetectionStrategy.Default, but wants to offer the flexibility for consumers to switch to ChangeDetectionStrategy.OnPush (especially for performance considerations) using an Input ...

angularangular-changedetection

An error has occurred: String cannot have property 'innerText' created

I'm encountering an issue while attempting to dynamically add posts to my post div. The problem arises when I try to include image URLs in the process. Switching from innerText to innerHTML did not resolve the issue, and the array I added is also not ...

javascriptarraysdom

What is the proper method for filling a custom shape that has been created in Canvas?

I am attempting to create a custom shape, but I am facing an issue where using moveTo prevents me from filling it. Is there any method to determine points on the screen to fill a shape? Or should I use or draw another real shape in the same layer block? T ...

htmlhtml5-canvas

Ways to make a div adjust to the width of its content

Hello, this is my first time posting a question here. I have found many helpful Java answers in this community before, so I thought I'd give it a try. I did some research beforehand, but please let me know if I have duplicated a question or done anyth ...

css

Generating an instance of a class by using the class name as a string

Before jumping to conclusions, please take a moment to read the following: In addition to TypeScript, my issue also involves Angular2. Main Goal I am in need of a method in app.component.ts that can take a string (Class Name) and generate an instance of ...

typescriptangulartypescript1.8

Using AJAX to Post Data with Relative Path in ASP.NET MVC 5

I have been developing an MVC 5 web application that utilizes AJAX Posts to invoke Controller Actions. For example, I have a controller named "Account" with an action called "Create". In my Account/Index view, which is rendered by accessing an Account/Ind ...

javascriptjqueryajaxasp.net-mvc

Ajax request received no data from API

I have been facing an issue with my code where I am posting an email on an API URL using an HTML form and PHP code with an Ajax call. However, the response I am getting is empty. I need to display this response on the same page below the form. I am sharing ...

javascriptphpjqueryajax

Having trouble customizing the toolbar on ngx-quill? Quill seems to be having trouble importing modules

UPDATE: I jumped ship when I discovered that PrimeNg had a quill implementation, and since I was already using PrimeNg, I switched over. Initially had some issues, but upgrading to angular 7 and ngrx 7 beta resolved them. https://www.primefaces.org/primeng ...

angularangular7quillngx-quill