DropBox Saver: Button is not showing up. (Angular 6) - angular6

I have tried everything but the exact same code works for the standalone application.
Here is the code for Profile component:
<app-header (sendUserdata)="getUserdata($event)" (sendToken)="getToken($event)" > </app-header>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a (click)="onClick('myProfile')"> My Profile </a>
</li>
<li>
<a (click)="onClick('addPassword')">Add Password</a>
</li>
<li>
Show Password
</li>
<li>
<a (click)="logOut()">Logout</a>
</li>
</ul>
</div>
<div *ngIf="myProfile">
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" >
<h1>Hello, {{userData.ofa}}</h1>
<img src="{{userData.Paa}}" alt="">
<p>{{userData.U3}}</p>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="addPassword">
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" >
<div class="container">
<h1>Submit Password</h1>
<form>
<div class="form-group">
<label for="name">Application Name</label>
<input #applicationname type="text" class="form-control" id="" required >
</div>
<div class="form-group">
<label for="alterEgo">Username</label>
<input #username type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label for="alterEgo">Password</label>
<input #password type="text" class="form-control" id="password" [value]="randomPassword">
</div>
<button type="button" class="btn btn-success" (click)="generatePassword()">Generate Random Password</button>
<button type="submit" class="btn btn-success dropbox-saver" (click)="submitData(applicationname.value,username.value,password.value)">Submit</button>
<hr>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the output if I run the exact same code as standalone application.
check screenshot of standalone app
Here is the output of the profile component where Save to Dropbox button is not showing up:
Not Working button after login
At the same time, the button is showing up on the main page, where user hasn't logged in yet.
I have tried checking without all the bootstrap classes and divisions. But, I am unable to get it working.

Related

Bootstrap Styling is not working as expected

In my current ASP.Net core I am trying to do the boot strap styling for search component on the page. I want the UI to look like
where the label/input box and the Search button to appear in the middle of the screen and the Create New To show in the same row but to appear right side of the screen
I have tried like below
<div class="center">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row mb-3">
<div class="col-lg-4 col-md-2 form-check-inline mr-0">
<label class="col-auto" for="holiday"> Find by Holiday </label>
<input type="text" class="form-control" name="SearchString" value="#ViewData["CurrentFilter"]" />
</div>
<div class="col-lg-4 col-md-2 form-check-inline mr-0">
<input type="submit" value="Search" class="btn btn-info" />
<a class="btn btn-link" asp-action="Index">Back to Full List</a>
</div>
<div class="col-lg-4 col-md-2 form-check-inline mr-0" style="text-align:right">
<a class="btn btn-info" asp-action="Create">Create New</a>
</div>
</div>
</div>
</div>
</form>
</div>
And the UI shows up like below
Can anyone help say what is that I am missing why all the things appear so close, I tried adding the style="text-align:right" so the Create new will appear towards the right
***** EDIT *****
You could try this way to implement accordingly as per your
expectations like below:
Asp.net Submit Form With CSS
<div class="center">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-md-12">
<div class="col-md-2">
<label class="col-auto" for="holiday" style="margin-top:10px;"> Find by Holiday </label>
</div>
<div class="col-md-3" style="margin-left: -50px;" >
<input type="text" class="form-control" name="SearchString" value="#ViewData["CurrentFilter"]" />
</div>
<div class="col-md-1">
<input type="submit" value="Search" class="btn btn-info" />
</div>
<div class="col-md-3">
<a class="btn btn-link" asp-action="Index">Back to Full List</a>
</div>
<div class="col-md-2">
<a class="btn btn-info" asp-action="Create">Create New</a>
</div>
<div class="col-md-1"></div>
</div>
</div>
</form>
</div>
Output
Note: You could set your CSS in different class file. I have shown you how could you achieve that using inline CSS snippet. You
could use separate file as well. But this is the right and convenient
way to do what you are trying to.
My first guess is caused by your class 'col-md-2'. You can change all of 'col-md-2' to 'col-md-4' to test.
try adding ml-auto on the 'Create New' button

Col 6 Panels Alignment Issues

First experience with bootstrap. Want 2 panels next to each other using the col-lg-6 class. Left panel will be a link to an article while holding an image. Right will be a signup/login box.
When loading the site the 2 panel goes underneath?
<div class="row">
<div class="col-lg-6">
<h2>Lastest News</h2>
<p>Article</p>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body"><img class="img-responsive" src="images/warning.png"</div>
</div>
</div>
<div class="col-lg-6">
<form action="/action_page.php">
<h2>Buy, Sell and more deals!</h2>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<ul class="nav navbar-nav navbar-center">
<li>
<button class="navbutton">
Login
</button>
</li>
<li>
<p> Not with us yet? </p>
</li>
<li>
<button class="navbutton">
Sign Up
</button>
</li>
</ul>
</form>
</div>
</div>
</div>
This is all inside a container.
Before adding img
After adding img
Please use this HTML
<div class="row">
<div class="col-lg-6">
<h2>Lastest News</h2>
<p>Article</p>
<div class="panel panel-default">
<div class="panel-heading">Panel Header</div>
<div class="panel-body">
<img class="img-responsive" src="images/warning.png"/>
</div>
</div>
</div>
<div class="col-lg-6">
<form action="/action_page.php">
<h2>Buy, Sell and more deals!</h2>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<ul class="nav navbar-nav navbar-center">
<li>
<button class="navbutton">
Login
</button>
</li>
<li>
<p> Not with us yet? </p>
</li>
<li>
<button class="navbutton">
Sign Up
</button>
</li>
</ul>
</form>
</div>
</div>

Bootstrap login and signup forms are not aligning

