I'm using recaptcha v.2 for my website, but for some reason, it brakes the layout because it won't size the space of the parent box (div).
Here's my code:
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('recaptcha', {
'sitekey' : 'mysitekey'
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
and html:
<div class="form-group">
<div id="recaptcha" required=""></div>
</div>
The form-group is already max-width: 100%; but for some reason, the recaptcha doesn't follow that rule:
Here's an example:
https://careercollege.sehc.com/vancouver/programs/hca-diploma-program/.
Any suggestion?
I do this sometimes:
#recaptcha {
overflow: hidden;
border-right: solid 1px lightgray;
}
Related
I have a problem with checking CSS properties in a Testcafe session.
I have a progres bar on the site with the html:
<div class="progress-bar progress-bar-success"></div>
When the operation is ready, this progress ba becomes a width of 100%.
<div class="progress-bar progress-bar-success" style="width: 100%;"></div>
In my code I use now the line
await t.expect(Selector('.progress-bar.progress-bar-success').getStyleProperty('width')).eql('100%', {timeout: 90000})
But it will not work. It waits the whole time until the waiting time has finished.
I use a similar function inside another run, where I wait for changing the color of an item with CSS and RGB, this works perfectly.
I think now the problem is, that the style is not available on startup. Or is there any other possibility?
The issue occurs because according to the docs the getStyleProperty method returns the computed value of width, which means that the value is returned in pixels, while you want to check the value in percents.
As a solution, I recommend you use the ClientFunctions mechanism, which allows you to get the desired value.
I prepared a sample for you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bar {
width: 500px;
height: 50px;
border: 1px solid black;
overflow: hidden;
}
.progress {
height: 100%;
background-color: black;
}
</style>
</head>
<body>
<div class="bar">
<div class="progress" style="width: 0;"></div>
</div>
<script>
setInterval(function () {
var progress = document.querySelector('.progress');
progress.style.width = Math.min(100, parseInt(progress.style.width) + 1) + '%';
}, 50);
</script>
</body>
</html>
And here is the test code:
import { Selector, ClientFunction } from 'testcafe';
fixture `progress`
.page `index.html`;
const getStyleWidthInPercents = ClientFunction(() => {
return document.querySelector('.progress').style.width;
});
test('progress', async t => {
await t.expect(getStyleWidthInPercents()).eql('100%', {timeout: 90000})
});
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>
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;
}
}
Is there any simple way , on how i can drag an drop without coding in visual studio, while using Bootstrap and Asp.net in Visual Studio .
Drag and drop functionality can be implemented in HTML5 compliant browsers, it's important that you're aware of this.So if you have users who are using old browsers this functionality may not work.
Here's a simple example which let's user drag the red <div> and drop it in one of two destination <div> elements:
<head runat="server">
<title></title>
<script type="text/javascript">
function dragStart(e) {
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
function dragOver(e) {
e.preventDefault();
e.stopPropagation();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
<style type="text/css">
#dropBox1,#dropBox2 {
width: 200px;
height: 200px;
border: 5px dashed gray;
background: lightyellow;
text-align: center;
margin: 20px 0;
color: orange;
}
#dragA {
width: 200px;
height: 200px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div id="dropBox1" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped div can be inserted here-->
</div>
<div id="dropBox2" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped div can be inserted here-->
</div>
<div id="dragA" draggable="true" ondragstart="dragStart(event);">
</div>
</body>
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!