I have a bootstrap modal that on a Button click I show it.
Everything works great but the Modal is displayed in the very right of the screen that I can't see even the Modal footer buttons.
I'm using a HTML Template that has a custom Bootstrap CSS and that's the reason of the issue.
Here is a screenshot:
My Modal html code is:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
And my jQuery code is:
$('#btnSave').click(function() {
$('#myModal').modal('show')
});
Here is the jsFiddle using the custom CSS that I have (from the HTML Template).
http://jsfiddle.net/uuvgLnsx/1/
Try this...
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="position: fixed; left: 25%; width:60%;>
The problem is here:
#media screen and (min-width: 768px) {
.modal-dialog {
left: 50%;
right: auto;
width: 600px;
padding-top: 30px;
padding-bottom: 30px;
}
The 'left: 50%' pushes the your dialog box into the middle. Change left to auto.
Related
I'm creating a bootstrap modal and I want to set the header's background color to transparent, it did work with other colors but with transparent my header's color turn black.
My CSS:
<style>
.modal-header {
background-color: transparent !important;
}
</style>
HTML:
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...abd,ajkwbldkajgwldkahgwldkjalwkjdhalkjwdhlakjwhdawdw
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
Live demo: https://codepen.io/spuft/pen/KKzZvBa
This is because the parent element .modal-content has a background-color of #161415 (which is close to black like what you described).
Since your header is transparent, it will not have a background-color on its own but the parent has a background-color so that's what you are going to see - giving the illusion that the header has a black background color.
An analogy of this in the real world is if you place a transparent sheet of plastic at the top of a black notebook. You will still see black visually despite the plastic being at the top.
So to solve this, give your .modal-content transparent as well. Since they are transparent, the modal's overlay will be the dominant color visually.
.modal-content {
background-color: transparent;
color: white;
}
I have a modal form when I click the button I get the form with student data in it.
so the problem is when the modal is opened the sidebar is broken.
here's a screenshot of my problem :
Screen shot
modal :
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="memberModalLabel">Edit Member Detail</h4>
</div>
<div class="dash">
</div>
</div>
</div>
</div>
I tried to remove position: relative; for the modal.
but it's not doing anything
when the sidebar is left to right the modal is not affecting the sidebar but when I change it to right to left it breaks
Any idea how I can fix this?
Solved by adding :
.modal-open[style] {
padding-right: 0px !important;
}
i'm creating modal with vuejs and following this example but i create a separated file for modal so i can simply call my modal component anywhere i need to like this
here is my modal.vue
<template>
<div class="modal-mask" #click="close">
<div class="modal-dialog" :class="size">
<div class="modal-content">
<div class="modal-header" :class="color">
<button type="button" class="close" #click="close">×</button>
<h6 class="modal-title">{{ title }}</h6>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<slot name="button"></slot>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
props: ['title','color','size'],
methods: {
close(){
this.$emit('close');
}
}
}
</script>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3s ease;
}
</style>
and in index.vue where i want to call it i just simply
<app-modal
:title="modalTitle"
:size="modalSize"
:color="modalColor"
v-if="modalShow"
#close="modalShow = false"
>
</app-modal>
now my question is i want to use 2 kind of transition, first is in my index.vue page
<transition name="modal">
<app-modal
:title="modalTitle"
:size="modalSize"
:color="modalColor"
v-if="modalShow"
#close="modalShow = false"
>
</app-modal>
</transition>
and the second one is in my modal.vue like this
<template>
<div class="modal-mask" #click="close">
<transition name="modal-inside">
<div class="modal-dialog" :class="size">
<div class="modal-content">
<div class="modal-header" :class="color">
<button type="button" class="close" #click="close">×</button>
<h6 class="modal-title">{{ title }}</h6>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<slot name="button"></slot>
</div>
</div>
</div>
</transition>
</div>
</template>
why i want it like that well simply because in there is modal-mask class that warp entire modal and that css class is add some dark/shade background so user can focus on the modal.... exactly like bootstrap modal fade effect and then after that i want everything inside div modal-dialog to show/transition after modal-mask is already finished its transition
so it will just first darken background and then show modal... they move separately one after another.. not at the same time
or to be more easy to imagine it i want to generate exactly like bootstrap modal
I'm trying to bottom align an img in a jumbotron, but cannot figure it out.
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-lg-8">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="col-lg-4 text-center">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
</div>
</div>
I tried adding the following to the CSS
.vertical-bottom {
display: flex;
align-items: bottom;
}
And then added the additional class to the DIV containing the img
<div class="col-lg-4 text-center vertical-bottom">
This didn't work, why is it so hard to vertically align things in bootstrap?
Here a kind of code:
Bootply
Css:
The media query is set to 1200 because I see you're using col-lg-xx
#media screen and (min-width:1200px) {
.flex_container img{
object-fit: contain;
object-position: 100% 100%;
}
.flex_container {
display: flex;
}
}
Html:
<div class="jumbotron">
<div class="container">
<div class="row flex_container">
<div class="col-lg-8">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="col-lg-4 text-center flex_container">
<img src="http://via.placeholder.com/200x200" style="">
</div>
</div>
</div>
</div>
I am using Bootstrap accordion to show/hide content using the code below. The javascript code applies an active class to the panel heading to change the background colour to green, with white font. This works ok but I need the .question span class to also change font color when the panel heading is clicked. I have tried targeting the .question class to add the active class but it has no affect?
HTML
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<span class="question">Q:</span>First Question</a></h4></div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<span class="answer">A:</span> Text </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<span class="question">Q:</span>Second Question</a></h4></div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<span class="answer">A:</span> Text</div>
</div>
</div>
JS
$('.panel-heading').click(function() {
$('.panel-heading').removeClass('active');
$(this).addClass('active');
$('.question').removeClass('active');
$(this).addClass('active');
});
CSS
.active {
background-color: green!important;
color: white!important;
}
.question {
color: blue
}
You can achieve that with pure CSS, just use bootstrap set attribute aria-expanded:
.panel-heading a[aria-expanded='true']>span.question {
color: red;
}
.panel-heading a[aria-expanded='false']>span.question {
color: blue;
}