When vue-js-modal is set to modal Open, the DOM shown below is inserted.
<div class='modal'>
<div class='vm--overlay'></div>
<div class='modal-content'></div>
</div>
Since the header exists on the screen where the modal is inserted,
I want to implement it so that it does not cover the header.
Or No need for it(vm--overlay).
The structure of the DOM is as follows.
<header></header>
<div class='modal'>
<div class='vm--overlay'></div>
<div class='modal-content'></div>
</div>
I was able to apply styles to modal-content,
just like that below
.modal-content {
// same value as header height
margin-top: 50px;
}
But I couldn't apply the style against vm--overlay.
The following didn't work.
.vm--overlay {
// same value as header height
margin-top: 50px;
}
Is there way to remove the vm--overlay or apply the style?
it is a link of properties of vue-js-modal.
https://euvl.github.io/vue-js-modal/Properties.html#properties-2
Related
Im using vs-popup in order to display the contents when ever the button is clicked, but the size of vs-popup is fixed, and my contents looks clumsy, so I want someone to tell me how I can change width of the popup as per my requirement.
<vs-button class="btn" #click=" showModal=true" color="#7367F0" > Click me</vs-button>
<vs-popup class="helundo" title="How will i resize popup" :active.sync="showModal">
<div class="vx-row">
<div class="vx-col w-full md:w-1/2 mb-base">
<p> I want this content in the left</p>
</div>
<div class="vx-col w-full md:w-1/2 mb-base">
<p> I want this content in the right</p>
</div>
</div>
</vs-popup>
<script>
export default {
data () {
return {
showModal: false
}
}
}
</script>
<style>
<!-- what should I add in order to resize the popup -->
</style>
And the output I'm obtaining is sent below:
I want the popup bigger and it should be flexible such that what ever content I add must fit accordingly.
Please do help me, as I am unable to change the width of the popup, what ever I do it is same, but if I add too many contents the width increases for a extend and it becomes scrollable.
I found out the answer myself, i am posting so that it can help others. If you are using vuesax library you might find out _fixesVuesax.scss
so just place this code there:
.con-vs-popup {
z-index: 53000;
.vs-popup {
width: 200px !important; //You can change the width according to your content
height: auto;
}
.vs-popup--content {
width: auto !important;
padding: 1rem;
font-size: 1rem;
}
}
I'm using vue-good-table and I'm trying to change the labels area in the selected row box. Looking at the documentation the only slot available is the selected-row-actions.
Is there a way/slot to edit the left side with the labels and 'clear' action? (not just their text)
Update:
As mentioned earlier there isn't any direct configuration from library to achieve what you want to achieve. CSS only solution will look like following, take a look at this codesandbox:
<template>
...
</template>
<style>
.vgt-selection-info-row {
font-size: 0 !important;
}
.vgt-selection-info-row__actions.vgt-pull-right {
visibility: visible;
float: none !important;
}
</style>
Original answer:
There isn't any thing like that supported from the library out of the box. You can use table-actions slots to display table level actions on top right or can use selected-row-actions slot to display actions for selected row on the selection info bar like:
<div slot="selected-row-actions">
<button #click="countSelected()">Sected Row Action</button>
</div>
<div slot="table-actions">
Table Actions
</div>
That being said, its HTML we are talking about (yay!) so nothing is preventing you from overriding default styles of the library.
You can use following style to use selected-row-actions slot and move slot next to clear button:
<template>
...
<div slot="selected-row-actions">
<label>Label 1</label>
<button #click="countSelected()">Action 1</button>
<label>Label 1</label>
<button #click="countSelected()">Action 2</button>
</div>
...
</template>
<style>
.vgt-selection-info-row__actions.vgt-pull-right {
float: none !important;
margin-left: 5px;
display: inline;
}
.vgt-selection-info-row__actions.vgt-pull-right div {
display: inline-block;
}
</style>
PS: There is already a closed issue BUG 519 for the library if you like to reopen it and track.
When I use the b-carousel tag, it's working but the thumbnails are horizontal. How do I make them vertical?
This is the code:
<template>
<b-carousel :indicator-inside="false">
<b-carousel-item v-for="(item, i) in 6" :key="i">
<span class="image">
<img :src="getImgUrl(i)">
</span>
</b-carousel-item>
<template slot="indicators" slot-scope="props">
<span class="al image">
<img :src="getImgUrl(props.i)" :title="props.i">
</span>
</template>
</b-carousel>
</template>
<script>
export default {
methods: {
getImgUrl(value) {
return `https://picsum.photos/id/43${value}/1230/500`
}
}
}
</script>
<style>
.is-active .al img {
filter: grayscale(0%);
}
.al img {
filter: grayscale(100%);
}
</style>
OUTPUT THAT I WANT:
Note: This solution has a disadvantage in that it relies on the CSS implementation details of b-carousel, but that might be acceptable for your use case:
You could use CSS to style the b-carousel elements:
.carousel - the root container
.carousel-indicator - the thumbnail container (a flex item)
.indicator-item - each thumbnail item
Two columns
Grid Layout could be most helpful in this case, as we essentially want a 2-column grid. This is done by applying display: grid to the root container, and grid-template-columns: auto 25% to create the main-image column and the thumbnail column:
.carousel {
display: grid;
grid-template-columns: auto 25%;
align-items: center;
}
Vertical thumbnails
Flexbox applies here. The thumbnail container is already using it, but it uses the default flex-flow of row (horizontal). We could easily change that to column to make it vertical:
.carousel-indicator {
flex-direction: column;
}
Thumbnail margins
The thumbnails have a margin-right between elements, intended to provide visual space between the horizontal images. Since we're switching it to a vertical layout, we can remove the margin:
.indicator-item {
margin-right: initial !important;
}
<div id="abc">
<div id="bac" ngIf="show">
<!-- Content -->
</div>
<div id="cde">cds</div>
</div>
I have a div want to add or remove from DOM slowly(show and hide) using *ngIf and likewise adding or removing of div.id ="bac" should cause div.id='cde' to move left or right slowly like it is animating.
*ngIf probably is not he best thing you are looking for, instead of this, use ngClass and define the css transitions and positions for these animations.
*ngIf fully hides/shows a node from/in DOM, it's like display: none/block which is not able to be animated through css-transitions
here is an example
<div class="animated" [ngClass]=" { 'show': show, 'hide': !show }">
content
</div>
then in the css
.animated {
display: inline-block;
width: 100%;
height: 80px;
background: gray;
transition: 1.5s linear margin-left;
}
.animated.show {
margin-left: 0;
}
.animated.hide {
margin-left: -120vw;
}
Height also can be changed, depends on which effect you expect.
Here is stackblitz with working code
I want my page's content to take up the full width of the screen with a little padding on the right and left and be fluid, but when I wrap my div.row and div.col-md-x in a <div class="container-fluid"> the page's content touches the sides of the screen.
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
What is the proper, Bootstrap way to have a 100% width, fluid layout, and 15px padding on the left and right?
As per the Bootstrap docs:
Use .container-fluid for a full width container, spanning the entire width of your viewport.
If you want 15px padding then add to your CSS:
.container-fluid {
padding: 15px;
}
However you may want to use a percent (padding: 2%) or media queries since 15px will look different on different screen resolutions.
Another option: use <div class="container"> instead of <div class="container-fluid">. This will give you built in padding.
Bootply demo
You can try an id to <div id="bd" class="container-fluid"> and if add this script after add Jquery you can padding when window resize, and can add more resolutions px with more "if" or only add padding-left or right.
<script>
$(document).ready(function(){
function paddingbd(){
if($(window).width()>800){
$("#bd").css("padding","30px");
}else{
$("#bd").css("padding","");
}
}
paddingbd();
$(window).on("resize",paddingbd);
});
<script>
the .row has a negative margin of 15px. try to add
.container-fluid {
padding: 15px 30px;
}