page-break is not working in firefox
im using vue, vuetify
<div :class="groupLen() ? 'group' : 'min-group'" class="page-break">
<div v-for="(group, i) in components.groups" :key="`${i}a`">
<v-card style="border: thin solid #a80707;" class="pt-0 pa-3 grey lighten-2" rounded outlined>
<v-card-title class="pl-0">{{ group.name }}</v-card-title>
<div :class="$vuetify.breakpoint.name" class="pa-0">
<div v-for="(item, i) in group.items" :key="i">
<dynamic
:componentName="item.Widget"
:properties="item.properties"
/>
</div>
</div>
</v-card>
</div>
</div>
div.page-break div {
// -webkit-column-break-inside: avoid;
// page-break-inside: avoid;
break-inside: avoid;
padding-bottom: 0.5em;
}
screenshot from firefox
screenshot from brave
Related
I am trying to use the puppeteer-sharp page.ClickAsync() method to click an element in a combo box. I need to get
this below (Canadian Dollar).
</li><li class="favorite"><div class="display">Canadian Dollar</div><div class="value">CAD</div>
<div class="container want">your text
<div class="label"><strong>Currency I want:</strong></div>
<div class="currency-container">
<div class="want-select collapse"> <div class="overlay"> <div class="colorBlock active" data-color="#0000e0" style="border-top: 2px solid transparent; border-left: 2px solid transparent; border-bottom: 2px solid transparent; color: rgb(0, 0, 224);">EUR</div> <div class="amount" align="right"></div> </div> <div class="select-container"> <div class="currencyPicker" data-index=""> <input class="search" placeholder="Type to search..."> <ul class="list" style="display: none;"><li class="groupLabel favorite"><div class="display">Favorites</div><div class="value"></div></li><li class="favorite"><div class="display">Euro</div><div class="value">EUR</div></li><li class="favorite"><div class="display">US Dollar</div><div class="value">USD</div></li><li class="favorite"><div class="display">British Pound</div><div class="value">GBP</div></li><li class="favorite"><div class="display">Canadian Dollar</div><div class="value">CAD</div></li><li class="favorite"><div class="display">Australian Dollar</div><div class="value">AUD</div></li><li class="groupLabel"><div class="display">A</div><div class="value"></div></li><li><div class="display">Afghanistan Afghani</div><div class="value">AFN</div></li><li><div class="display">Afghanistan Old Afghani*</div><div class="value">AFA</div></li><li><div class="display">Albanian Lek</div><div class="value">ALL</div></li><li><div class="display">Algerian Dinar</div><div class="value">DZD</div></li><li><div class="display">Andorran Franc*</div><div class="value">ADF</div></li><li><div
I have tried many different ways, but nothing is working.
await page1.ClickAsync(".body,.controls,.secondary,.container want,.currency-container,.want-select collapse,.select-container,.currencyPicker,.list,.favorite,.dispaly,.value, CAD");
await page1.ClickAsync(".want-select,.select-container");
await page1.ClickAsync("div[class='display']:has-text('Canadian Dollar')");
I have tried.
await page1.ClickAsync(".want-select,.select-container");
await page1.ClickAsync(".body,.controls,.secondary,.container want,.currency-container,.want-select collapse,.select-container,.currencyPicker,.list,.favorite,.dispaly,.value, CAD");
await page1.ClickAsync("div[class='display']");
await page1.ClickAsync("div[class='display']:has-text('Canadian Dollar')");
This worked
var elements = await page1.XPathAsync("//html/body/div/div/div/div/div/div/div/div/div/ul/li[5]/div[2]");
await elements[0].ClickAsync();
and this too.
await page1.ClickAsync("#hcc>div.body>div.controls>div.secondary>div.container.want>div.currency-container>div.want-select.collapse.active>div.select-container>div>ul>li:nth-child(5)>div.value")
What I am trying to do is to Design a new Vue/Inertia Login / Register modal on the frontend for the standard Vue scaffolding that comes with Laravel Breeze.
Exactly what I am trying to achieve is this:
Login / Register Button -> Clicked and a modal opens
The modal contains a header section where there is a "Login" tab and a "Register" tab, by default the login tab is selected. It then contains a body section that is a panel that switches between the "login.vue" file and the "register.vue" file.
It is from my understanding that I need to do the following:
Create a Vue file for the button that creates the modal that includes a vue file that houses the tabs and switching panel, that call the "Login" & "Register" Vue files.
I hope my understanding of the way that the Vue3.js framework handles things is correct.
I am very new to Laravel, and to Vue, so please bear with me.
My file structure is as follows
resources | js | Pages | Auth -> Login.vue (standard code in file)
resources | js | Pages | Auth -> Register.vue (standard code in file)
resources | js | Pages | Modal -> LoginRegister.vue
<script>
import Register from "./Auth/Register.vue";
import Login from "./Auth/Login";
export default {
data: function () {
return {
tabs: ["Login", "Register"],
selected: "Login",
};
},
components: {
Register,
Login,
},
};
</script>
<template>
<div>
<button
v-for="tab in tabs"
:key="tab"
#click="selected = tab;"
:class="['tab-btn', { active: selected === tab }]"
>
{{ tab }}
</button>
<component :is="selected" class="tab"></component>
</div>
</template>
or alternatively I have tried this code in the LoginRegister.vue too
<style>
.tab-btn {
padding: 6px 10px;
background: #ffffff;
cursor: pointer;
margin-bottom: 1rem;
border: 2px solid #cccccc;
outline: none;
}
.active {
border-bottom: 3px solid green;
background: whitesmoke;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
</style>
<script>
import Login from "./Auth/Login.vue";
import Register from "./Auth/Register.vue";
import PrimaryButton from "#/Components/PrimaryButton.vue";
export default { components: { Login, Register } };
</script>
<template>
<div>
<PrimaryButton v-on:click="showModal = true"
>Login / Register</PrimaryButton
>
<modal v-if="showModal" #close="showModal = false">
<div
class="modal fade"
id="myModal"
tabindex="-1"
role="dialog"
aria-labelledby="LoginRegisterModal"
>
<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 class="modal-title" id="myModalLabel">Login / Register</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a
href="#tab1"
aria-controls="home"
role="tab"
data-toggle="tab"
>Login</a
>
</li>
<li role="presentation">
<a
href="#tab2"
aria-controls="profile"
role="tab"
data-toggle="tab"
>Register</a
>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<Login></Login>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<Register></Register>
</div>
</div>
</div>
</div>
</div>
</div>
</modal>
</div>
</template>
I still have not worked out how to create a button that will launch this in a modal yet too, I know I am a long way off, but I would really appreciate guidance.
I found a solution which works well... the following code.
<script setup>
import { computed, onMounted, onUnmounted, watch } from 'vue';
const props = defineProps({
show: {
type: Boolean,
default: false,
},
maxWidth: {
type: String,
default: '2xl',
},
closeable: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(['close']);
watch(() => props.show, () => {
if (props.show) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = null;
}
});
const close = () => {
if (props.closeable) {
emit('close');
}
};
const closeOnEscape = (e) => {
if (e.key === 'Escape' && props.show) {
close();
}
};
onMounted(() => document.addEventListener('keydown', closeOnEscape));
onUnmounted(() => {
document.removeEventListener('keydown', closeOnEscape);
document.body.style.overflow = null;
});
const maxWidthClass = computed(() => {
return {
'sm': 'sm:max-w-sm',
'md': 'sm:max-w-md',
'lg': 'sm:max-w-lg',
'xl': 'sm:max-w-xl',
'2xl': 'sm:max-w-2xl',
}[props.maxWidth];
});
</script>
<template>
<teleport to="body">
<transition leave-active-class="duration-200">
<div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="ease-in duration-200"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="show" class="fixed inset-0 transform transition-all" #click="close">
<div class="absolute inset-0 bg-gray-500 opacity-75" />
</div>
</transition>
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to-class="opacity-100 translate-y-0 sm:scale-100"
leave-active-class="ease-in duration-200"
leave-from-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div v-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
<slot v-if="show" />
</div>
</transition>
</div>
</transition>
</teleport>
</template>
Then use headless ui for the switching tabs, works well.
This is the code that i have:
<div class="news-container">
<div class="flex_column av_two_third flex_column_div first">
<div class="news-date"><h2>jan 2015</h2></div>
<div class="news-entry">
<div class="news-title"><h2>new title</h2></div>
<div class="news-source">wearhouse</div>
<div class="news-content">excerpt goes here.</div>
</div>
</div>
<div class="flex_column av_one_third flex_column_div">myimage</div>
</div>
how can i get the image to float in the middle vertically of it's div.
i tried adding this code:
.img{
position: absolute;
top: 50%;
margin-top: -100px;
}
but because i have padding of 30px on the news containter it doesn't seem to work properly.
I have my live page at:
http://nodal.rudtek.com/about-us/press-room/news-features/
Try using line-height, usually it works perfectly for me, so chances are it will for you too. Hope it helps.
I am creating a horizontal list of images with descriptions that scale with browser height. The descriptions are fixed-width and the images preserve their aspect ratio. Here's my code:
HTML
<main>
<ol id="projects">
<li class="project">
<div class="preview"><img src="http://placehold.it/40x40" /></div>
<div class="desc"></div>
</li><li class="project">
<div class="preview"><img src="http://placehold.it/40x40" /></div>
<div class="desc"></div>
</li><li class="project">
<div class="preview"><img src="http://placehold.it/40x40" /></div>
<div class="desc"></div>
</li><li class="project">
<div class="preview"><img src="http://placehold.it/40x40" /></div>
<div class="desc"></div>
</li>
</ol>
</main>
CSS
html,body,main,#projects{
height:100%;
}
#projects {
width:1000px;
float:left;
overflow:visible;
white-space:nowrap;
}
.project {
height:100%;
display:inline-block;
}
.desc{
background-color:#afa;
float:right;
width:10em;
height:100%;
}
.preview{
float:left;
height:100%;
width:auto;
}
.preview img{
height:100%;
min-width:10px;
}
Here's the JSFiddle
When the page is first loaded, the images behave as desired. However, as soon as the viewport is resized vertically, they lose their aspect ratio. However, if one reloads the page with the new viewport dimensions, the images behave correctly again. See the GIF:
Is this my error, a browser error, or some combination of the two? Is there an alternative way to achieve my goal?
In our application, there is a situation where there is a grid on two pages. I want to get text of columns from the grids. But both grid's column text has little different HTML.
Page 1 grid HTML:
<div class="ngHeaderContainer" ng-style="headerStyle()" style="width: 598px; height: 30px;">
<div class="ngHeaderScroller" ng-style="headerScrollerStyle()" ng-header-row="" style="height: 30px;">
<div class="ngHeaderCell ng-scope col0 colt0" ng-class="col.colIndex()" ng-repeat="col in renderedColumns" ng-style="{ height: col.headerRowHeight }" style="height: 30px;">
<div class="ngVerticalBar ngVerticalBarVisible" ng-class="{ ngVerticalBarVisible: !$last }" ng-style="{height: col.headerRowHeight}" style="height: 30px;"> </div>
<div ng-header-cell="">
<div class="ngHeaderSortColumn " ng-class="{ 'ngSorted': !col.noSortVisible() }" ng-style="{'cursor': col.cursor}" style="cursor: pointer;" draggable="true">
<div class="ngHeaderText ng-binding colt0" ng-class="'colt' + col.index" ng-click="col.sort($event)">Request ID</div>
For this, I've written xpath //div[#class='ngHeaderContainer']//div[#ng-header-cell='']//div[contains(#class,'ngHeaderText')]
Page 2 grid HTML
<div class="ngHeaderContainer" ng-style="headerStyle()" style="width: 598px; height: 30px;">
<div class="ngHeaderScroller" ng-style="headerScrollerStyle()" ng-header-row="" style="height: 30px;">
<div class="ngHeaderCell ng-scope col0 colt0" ng-class="col.colIndex()" ng-repeat="col in renderedColumns" ng-style="{ height: col.headerRowHeight }" style="height: 30px;">
<div class="ngVerticalBar ngVerticalBarVisible" ng-class="{ ngVerticalBarVisible: !$last }" ng-style="{height: col.headerRowHeight}" style="height: 30px;"> </div>
<div ng-header-cell="">
<div class="ng-scope ng-binding" ng-click="onColumnClick( 3, 'select', $event)">
Request ID
<img class="" ng-click="onColumnClick( 3, 'delete', $event)" src="styles/images/common/delete.png" ng-show="true">
<img>
</div>
For this, I've written xpath //div[#class='ngHeaderContainer']//div[#ng-header-cell='']/div
For grid, I've written a class and in that class I've method which returns column names. Since, xpath till reach to column name is different for grid on two different pages, I won't be able to use same method.
Can someone please help me to get xpath which can be used to return column names of the grid of both the pages?
This xpath will do it hopefully. I ran into similiar issue. Took help from here. This should return you both elements
//*[contains(#class, 'ng-binding')]