We Keep Coding

How to show same swagger-editor twice on the same page in Angular 6

I want to implement the swagger-editor from npm swagger-editor-dist two times on the same html in Angular 6+. I have displayed swagger-editor on expand button in a modal and also below the expand button. However, it displays swagger only in the expanded modal and not in the div below it.
How can I display the same Swagger both the times?
Front -page ui-
Swagger in Modal -
code -
app.component.html
<div class="form-group">
<i class="fa fa-expand" data-toggle="modal" data-target="#exampleModalCenter">
</i>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Swagger of </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-12">
<div id="swagger-editorInbox" style="height:500px">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="row" style="border:solid 1px gray">
<div id="swagger-editorInbox" style="height:500px"></div>
</div>
</div>
app.component.ts
declare const SwaggerEditorBundle: any
export class swaggerComponent implements OnInit{
editorInbox :any
ngOnInit(){
this.editorInbox = SwaggerEditorBundle({
dom_id: "#swagger_editorInbox"
})
mySwagger = '....//my swagger// ...';
this.editorInbox.specActions.updateSpec(mySwagger);
}
}

Create 2 ids. you may need to do styling. very hard to do styling. I will recommend show only one at a time. Toggle content only
Id:
<div id="swagger_editorInbox1" style="height:500px"></div>
</div>
<div id="swagger_editorInbox2" style="height:500px"></div>
</div>
//JS
this.editorInbox = SwaggerEditorBundle({
dom_id: "#swagger_editorInbox1"
})
this.editorInbox = SwaggerEditorBundle({
dom_id: "#swagger_editorInbox2"
})

app.component.html
<div class="form-group">
<i class="fa fa-expand" (click)="showSwaggerModalFunction(); showSwaggerModal= 'true'" data-toggle="modal" data-target="#exampleModalCenter">
</i>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Swagger of </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" [hidden]="showSwaggerModal !== 'true'">
<div class="col-12">
<div id="swagger-editorInboxDummy" style="height:500px">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" (click)="onSaveModal()" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="row" style="border:solid 1px gray">
<div id="swagger-editorInbox" style="height:500px"></div>
</div>
</div>
app.component.ts
showSwaggerModal : string = 'false'
showSwaggerModalFunction(){
this.showSwaggerModal = 'true';
var editorInboxDummy = SwaggerEditorBundle({
dom_id : "#swagger-editorInboxDummy"
})
editorInboxDummy.specActions.updateSpec(mySwagger)
}
onSaveModal(){
this.showSwaggerModal = 'false';
}

TinyMCE in modal, modal won't reopen after passing data to div

I'm currently running an HTML template that has a placeholder div, and when the user clicks inside the div, a modal pops up with an instance of TinyMCE. So far so good.
TinyMCE works here as far as adding text/content, and then you hit a button that closes the modal and passes the content into the placeholder div in the same format. (Think of it like the user viewing a template for a static page, they want to insert content so the modal allows them to use TinyMCE to do so and then they hit the button to view it in the 'live' template).
Anyway, this works fine. The problem is, if you notice an error or typo and need to call TinyMCE again, It won't work. Once the content passes to the div, it no longer triggers the modal when clicking in the div. I'm not a JavaScript expert by any means so I'm sure something is wrong on that side.
Here's the code. Everything works as expected, but I just need to be able to keep the action of clicking the div and loading the modal to edit the content from TinyMCE:
<div class="row middle">
<div class="col-lg-12 fullWidth">
<div class="fullContent" style="background-color: white; height: 100%;">
<div class="modal fade bd-example-modal-lg" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fullModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText"></textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var $modalFull = $('#fullModal').modal({
show: false
});
$('.fullWidth').on('click', function() {
$modalFull.modal('show');
});
$(document).ready(function() {
$("#form-data3").submit(function(e) {
var content3 = tinymce.get("mytextarea3").getContent();
$(".fullContent").html(content3);
jQuery.noConflict();
$('#fullModal').modal('hide');
$('.modal-backdrop').remove();
return false;
});
});
</script>

With $(".fullContent").html(content3);, you are overwriting the modal's markup.
Place it outside that div.
<div class="row middle">
<div class="col-lg-12 fullWidth">
<div class="fullContent" style="background-color: white; height: 100%;">
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fullModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data3" method="post">
<textarea class="original" id="mytextarea3" name="fullText"></textarea>
<input type="submit" value="Save Content">
</form>
</div>
</div>
</div>
</div>

Bootstrap Modal Footer Not Displaying Correctly

