I have a page that auto opens a dialog box. before, you have to click in it to close, but now it automatically closes immediately without even seeing whats inside the dialog box. here's my code:
if (jQuery('#renewalNotice').length)
{
jQuery('#renewalNotice').dialog({ width: 518, title: 'Important Notice', autoOpen: true, draggable: false, modal: true, resizable: false, stack: false });
}
<div id="renewalNotice" style="display: none;">
<div id="subscription-notice">
<span class="daysLeft"<?=($daysRemaining <= 5 ? ' style="color: #aa0000;"' : '')?>><?=$daysRemaining?></span>
<span class="ksDetails">
Call us: +61 3 3333 3333<br />
</span>
</div>
</div>
Related
The title almost says it all. But here I provided some examples and a sandbox for you to see what I'm talking about.
Here is a link to the sandbox that I created and added all dependencies.
As you can see in the first picture, my dropdown menu goes behind everything and part of it literally becomes hidden. It's there but not visible
And here is what a dropdown should look like:
I thought to myself that the problem might be because of the z-index. But the element has a z-index: 1000; style applied to it and you can see the applied styles and selected element in chrome inspect in the below picture. As you can see the element's full rectangle is highlighted in inspect but is not visible.
But there is a position: fixed; header with a dropdown menu inside of it which uses react-bootstrap dropdown as well. But it is shown perfectly and without any problems. I gave that header a static position and here is the result. The dropdown was still being shown perfectly.
I've been thinking and searching about this problem for weeks and still couldn't find a solution. Any help will be much appreciated and thank you in advance.
import React from "react";
import DataTable from "react-data-table-component";
import DataTableExtensions from "react-data-table-component-extensions";
import "react-data-table-component-extensions/dist/index.css";
import { Dropdown } from "react-bootstrap";
function UsersAdmin() {
const users = [
{
id: 1,
first_name: "test",
last_name: "test",
email: "test",
mobile: "test",
avatar: "avatar.png",
created_at: "2021-11-15T19:14:44.000000Z",
updated_at: "2021-11-15T19:14:44.000000Z"
},
{
id: 2,
first_name: "test",
last_name: "test",
email: "test",
mobile: "test",
avatar: "avatar.png",
created_at: "2021-11-15T19:14:44.000000Z",
updated_at: "2021-11-15T19:14:44.000000Z"
},
{
id: 3,
first_name: "test",
last_name: "test",
email: "test",
mobile: "test",
avatar: "avatar.png",
created_at: "2021-11-15T19:14:44.000000Z",
updated_at: "2021-11-15T19:14:44.000000Z"
}
];
const columns = [
{
name: "language item",
selector: "id",
sortable: true,
width: "90px"
},
{
name: "language item",
selector: "first_name",
sortable: true
},
{
name: "language item",
selector: "last_name",
sortable: true
},
{
name: "language item",
selector: "email",
sortable: true,
grow: 1.5
},
{
name: "language item",
selector: "mobile",
sortable: true
},
{
name: "language item",
selector: "created_at",
sortable: true,
grow: 2
},
{
name: "language item",
cell: (row) => (
<div style={{ width: 50, height: 50 }}>
<img
src={`${process.env.REACT_APP_BASE_URL}/storage/${row.avatar}`}
style={{ width: "100%", borderRadius: "50%" }}
/>
</div>
),
width: "75px"
},
{
name: "language item",
cell: (row) => (
<Dropdown>
<Dropdown.Toggle size="sm" />
<Dropdown.Menu size="sm">
<Dropdown.Item>
<i className="fa fa-edit mr-1" /> {"language item"}
</Dropdown.Item>
<Dropdown.Item>
<i className="fa fa-download mr-1" /> {"language item"}
</Dropdown.Item>
<Dropdown.Item>
<i className="fa fa-download mr-1" /> {"language item"}
</Dropdown.Item>
<Dropdown.Item>
<i className="mdi mdi-eye mr-1" /> {"language item"}
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
),
width: "75px"
}
];
return (
<>
<div className="container-fluid">
<div className="p-3">
<h2>{"language item"}</h2>
</div>
<div className="card" style={{ width: "100%" }}>
<div className="card-body">
<DataTableExtensions exportHeaders columns={columns} data={users}>
<DataTable
columns={columns}
data={users}
pagination
defaultSortAsc={false}
defaultSortField="updated_at"
noHeader
/>
</DataTableExtensions>
</div>
</div>
</div>
</>
);
}
export default UsersAdmin;
it's not about z-index. Your selection is hiding because the container of your table has overflowY hidden:
.hkMDrI {
position: relative;
width: 100%;
border-radius: inherit;
overflow-x: auto;
overflow-y: hidden;
min-height: 0;
}
So you won't be able to see what is hide outside the height of that div.
Width your current html I don't think it has any solution unless you don't need scrolling with that table, which I doubt.
Changing the html I would place your .dropdown-menuoutside the scrolling div however you will need javaScriptto position the element the right place, under the arrow icon.
I'm trying to make the interactive content of cells in ag-grid accessible to screen readers and keyboard only users.
Is there a configuration setting or technique in ag-grid that will allow keyboard only navigation to interact with buttons and links within the cells? The headers and filters allow CONTROL + RETURN keys to change the focus to their content but not the body cells.
I've created an example grid on Plnkr with columns that have both a link and a button. Any hints or suggestions would be awesome!
We're using ag-grid-community 25.1.0 and ag-grid-react 25.1.0.
https://plnkr.co/edit/8qDxw4GYnqdvjtAU
```
<div style={{ width: '100%', height: '100%' }}>
<div
id="myGrid"
style={{
height: '100%',
width: '100%',
}}
className="ag-theme-alpine"
>
<AgGridReact
modules={AllCommunityModules}
frameworkComponents={{
medalCellRenderer: MedalCellRenderer,
totalValueRenderer: TotalValueRenderer,
linkCellRenderer: LinkCellRenderer,
}}
defaultColDef={{
editable: false,
sortable: true,
flex: 1,
minWidth: 100,
filter: true,
resizable: true,
}}
onGridReady={onGridReady}
rowData={rowData}
>
<AgGridColumn field="athlete" />
<AgGridColumn field="year" cellRenderer="linkCellRenderer" />
<AgGridColumn field="gold" cellRenderer="medalCellRenderer" />
<AgGridColumn field="silver" cellRenderer="medalCellRenderer" />
<AgGridColumn field="bronze" cellRenderer="medalCellRenderer" />
<AgGridColumn
field="total"
minWidth={175}
cellRenderer="totalValueRenderer"
/>
</AgGridReact>
</div>
</div>
```
You can accomplish this by using custom cell renderers and tapping into it's refresh lifecycle method as well as the grid's onCellFocus callback.
https://codesandbox.io/s/focus-links-7b6yz
I am using vue-awesome-swiper component to create a nice images, the problem is when the next image comes in, a noisy gray overlay showing when loading the image.
I've tried to set lazy to false in my configuration but without avail.
Here is my swiper component content:
<div class="swiper-lazy c-slider__img" :data-background="require(`~/assets/images/${slide.image}`)">
<div class="c-slider__content h-container">
<div class="c-slider__content-block">
<h2 class="c-slider__heading">{{ slide.heading }}</h2>
<p class="c-slider__text">{{ slide.content }}</p>
<n-link
:to="localePath({ path: slide.url })"
class="c-slider__more"
>
Read More
<span class="c-slider__more-icon">
<app-icon
name="icon-arrow"
:width="21"
:height="8"
color="#fff"
/>
</span>
</n-link>
</div>
</div>
<div class="swiper-lazy-preloader"></div>
</div>
<script>
import AppIcon from '~/components/UI/AppIcon'
export default {
components: {
AppIcon
},
props: {
slides: {
type: Array,
default: () => []
}
},
data: () => ({
swiperOption: {
preloadImages: false,
lazy: true,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 5000
}
}
})
}
</script>
I have created a jQuery-UI form to add a note to specific areas of a website. The form gets submitted to a PHP script for processing.
Each area of the site is defined by an area and a uniqueId.
The modal form works for a single form on the page (i.e. where I only have 1 area and 1 unique Id displayed at any time). How do I modify the code so that I can re-use as much as possible and cater for multiple areas / uniqueId's on the same page?
One solution I have found is to use PHP to create a separate set of JavaScript methods and a separate div for each area. This seems like the long way around.
The code is available as a JSFiddle here: JSFiddle
The HTML
<h1>Scratch Pad</h1>
<button id="create-note">Add Note</button>
<div id="dialog-form" title="Add Note">
<form>
<fieldset>
<label for="name">Note</label>
<textarea name="note" id="note" class="text ui-widget-content ui-corner-all">
</textarea>
<input type="hidden" name="uniqueId" value="1" />
<input type="hidden" name="area" value="aircraft" />
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
And the JavaScript
$(function() {
var dialog, form;
function addNote() {
farea = $('#area').val();
fnote = $("#note").val();
funiqueId = $('#uniqueId').val();
// Post the data
$.post("api/addnote.php", {
area: farea,
uniqueId: funiqueId,
note: fnote
},
function() {
window.location.reload(true);
dialog.dialog("close");
});
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create a note": addNote,
Cancel: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addNote();
});
$('button[id^="create-note"]').button().on("click", function() {
dialog.dialog("open");
});
});
My problem was a conceptual one. I don't need to create a new form for each button, I just need to set the hidden attributes when the button is clicked.
Full solution:
HTML
<h1>Scratch Pad</h1>
<button id="create-note-1" >Add Note</button>
<button id="create-note-2" >Add another note</button>
<div id="dialog-form" title="Add Note">
<form>
<fieldset>
<label for="name">Note</label>
<textarea name="note" id="note" class="text ui-widget-content ui-corner-all">
</textarea>
<input type="hidden" id="uniqueId" name="uniqueId" />
<input type="hidden" id="area" name="area" />
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
Javascript:
$(function() {
var dialog, form;
function addNote() {
farea = $('#area').val();
fnote = $("#note").val();
funiqueId = $('#uniqueId').val();
// Post the data
$.post("api/addnote.php", {
area: farea,
uniqueId: funiqueId,
note: fnote
},
function() {
window.location.reload(true);
dialog.dialog("close");
});
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create a note": addNote,
Cancel: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addNote();
});
});
And the small repeatable snippet for each button:
$(function() {
$("#create-note-1").button().on("click", function() {
$("#uniqueId").val('1');
$("#area").val("aircraft");
$("#dialog-form").dialog("open");
});
$("#create-note-2").button().on("click", function() {
$("#uniqueId").val('8');
$("#area").val("pilot");
$("#dialog-form").dialog("open");
});
});
Like slick. Struggling to get it working w/ dynamic dataset from Meteor. Problem that I now have, when opening prior instances of an item I'm left w/ ghost blank slides from priorly selected. If I open an item that has 15 images, close it and select another w/ 1 - I have 14 blank slide. Also, if I had clicked through the 15, say to the 7th slide, when I open the new item w/ 1 I'm still pointed at slide 7, which is blank, and need to click 6 slides to the left to actually see an image.
It would seem to me that I need to somehow reset the slick control? I'm just not sure where of how to do it.
Followed instructions here: Image slider doesn't show my images properly before they're cached to get up and running.
parent template
<div class="col-md-7">
<div class="gallery">
{{#each galleryImages}}
{{> slickItem}}
{{/each}}
</div>
</div>
slick template
<template name="slickItem">
<img class="slick-image" src="{{href}}">
</template>
I've played around w/ a few different options on the slick render.
Template.slickItem.onRendered(function() {
setTimeout(function() {
$('.gallery').slick({
arrows: true,
dots: false,
autoplay: false,
infinite: true,
mobileFirst: true,
adaptiveHeight: true
})
}, 100);
});
Working with friend Patrick Lewis we worked out the following - done now in React versus Blaze.
Carousel = React.createClass({
getInitialState: function() {
return {
carousel : null
}
},
componentDidMount() {
console.log("componentDidMount");
this.setState({
// carousel: $('#maveletCarousel')
carousel: $(this.props.id)
}, function() {
console.log("carousel: componentDidMount", this.state);
this.state.carousel.carousel();
});
},
initCarousel: function() {
// $('#maveletCarousel').carousel();
// Initialize the carousel
if( this.state.carousel ) {
this.state.carousel.carousel({
interval : 2000
});
}
},
render() {
var hrefId = "#" + this.props.id;
// <li data-target={hrefId} key={ index } data-slide-to={ index } className={ indicatorClass }></li>
return (
<div id={this.props.id} className="carousel slide">
<ol className="carousel-indicators">
{
this.props.slides.map((slide, index) => {
return (
<li data-target={hrefId} key={ index } data-slide-to={ index }></li>
);
})
}
</ol>
<div className="carousel-inner" role="listbox">
{
this.props.slides.map((slide, index) => {
return (
slide && <Slide slide={ slide } key={ index } index={ index } initCarousel={ this.initCarousel }/>
);
})
}
</div>
<a className="left carousel-control" href={ hrefId } role="button" data-slide="prev">
<span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="right carousel-control" href={ hrefId } role="button" data-slide="next">
<span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</div>
);
}
});
Slide = React.createClass({
componentDidMount() {
this.props.initCarousel();
},
render() {
var isActive = 'item'
if( this.props.index === 0 ) {
isActive = 'item active'
}
return (
<div className={ isActive }>
<img src={this.props.slide.href}></img>
</div>
)
}
})