I would like to use a tabset row to showcase buttons in Angular 2

I need to arrange a tabset and buttons in a single row. The tabset is already displayed, now I just need to add the buttons.

<div class="form-group col-sm-8 ">
        <div class="col-lg-8" style="margin-top:35px;" >

 <h6 class="text-right"><button class="btn btn-secondary btn-sm" >Select File</button></h6>
 <h5 class="text-right"> <button class="btn btn-secondary btn-sm"  routerLinkActive="active" [routerLink]="['/summary']" >Go</button></h5>

            <tabset>

                <tab>
                    <ng-template tabHeading><strong>Content</strong></ng-template>

                </tab>
                <tab>
                    <ng-template tabHeading><strong>Meta Data</strong></ng-template>

                </tab>



            </tabset>


        </div>
    </div>
</div>
htmlcssangular2-routingangular2-directives

Answer №1

Take a look at this example using Bootstrap:

button.btn-secondary {
  margin-right: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group" style="margin-top:35px;">

<div class="col-sm-6 col-xs-6">
<tabset>
<tab>
<ng-template tabHeading><strong>Content</strong></ng-template>
</tab>
<tab>
<ng-template tabHeading><strong>Meta Data</strong></ng-template>
</tab>
</tabset>
</div>

<div class="col-sm-6 col-xs-6">
<button class="btn btn-secondary btn-sm pull-right"  routerLinkActive="active" [routerLink]="['/summary']" >Go</button>
<button class="btn btn-secondary btn-sm pull-right" >Select File</button>
</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

VueJS component fails to remain anchored at the bottom of the page while scrolling

I am currently using a <md-progress-bar> component in my VueJS application, and I am trying to make it stay fixed at the bottom of the screen when I scroll. I have attempted to use the styles position: fixed;, absolute, and relative, but none of them ...

javascriptcssvue.jsvue-material

"Step-by-step guide for incorporating a right-to-left (RTL) Bootstrap

Is there a way to make my bootstrap navbar right-to-left (RTL)? I want the logo to be on the right and the links to flow from right to left. I've tried various tricks but none of them seem to work. Here's the code I currently have: <nav class ...

csstwitter-bootstrapbootstrap-4navbar

Trouble with PHP and HTML Code not functioning properly after loop execution

I created a form with a dropdown menu that pulls options from a MYSQL Database. However, after fetching the options, the button and other components of the code seem to disappear. Everything else works fine when I comment out the PHP Query. <form acti ...

phphtmlmysqlformsbootstrap-4

Code in JavaScript that shows only a portion of the selected option in a dropdown menu

I'm just starting to learn Javascript and I'm looking to create a script for a select tag that displays countries and their phone codes. My goal is to have the dropdown menu show both the country and code, but once the user selects an option, onl ...

javascriptphphtml

Pondering in AngularJS - what is the best way to alter the DOM during an AJAX call?

I'm completely new to AngularJS and trying to transition from a jQuery background. After reading through "Thinking in AngularJS if I have a jQuery background?" on Stack Overflow, I understand the concept but am struggling to implement it without depen ...

javascriptjqueryhtmlajaxangularjs

Incorporate an ASP table within an ASP table to enhance data organization and presentation

Is it possible to create a dynamic ASP.NET table structure similar to the one demonstrated below by nesting tables inside table cells? <table> <tr> <td>[Image]</td> <td> <table> <tr> ...

c#htmlasp.nethtml-table

Preserve marked checkboxes upon page refresh

So I created a search engine with a filter using checkboxes in a form. The filter function is working fine when I submit the form (I'm using Flask for this). However, once the results are displayed, the checkboxes that were used as filters become unch ...

javascripthtmlcheckboxbrowser

choose courses using jQuery

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p class="myChild">one</p> <p class="myChild">two</p> <p class="myChild">th ...

javascriptjqueryhtml

Is there a way to use HTML and JS to draw custom lines connecting elements?

Sorry if this question has been asked before. Is there a way to create straight lines connecting HTML elements with just HTML and JavaScript, without relying on SVG or Canvas? If so, what would be the most effective approach? ...

javascripthtml

Expanding the header in Ionic 3 with a simple click event

I have successfully implemented an Expandable Header in Ionic 3 following a tutorial from Joshmorony. The header expands perfectly on scroll, as you can see in this GIF: However, I am facing an issue where I want to expand the header on click instead of o ...

htmlcsstypescriptionic-frameworkangular5

What steps are involved in creating a circular shape on canvas?

I am trying to create a circular shape in the canvas using the code below. The code involves moving an object with keyboard keys, and I need help making the canvas shape into a circle without affecting the functionality of the code. I attempted to modify t ...

javascripthtmlcsscanvas

Optimize your Kendo components in Angular with this top-notch customization strategy

How can kendo components like grids and charts be styled in the best possible way while following recommended practices? My current methods of styling them are: 1 : Utilizing ng deep, host, however these approaches have been deprecated and are not consi ...

cssangularuser-interfacesasskendo-ui

Is it feasible to embed Instagram in an iframe without using the API?

Is there an alternative method to embed Instagram using iframe without the need for an API? ...

javascripthtmlcss

Utilize grids to ensure consistency in the width of every <li> element across the browser

Is there a way to make the ul element span the entire width of the webpage regardless of window size? http://jsfiddle.net/32hp1w5p/ ul { grid-column: 1/13; list-style-type: none; display: table; margin: 0 auto; } li { float: left; border: ...

htmlcss

Determine whether the textfield is a number or not upon losing focus

I'm seeking advice on implementing a feature using jQuery and JavaScript. I want to create a text field that, when something is inputted, will automatically add .00 at the end if it's only a number. However, if someone inputs something like 2.00, ...

javascriptjqueryhtmlfocusout

When attempting to refresh, the global.Exp.Data.getLocalDataSet() function returns empty

In the first method, data is retrieved from the database and populated into the grid. The second method is used for viewing user details. When the user clicks on this method, it displays the user details. However, if the page is refreshed at that time, v ...

jqueryasp.nethtmlazure

Column reverse flex-direction is functioning correctly, however, it is imperative that it does not automatically scroll to the bottom

I have a Flexbox set up where I need the contents to display in reverse order. Everything is working well, but the list has many items and the newest ones are appearing at the top. Currently, the Flexbox automatically scrolls to the bottom, but I want it t ...

javascripthtmlcss

Converting JSON into HTML format

Seeking guidance as a developer tasked with rendering JSON to HTML on a webpage. I've taken over for someone else and, despite feeling somewhat in over my head, have managed to build the basic structure using Catalyst/Template Toolkit and Dojo. Now th ...

htmljsondojoxmlhttprequest

Enhancing button images with gradient effects on hover

I'm currently working on adding a color gradient effect to a PNG graphic used as a button. I specifically want the color gradient to appear only when the user hovers over the image, and not just for background images like most solutions seem to provid ...

htmlcss

When attempting to organize the layout of the dash app using app.layout=dbc.Container(), an AttributeError occurs, indicating that the 'layout' attribute is not available in the 'tuple' object

I am facing an issue with the script I have: import dash import pandas as pd import numpy as np import database from dash import Dash, dcc, html import dash_bootstrap_components as dbc # create a dash app that is mobile-friendly app = dash.Dash(__name__, ...

pythonhtmlbootstrap-4plotlydashboard