I want my Signup and Login form at the same place .By default i want to show the Signup form . On Login Button Click event i want Signup form should be replaced by Login form at the same place or position but its not happening . What is happening is Signup form is coming at top while login form is coming at down . To see the result as of now i have removed Visibility css ..
Here is my Markup ..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-7 text">
<h1><strong>Custom</strong> Authentication Form</h1>
<div class="description">
<p>
Please register or enter credentials to enjoy the app
</p>
</div>
<!-- Trying to add Angular JS Snippet !-->
<div ng-controller="LoginController" class="top-big-link">
<a class="btn btn-link-1" href="" ng-click="$event.preventDefault();Register()">Login</a>
</div>
</div>
<!-- Signup Form Here !-->
<div ng-controller="SignupformController" class="col-sm-5 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Sign up now</h3>
<p>Fill in the form below to get instant access:</p>
</div>
<div class="form-top-right">
<i class="fa fa-pencil"></i>
</div>
<div class="form-top-divider"></div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="form-first-name">First name</label>
<input type="text" name="form-first-name" placeholder="First name..." class="form-first-name form-control" id="form-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="form-last-name">Last name</label>
<input type="text" name="form-last-name" placeholder="Last name..." class="form-last-name form-control" id="form-last-name">
</div>
<div class="form-group">
<label class="sr-only" for="form-email">Email</label>
<input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email">
</div>
<button type="submit" class="btn">Sign me up!</button>
</form>
</div>
</div>
<!-- Login Form Here !-->
<div ng-controller="LoginformController" class="col-sm-5 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Login now</h3>
<p>Fill in the form below to get instant access:</p>
</div>
<div class="form-top-right">
<i class="fa fa-pencil"></i>
</div>
<div class="form-top-divider"></div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="UserID">User ID</label>
<input type="text" name="UserID" placeholder="User ID..." class="form-first-name form-control" id="UserID">
</div>
<div class="form-group">
<label class="sr-only" for="Password">Password</label>
<input type="text" name="Password" placeholder="Password..." class="form-last-name form-control" id="Password">
</div>
<button type="submit" class="btn">Login!</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Please help me to resolve this ..
This is how I did it:
<div class="col-sm-7 text">
<h1><strong>Atlas</strong> Authentication Form</h1>
<div class="description">
<p>Please register or enter credentials to enjoy the app</p>
</div>
<ul class="nav nav-pills" id="myTab">
<li class="active">Sign Up </li>
<li>Log In </li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="signup">
<div ng-controller="SignupformController" class="col-sm-5 form-box">
...
</div>
</div>
<div class="tab-pane" id="login">
<div ng-controller="LoginformController" class="col-sm-5 form-box">...</div>
</div>
</div>
Here is the JSFiddle demo
What you are actually to achieve is basically the way bootstrap nav-pills work. You just need to display the buttons as nav-pills and then set the respective contents in tab-content class.
Using data-toggle="pill" will automatically switch between the tabs and contents.
(You can add the fade class along the tab-pane class to give the switching a little effect like this :) )

tab views with bootstrap and angular

I made a tab view using bootstrap for a angular template. but when i click on the tab it goes to the angular link router instead of going to the tab content.it may be because i have them as links but at the moment i really don't have any idea of how im going to solve this
<ul class="nav nav-tabs">
<li class="active">Where you heading <i class="fa"></i></li>
<li>Description<i class="fa"></i></li>
</ul>
<form id="rideForm" method="post" class="form-horizontal">
<div class="tab-content">
<div class="tab-pane active" id="info-tab">
<div class="form-group">
<label class="col-sm-2 control-label">From:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="fullName" />
</div>
<label class="col-sm-2 control-label">To:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Time:</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="jobTitle" />
</div>
</div>
<div id="ridebuttongroup" class="col-sm-5 col-sm-offset-3">
<a href="#address-tab" data-toggle="tab"><button type="next" class="btn btn-default">
<span class="glyphicon glyphicon-circle-arrow-right"></span> Next </button></a>
</div>
</div>
<div class="tab-pane" id="address-tab">
<div class="form-group">
<label class="col-sm-3 control-label">Description</label>
<div class="col-sm-5">
<textarea rows="4" cols="50"></textarea>
</div>
</div>
<div id="ridebuttongroup" class="col-sm-5 col-sm-offset-3">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-plane"></span> Ride</button>
<a href="#info-tab" data-toggle="tab"><button type="next" class="btn btn-default">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Previous </button></a>
</div>
</div>
</div>
<div style="margin: 15px">
</div>
</form>
please help!
Stop banging your head against the wall and just use http://angular-ui.github.io/bootstrap/
A quick work around to this issue is to add:
target="_blank"
to your links. Angular, behind the scenes, does stuff to your links which is why you're having that problem.
This is a temp. solution to the issue.

Trying to get HTML 5 form to submit data

Trying to get form data to submit to my email address. Not too sure what is wrong with the code, as no data is being sent.
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box green ">
<div class="portlet-title">
<div class="caption"> <i class="fa fa-gift"></i> Horizontal Form</div>
<div class="tools"> <a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form action="myemailaddress#gmail.com" method="post">
<form class="form-horizontal" role="form">
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">Block Help</label>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Enter text"> <span class="help-block">
A block of help text.
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Inline Help</label>
<div class="col-md-9">
<input type="text" class="form-control input-inline input-medium" enter code hereplaceholder="Enter text"> <span class="help-inline">
Inline help.
</span>
</div>
</div>
<div class="form-group"></div>
</div>
</div>
<div class="form-actions fluid">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn green">Submit</button>
<button type="button" class="btn default">Cancel</button>
</div>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
Thank you for your help.
You'll need to set your form action to some sort of CGI script that's capable of catching the form POST and formatting it into an email message. PHP, perl, etc...
Here is basic PHP example... http://www.w3schools.com/php/php_forms.asp