I'm using a Bootstrap Modal and the modal-footer div is displayed with the grey background used to block out the main page instead of the white background used by the rest of the modal.
It's a somewhat complicated set up but I'll do my best to explain it.
The modal definition looks like this:
<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 id="concert-modal-title" class="modal-title"></h4>
</div>
<div id="concert-modal-body" class="modal-body">
</div>
</div>
<div class="modal-footer">
<span id="ConcertMessage" class="pull-left"></span>
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
<button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
</div>
</div>
You'll see that the modal-body section is empty. That's because I have javascript that uses the Mustache.js templating system to set the html of the body using a template and the return from an Ajax call. That all works correctly and the modal body is displayed correctly.
The modal body consist of a Bootstrap tab control and a form that contains all the tab panes, so the overall structure looks like this.
<ul class="nav nav-tabs nav-justified nav-justify">
<li class="active">Basic </li>
<li>Media </li>
<li>Tickets </li>
</ul>
<form id="concert-form" action="#" class="form-horizontal">
<div class="hidden">
<input type="text" name="Mode" id="Mode">
<input type="text" name="ConcertID" value="{{ConcertID}}">
</div>
<div class="tab-content" style="margin-top:20px;">
... form-group divs with labels and input controls...
</div>
<div class="tab-content" style="margin-top:20px;">
... form-group divs with labels and input controls...
</div>
</form>
I've used an html syntax checker to make sure I don't have any unclosed tags. I've also tried placing the form tag in several different places in the code but no matter what I do, the modal-footer section does not display correctly.
Any ideas?

You have your footer outside the modal-content div.
Structure should go:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
You have it as this (your missing a div in the html you posted btw):
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
</div>
<div class="modal-footer"></div>
</div>
</div> <!--missing div in the example you posted here-->
Functioning code below so you can see the correct structure in action:
$(document).ready(function(){
$('#concert-modal').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 id="concert-modal-title" class="modal-title">Mark it Pete</h4>
</div>
<div id="concert-modal-body" class="modal-body">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ec/f3/fe/ecf3fedfa44312bb0fe6bcb953c8718f.gif" style="max-height: 50px;"/>
</div>
<div class="modal-footer">
<span id="ConcertMessage" class="pull-left"></span>
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
<button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
</div>
</div>
</div>
</div>

How to display div on click inside Bootstrap modal?

I have a ussual modal window of Bootstrap and there I have a div which is hidden by default. I want to click on link (which is also inside this modal) and display it. Problem is that I could't make click on link and therefore my div still hedden.
Maybe someone had same problem or can give me good advice how to solve this task?
sorry that I did't post the code before I asked
<div class="modal fade js-custom-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="f-item f-item-modal">
<!--./f-item__details-->
<div class="f-item__info">
<div class="f-item__head modal-view">content</div>
<div class="f-item__short _border">content</div>
<div class="f-item__requirements">content</div>
<div class="f-item__body">
<div class="f-item__dest">
<i><img src="....png" alt="route"></i>THIS MUST DISPLAY div.f-item__map
</div>
</div>
<div class="f-item__map">
<iframe src="..." frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="f-item__footer modal-view"></div>
</div>
</div>
</div>
</div>
</div>
</div>
here is my jQuery code
$('a.display-route').click(function(e){
e.preventDefault;
$('.f-item__map').toggleClass('js-route');
});
at CSS
.js-route { display: block;}

I have tried it. Please have a look.
$(document).ready(function(){
$("a.insidemodal").click(function(){
$("div.abc").css("display","block");
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<a class="insidemodal">Some text in the modal.</a>
<div class="abc" style="display:none">I am hidden unless clicked by an anchor</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

You have to give us more details. But classical problems here could be a delegation event problem with your link.
Ask you this question: Does your link exist at the moment you add the on("click" ... ?

$('#link').click(function() {
$('#div').css('display','block');
});
This is just an example. Its better if you can post your code here.

bootstrap modal is not displaying as per my requirement

my bootstrap modal is appearing blue line at the top and bottom of the modal. I didn't know why the blue line is appearing at the top and bottom of the modal. I want to remove the blue line. I am weak in English please apologize me if I made any grammatical or spelling mistakes.
HTML CODE:
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="text-align:center">Are you sure you want to Delete it?</h4>
</div>
<div class="modal-body">
<div class="form-group" style="text-align:center">
<h6>By clicking on Yes button your ad will be Delete.</h6>
</div>
</div>
<div class="modal-footer" style="text-align:center">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="sayyes">Yes</button>
</div>
</div>
</div>
</div>
CSS CODE:
.vcenter{
position: relative;
top: 50%;
transform: translateY(-50%);
}
IMAGE:

Just add this style style="outline: none !important" to your main div.
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="outline: none !important">
The blue lines will be gone.

Probably you are over ridding some styles,
<div class="container">
<h3>Modal Example</h3>
<div>
Launch Modal
</div>
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<style>
DEMO