By default <b-modal> shows on top of the page. When attribute centered is added to the tag. It is centered.
However, I would like to show the modal with a certain amount of gap under the top of the page.
The Modal is shown when the home page is opened.
AppModal.vue
<template>
<b-modal ref="thisModalRef" :modal-class="my-modal" size="lg" hide-header hide-footer no-close-on-backdrop hide-header-close>
//...
</b-modal>
</template>
<script>
export default {
data () {
return {
mymodal: ['mymodal']
}
},
methods: {
hideModal () {
this.$refs.thisModalRef.hide()
},
showModal () {
this.$refs.thisModalRef.show()
}
}
}
</script>
<style scoped>
.mymodal > div {
position: absolute;
top: 300px;
right: 100px;
background-color: yellow;
}
</style>
AppHome.vue
<template>
<div>
// omitted
<AppModal ref="modalRef"></AppModal>
</div>
</template>
<script>
import AppModal from './AppModal'
export default {
components: {
AppModal
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
showModal: function () {
this.$refs.modalRef.showModal()
}
},
mounted () {
this.showModal()
}
}
</script>
<style scoped>
// ommitted
</style>
html source related to modal
<div id="__BVID__16___BV_modal_outer_">
<div id="__BVID__16" role="dialog" class="modal fade show d-block mymodal" style="padding-right: 15px;">
<div class="modal-dialog modal-lg">
<div tabindex="-1" role="document" aria-describedby="__BVID__16___BV_modal_body_" class="modal-content">
<!---->
<div id="__BVID__16___BV_modal_body_" class="modal-body">
// ommitted
</div>
<!---->
</div>
</div>
</div>
<div id="__BVID__16___BV_modal_backdrop_" class="modal-backdrop fade show"></div>
</div>
As you can see, mymodal class is correctly applied. But the div .modal-dialog does not have the css properties I give it.
the real css properties found in dev tools
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
I tried adding a custom class to <b-modal> and style it. Nothing worked.
Please help.
If you want to put the modal into the specific position, below is my solutuon:
add specific class to <b-modal> by its props=modal-class
then add your styles into myclass > div
You can look into the github (line#:176), Bootstrap-vue will place one div.modal-content(including header/body/foot) into one div with class="modal-dialog" which is the direct child of root.
That is why above solution use the css selector = .myclass > div.
If you look into the dom tree: the structure of one bootstrap-vue modal will be:
one root div (myclass will be added into here) -> one div with modal-dialog -> one div with modal-content -> header/body/footer
Below is one sample: (I put different background-color for modal-dialog, modal-content.)
app = new Vue({ //not vue, it is Vue
el: "#app",
data: {
myclass: ['myclass']
},
methods: {
showModal: function(){
this.$refs.myModalRef.show()
}
}
})
.myclass > div {
position:absolute !important;
top: -10px !important;
left: -10px !important;
background-color:yellow !important;
}
.myclass > .modal-dialog > .modal-content {
background-color:red !important;
}
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-button #click="showModal">
Open Modal
</b-button>
<b-modal ref="myModalRef" :modal-class="myclass" size="lg">
<h2>Test</h2>
</b-modal>
</div>
I use
<b-modal
body-class="modalcart"
ref="addToCart"
id="addToCarModal"
hide-footer
hide-header
>
<b-container class="text-center modal-product-content">
<img class="modal-image" src="~/assets/images/add-to-cart.png" alt=""/>
and:
<style lang="scss" scoped>
/deep/ .modalcart {
font-family: 'poppins-bold';
/deep/ .modal-product-content {
padding: 3rem;
margin: 0 auto !important;
/deep/ .modal-image {
height: 150px;
margin-bottom: 2rem;
}
}
...
}
</style>
and work! thanks
Keep in mind that not work without body-class and /deep/
I use node-sass, vue 3, vue-loader 15
Maybe you could try with something like margin-top: 100px.
I think it's because the #media breakpoint of Bootstrap. Then, in <style> you just override it.
#media (min-width: 576px) {
.modal-dialog {
margin: .5rem auto;
}
}
Related
I am trying to adapt Bootstrap 4 tooltip to display images.
<img src="myimage.png" data-toggle="tooltip" data-html="true" title=\'<img src="myimage.png" class="d-block">\'>
In order to do it I had to add a custom CSS to allow tooltip scale to the width of the image.
.tooltip-inner {
max-width: 100%;
}
.tooltip.show {
opacity: 1;
}
.tooltip img {
margin: 5px 0;
background-color: #333;
}
It works great, however all my regular text tooltips also scale. I would like the text tooltips act as they were. I tried adding class to my code but the issue is actually in the tooltip code that is generated on hover. Is there a way to use my custom CSS only for images?
I think that tooltip's template option could help you to do what you want.
For example, you could create a specific template only for your image, using a specific class to format only its tooltip.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip-image"]').tooltip({
template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner image"></div></div>'
});
});
.tooltip-inner.image {
max-width: 100%;
}
.tooltip.show {
opacity: 1;
}
.tooltip img {
margin: 5px 0;
background-color: #333;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h3>Tooltip Example</h3>
<p>Hover over me</p>
<p><img src="https://picsum.photos/500/300" data-toggle="tooltip-image" data-html="true" title='<img src="https://picsum.photos/500/300" class="d-block">'></p>
</div>
I am trying to round the corners of a paper-listbox, which is contained in a paper-dropdown-menu. However, the following CSS doesn't change the border radius as I would've expected:
paper-listbox {
border-radius: 14pt !important;
--paper-listbox: {
border-radius: 14pt;
overflow: hidden;
};
}
How can I set the border-radius of this paper-listbox?
Screenshot:
The internal DOM of <paper-dropdown-menu> looks something like this:
<paper-menu-button>
<iron-dropdown>
<div slot="dropdown-content" class="dropdown-content">
<slot name="dropdown-content"></slot> <!-- user's slot content of paper-dropdown-menu is inserted here -->
</div>
</iron-dropdown>
</paper-menu-button>
So this user code:
<paper-dropdown-menu>
<paper-listbox slot="dropdown-content"> <!-- user's slot content -->
</paper-listbox>
</paper-dropdown-menu>
becomes:
<paper-dropdown-menu>
<paper-menu-button>
<iron-dropdown>
<div slot="dropdown-content" class="dropdown-content">
<paper-listbox> <!-- user's slot content inserted -->
</paper-listbox>
</div>
</iron-dropdown>
</paper-menu-button>
</paper-dropdown-menu>
In <paper-menu-button>, the div.dropdown-content container is styled to show a box-shadow (via --shadow-elevation-2dp), making the square edges of the <div> appear. The CSS you used to style the <paper-listbox> indeed styles the listbox, but the square edges you saw were actually from the listbox's parent (div.dropdown-content) with its box-shadow edges. You can override the styles of div.dropdown-content with the --paper-menu-button-content mixin, as shown in the following steps:
Apply a class to your <paper-dropdown-menu>:
<paper-dropdown-menu class="dropdown">
Create a style for that class that sets --paper-menu-button-content:
<style>
.dropdown {
--paper-menu-button-content: {
border-radius: 14pt;
}
}
</style>
window.addEventListener('WebComponentsReady', () => {
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {
customers: {
type: Array,
value: () => [
'Alice',
'Bob',
'Charlie',
'David',
]
}
};
}
}
customElements.define(XFoo.is, XFoo);
});
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="neon-animation/web-animations.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
.dropdown {
--paper-menu-button-content: {
border-radius: 14pt;
}
}
</style>
<paper-dropdown-menu id="customer"
class="dropdown"
placeholder="Select Customer">
<paper-listbox id="customerList"
slot="dropdown-content"
attr-for-selected="value"
selected="[[customer]]">
<template is="dom-repeat" items="[[customers]]" as="customer">
<paper-item value="[[customer]]">[[customer]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
</body>
<paper-listbox> found you a custom-property to style the element:
Custom property | Description | Default
------------------------------------|-------------------------------|-----------------------
`--paper-listbox-background-color` | Menu background color | `--primary-background-color`
`--paper-listbox-color` | Menu foreground color | `--primary-text-color`
`--paper-listbox` | Mixin applied to the listbox | `{}`
The --paper-listbox can be useful for your case :
<dom-module id="x-app">
<template>
<style>
:host {
--paper-listbox: {
border-radius: 14pt;
border: solid 1px blue;
/* you need to hide overflow */
overflow: hidden;
}
}
/* OR (if you have multiple listbox with different styles) */
paper-listbox.radius {
--paper-listbox: {
border-radius: 14pt;
border: solid 1px blue;
overflow: hidden;
}
}
</style>
<paper-listbox class="radius">
<paper-item>a</paper-item>
<paper-item>b</paper-item>
<paper-item>c</paper-item>
</paper-listbox>
</template>
</dom-module>
I would like to remove gap between navbar and carousel in materialize design. I used vue component for each div and laravel as backend.
I use Sass for precompiler css. I had try to setting the margin body, margin for navbar, and margin for carousel through sass. Also I want to try to setting the margin through style scoped in vue component. But it didn't change , the gap still appears.
This is my code :
Navbar.vue
<template>
<nav class="white z-depth-1">
<img :src="'img/logo.png'" width="50px" height="50px" alt="Logo" style="margin-left:50px; margin-top:5px;">
<ul id="nav-mobile" class="right">
<li>
<div class="center row">
<div class="col s12">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input type="text" class="center" />
</div>
</div>
</div>
</li>
<li>artist</li>
<li>merchandise</li>
<li>about</li>
<li>login</li>
<li>register</li>
</ul>
</nav>
</template>
<script>
export default{}
</script>
carousel.vue
<template>
<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><img src="/img/carone.jpg"></a>
<a class="carousel-item" href="#two!"><img src="/img/cartwo.jpeg"></a>
<a class="carousel-item" href="#three!"><img src="/img/carthree.jpeg"></a>
<a class="carousel-item" href="#four!"><img src="/img/carfour.jpeg"></a>
</div>
</template>
<style lang="scss" scoped>
.carousel{
margin-top: -20px;
}
</style>
<script>
$(function(){
setInterval(function() {
$('.carousel').carousel('next');
}, 2000);
$('.carousel.carousel-slider').carousel({
fullWidth: true,
indicators: true
});
});
</script>
App.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('navbar', require('./components/Navbar.vue'));
Vue.component('carousel-component', require('./components/Navbar.vue'));
const app = new Vue({
el: '#app'
});
App.Scss
#import "~materialize-css/sass/components/color-variables";
#import "~materialize-css/sass/components/variables";
#import '~materialize-css/sass/materialize';
#font-face {
font-family: 'VojoCustomize'; /*a name to be used later*/
src: url('/fonts/GeosansLight.ttf');
}
nav ul li a{
color: $primary-color;
border-bottom-color: rgba(0,0,0,0);
font-family: VojoCustomize, sans-serif;
font-style: normal;
font-weight: bold;
}
.carousel{
max-height: 400px;
margin: 0 !important;
}
nav .input-field input[type='text'] {
height: 50px;
background-color: $primary-color;
margin-right: 30px;
border-radius: 10px;
margin-top: 5px;
width: 600px;
}
.yellow-primary-color{
color : $primary-color-dark;
}
.custom-textfield{
border-radius: 20px;
width: 100vw;
height : 50vh;
background-color: $primary-color;
}
Appear in browser
Sorry for my bad English. But, I'm really stuck. Please give me advise for this problem. Thank You.
To fix you should remove the bottom margin (added by Materialize-CSS) of the row class and the input element inside your nav.
The following css snippet should fix your problem:
/* remove input bottom margin */
nav .input-field input[type='text'] {
margin-bottom: 0;
}
/* remove .row bottom margin */
nav .row {
margin-bottom:0;
}
I'm struggling to get iron-list to play nice with iron-flex-layout and paper-card. What I am hoping for is for the paper-card to flex expand on both axis to cover the page (with its margin as a bumper) and then for the iron-list to expand vertically in its container to show my iron-list with all its "virtual list" magic.
Where am I going wrong?
<script src="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/paper-card/paper-card.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/paper-progress/paper-progress.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="https://cdn.rawgit.com/Download/polymer-cdn/24b44b55/lib/iron-list/iron-list.html">
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
body {
margin: 0;
height: 100vh;
}
paper-card {
margin: 1em;
}
iron-list {
border-bottom: 1px solid #f00;
border-top: 1px solid #000;
}
</style>
<div class="vertical layout">
<template is="dom-bind" id="app">
<paper-card heading="My paper card" class="flex">
<div class="card-content layout vertical">
<div>[[listing.length]]</div>
<iron-list items="[[listing]]" class="flex">
<template>
<div class="layout horizontal">
<div>[[item.name]]</div>
<div>[[item.value]]</div>
</div>
</template>a
</iron-list>
</div>
</paper-card>
</template>
</div>
<script>
"use strict";
window.addEventListener('WebComponentsReady', e => {
app.listing = [];
for (var i = 0; i < 100; i++) {
app.push('listing', { name: i, value: i });
}
});
</script>
Fiddle: https://jsfiddle.net/4czLkjfj/
You have the body element set to height: 100vh.
However, this height isn't being inherited by the flex container one-level down.
One solution is to add display: flex to body. This creates a flex container which automatically applies align-items: stretch to the children.
body {
display: flex;
align-items: stretch; /* initial setting; can be omitted */
}
div.vertical.layout {
flex: 1; /* full width */
}
revised fiddle
Another solution would be to simply tell the flex container to inherit the parent's height.
div.vertical.layout {
height: 100%;
}
revised fiddle
Revised solution based on feedback in the comments: demo
I am working on a popup window using ngDialog. Here is some code:
<style>
.ngdialog.dialogforpopup .ngdialog-content
{
width : 1100px;
margin-top:-100px;
padding-top:10px;
}
</style>
Template
<div style="height:800px;width:1040px;padding-left:5px;padding-top:5px;
padding-right:5px"
</div>
<div class="ngdialog-buttons" style="margin-top:10px">
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="cancel()">Cancel</button>
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="save()">Save</button>
</div>
Directive
ngDialog.open({
template: 'editor.html',
controller: 'editorController',
className: 'ngdialog-theme-default dialogforpopup',
closeByDocument: false,
disableAnimation: true
});
I have two questions.
How can center my popup on the screen? Currently I am using margin-top:-100px;
Is it possible to size ngDialog automatically to its content?
Thanks
One can center ngdialog by setting "table-like" styles:
.ngdialog{
padding:0 !important;
}
.ngdialog-content {
padding: 0 !important;
background: transparent !important;
display: table; /*table-like styles for vertical centering*/
width: 100% !important;
height:100%;
}
.ngdialog-holder {
display: table-cell;
vertical-align: middle;
width: 100%;
height:100%;
}
.ngdialog-content > .ngdialog-close{
display:none; /*hide original close button*/
}
.my-dialog{
width:400px;
background:#fff;
border:1px solid #000;
margin:0 auto; /*center dialog horizontally*/
position: relative;
}
Also one need to wrap content of dialog with ".ngdialog-holder" and ".my-dialog" blocks. And finally place ".ngdialog-close" button inside of it.
<div class="ngdialog-holder">
<div class="my-dialog">
Dialog content goes here
<div class="ngdialog-close"></div>
</div>
</div>
Here is live example: ngdialog plunk
I downloaded ngDialog package using bower. so ngDilaog related CSS and JS files are in bower_components.
I added the following CSS and JS files to my html page.
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog.css">
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-default.css">
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-plain.css">
<script src="../bower_components/ng-dialog/js/ngDialog.js"></script>
In my own JS file I am opening the dialog in the following way:
ngDialog.open({ template : 'dialog' ,scope : $scope , className: 'ngdialog-theme-default', plain: false,
showClose: true,
closeByDocument: true,
closeByEscape: true,
appendTo: false});
here is the html code:
<script type="text/ng-template" id='dialog'>
<div class="ngdialog-message">
Hello!!
</div>
</script>
With the above changes I am able to show the pop up on the center of the screen.
can use of the following class for pop up.
className: 'ngdialog-theme-plain'
className: 'ngdialog-theme-default'
I hope this will help!