Hi I'm having Datepicker (based on the react-date-picker package) inside Material ui Dialog.Dialog works perfectly but When i click on datepicker it scrolling down and cuts off and scroll showing.
this is my Example
how do i overcome this with css
overflow scroll couldn't solved the issue because i'm having a list item
You are using the react-date-picker combined with the material-ui's <Dialog> component, and the problem is that the date-picker is rendered inside the Dialog's DOM, so it's blocked to the visible part of the dialog.
Based on the API of react-date-picker there is no way to change the element to render date-picker box, so one option is to use another date picker.
You can use the material-pickers component:
import DateFnsUtils from "#date-io/date-fns";
import { MuiPickersUtilsProvider } from "#material-ui/pickers";
import { DatePicker } from "#material-ui/pickers";
<Dialog open={true} aria-labelledby="form-dialog-title">
<DialogContent>
<DialogContentText>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used
in laying out print, graphic or web designs. The passage is
attributed to an unknown typesetter in the 15th century
</DialogContentText>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker />
</MuiPickersUtilsProvider>
</DialogContent>
<DialogActions>
<Button>ok</Button>
</DialogActions>
</Dialog>
Check it here: https://codesandbox.io/s/material-datepicker-inside-dialog-i6wts
You can find all the options for the material datepicker in the API docs.
I have fixed the issue. Note this only work for some cases. Because the cut off issue has only happened to the first row in my case. You can fix with first child in CSS
I have applied the position to the calendar only when it at first child
.react-calendar {
position: fixed !important;
top: calc(100% - 479px) !important;
}
if you are having an issue, please Modify your modal first . This only happens using on modal.
I'm just a beginner to CSS so this one came first and it worked for me . Thanks #Dekel
Related
On button click an NgbModal modal box will be loaded. The modal is having an ag-grid-angular component.
This grid have a date picker column. I am using primeng date picker.
HTML code for calendar display.
<p-calendar class="ui-datepicker" type="number" dateFormat="dd-mm-yy" monthNavigator="true" [maxDate]=today [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999', width:'200px'}"
yearRange="1930:2030" yearNavigator="true" showButtonBar="true" [(ngModel)]="dateValue" (onSelect)="onSelectDate()">
</p-calendar>
The problem here is that the date picker calendar is always hidden inside the grid. like this.
How can I solve this.
This can be solved, by looking at the CSS property overflow of the CSS class .ag-root-wrapper.
This class is declared on the <ag-grid-angular> directive (see screenshot).
The solution for me was to include an overwrite of the overflow property in the css of the component that includes the <ag-grid-angular> directive. (The component where I include ag-grid on my html).
// Put this on the component that includes ag-grid
::ng-deep .ag-root-wrapper {
overflow: visible;
}
The following Stack Overflow Post helped me to identify the solution.
Add appendTo="body" like this:
<p-calendar appendTo="body" class="ui-datepicker" type="number" dateFormat="dd-mm-yy" monthNavigator="true" [maxDate]=today [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999', width:'200px'}"
yearRange="1930:2030" yearNavigator="true" showButtonBar="true" [(ngModel)]="dateValue" (onSelect)="onSelectDate()">
</p-calendar>
The issue here is that the calendar popup is being clipped by the container. This is a common issue when using date pickers.
To solve this you need to set the popup element to the document body, the simplest solution for you would be to add [appendTo]="'body'" to your calendar component, this is a property which exists on the API of the primeng-calendar.
See this blog for more details on the implementation, as it has an example using primeng and ag-grid with angular: https://blog.ag-grid.com/using-third-party-datepickers-in-ag-grid/#appending-body
I am referring to the React Lazy Load Image Component.
I need to tweak the display attribute of the image I am rendering with this library. But can't seem to find any way.
I tried to wrap the component with a div and use style={{display: 'inline'}}, but it didn't work.
<div className="ui image" style={{ display: 'inline' }}>
<LazyLoadImage
src={src}
effect="blur"
/>
</div>
I am using this portion of code inside a <Card/> component. The default css of the library contains display: inline-block which is making my image have an extra border at the bottom. I don't want it.
P.S.
I am using Semantic UI for my entire project. I want to use whatever style Semantic is providing me. That's why I need to teak the display attribute of this library.
I have a component that, upon a hover, shows a button and a link that you can click on. This is not a menu... just a box in the middle of the page.
For accessibility, I would like a user to be able to tab into the container (happens now, and displays the content in the .HiddenUntilHover class) AND also continue to tab to the button and link that show up on the hover/focused state.
Right now you can focus on the container and see the hover state; however, when you tab it just goes to the next element and does not allow you to tab to the button or link WITHIN the hover state.
Pseudo code example:
/* My component .jsx */
<div tabIndex="0" className="MainContainer">
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
/* I would like to be able to tab to these clickable things! */
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
And my SCSS:
.HiddenUntilHover {
display: none;
}
MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
display: block
}
I ran into this issue a few days ago and I solved it using css classes to make the hovered content accessible via keyboard navigation.
The way I got this working was to use css pseudo-classes to ensure that when the div element is active & focused that the buttons inside also display. Specifically the additional use of :focus-within & :focus-visible should ensure that when you tab over the list items, their contents are also displayed and keyboard accessible.
.MainContainer {
&:not(:hover, :focus, :active, :focus-visible, :focus-within) {
.HiddenUntilHover {
visibility: hidden;
}
}
}
<body>
<div tabIndex="0" className="MainContainer">
Content
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
</body>
Here's a link to the Codesandbox demo of this working
When the box is in focus, tabbing further to the button will make the box blur, which will hide it, and its contents, so focus will move to the next accessible element. I think this is the behavior you are experiencing.
You might consider using inserting an aria-activedescendant or tabindex attribute when the box comes into focus. This requires a little javascript.
Strictly speaking, you don't need to rely on the hover state to make that control accessible. You could have an offscreen (or clipped) button/link that is not a DOM child of the hidden (display:none) box. If you take this approach, read up on the aria-owns attribute.
As long as it is marked up as a button or link (or has a tabindex="0" setting), and is not 'really' hidden, it ought to be possible to tab to it.
Try increasing the properties of the class MainContainer
for example.
.MainContainer {
width: 100%;
height: 100px;
}
.MainContainer .HiddenUntilHover {
display: none;
}
.MainContainer:hover .HiddenUntilHover, .MainContainer:focus .HiddenUntilHover {
display: block;
}
Elements appearing on hover are inherently inaccessible. You are experiencing one side of the problem with your code, where it is difficult to make it keyboard accessible.
But think about touch screens that have no real concept of hover: is there some way to reach your button on a smarphone or tablet?
For a more pragmatic answer, if you need to stay with hover, a less hacky solution than the two already posted ones could be the following:
use focusin and focusout events. See for example this question for explanations and differences with focus/blur, and this w3school doc for browser compatibility.
You will have to structure your HTML differently, such as:
<div id="outer">
<div id="hover">
...
</div><!--hover-->
<button>Your button which only appears on hover</utton>
</div><!--outer-->
As well as use a bit of js:
$('#outer').on('focusin', __=>$('#hover').classNames.add('keep-visible'));
$('#outer').on('focusout', __=>$('#hover').classNames.remove('keep-visible'));
With a corresponding .keep-visible class which will leave the element display:block (I'm not a CSS expert, I let you write the code).
The overal functionning is the following: when some element within #outer takes the focus, the focusin element is fired due to bubbling. In the event, you put your class .keep-visible which makes the element to stay visible.
The focusout event is fired when the focus leaves the last element within #outer. At that point you remove the .keep-visible class, which makes the element to disappear.
According to the link above, onfocusin/out aren't standard, but are supported by all major browsers including IE. Firefox is the last one to implement it in 52.0, so it's a kind of defacto standard; we can reasonably expect that it won't disappear soon.
The <dialog> tag, when opened with showModal(), will display the elements between it and its closing tag while disabling all other elements on the page. My question is: is it possible to override this behavior for a specific element? Example:
HTML:
<div id="container">
<dialog id="myDialog">
<button id="close" type="reset">Close</button>
<button id="create">Add Element</button>
</dialog>
</div>
<menu>
<button id="openButton">Open Dialog</button>
</menu>
CSS:
.new-element {
width: 50px;
height: 50px;
border: 3px solid black;
background-color: blue;
position: fixed;
top: 50%;
}
JS:
const container = document.getElementById('container');
const openButton = document.getElementById('openButton');
const closeButton = document.getElementById('close');
const createButton = document.getElementById('create');
const myDialog = document.getElementById('myDialog');
openButton.addEventListener('click', function() {
myDialog.showModal();
});
closeButton.addEventListener('click', function() {
myDialog.close();
});
createButton.addEventListener('click', function() {
const div = document.createElement('div');
div.classList.add('new-element')
container.appendChild(div);
});
In a JSFiddle: https://jsfiddle.net/y7bkxvd4/
I'd like to find a way to position the blue square on top of the dialog. I realize it would be far easier to just append the new div to the dialog itself, but I've run into this in a situation where overflow was a concern and in using a module that uses react-portal. If it's not possible, cool, I can get behind that. But if it is, I'd like to know.
z-index has no effect, obviously.
The <dialog> element is added to the 'Top Layer' of the dom which has its own stacking order (z-index does not affect this -- it is set strictly by the order by which the elements are added). I don't believe you can manually add elements to this Top Layer, it is done in functions such as showModal(). You can find more information at: https://fullscreen.spec.whatwg.org/#new-stacking-layer but because the feature is still not universally supported its tough finding documentation on it. For example:
To remove an element from a top layer, remove element from top layer.
Real helpful..
A couple work arounds:
Change the added element to a dialog as well and call .showModal() when the element is appended. The problem with this approach is that .showModal() makes all element outside that element unavailable for user interaction. That means that your blue box is on top, but its also means you can't click "Close" or "Add Element" on the other modal. (NOTE: You'll also notice the "Close/Add Element" dialog is greyed out -- you can override this by changing .new-element::backdrop{...} but it still won't the change the fact you can't click "Close" or "Add Element") Example here (with the backdrop removed)
Change the added element to dialog, call .show() when the element is appended, and change the click event for 'Open Dialog' to .show() instead of .showModal. This allows you to also click past the blue box (even though its 'on top'), but it also allows you to click anywhere on the page (kind of defeating the purpose of a modal). The ::backdrop pseudo element is also not available because you are not using .showModal If you take this approach you would need to attach closing the blue box to the "Close" click event handler. Example here
My recommendation is to either use a plugin for modals (such as Bootstrap's) or make your own with the functionality you want (using Javascript). Dialogs are technically experiential technology so it won't be easy trying to get the behavior you want out of the box. This is probably as close as you will get, though you could improve it by adding your own "backdrop".
I have my own toolbar with toolbox and toolbarpalette.
I have followed this https://developer.mozilla.org/en/Skinning_XUL_Files_by_Hand
and background image for toolbar is not displaying, what can be wrong?
Cannot found any debug message in Error console
Note that Image #logoimage is displaying correctly
XUL
<toolbox id="navigator-toolbox" class="nav-box" crop="end">
<toolbarpalette id="BrowserToolbarPalette">
<image id="logoimage"/>
<toolbarbutton type="menu" label="&toolbar.quicklinks.label;" id="quicklinks">
<menupopup>
<menuitem class="menuitem-iconic" label="&toolbar.quicklinks.quicklink1;" image="chrome://tbar/skin/icon.png"/>
</menupopup>
</toolbarbutton>
</toolbarpalette>
<toolbar id="test-toolbar"
class="nav-bar"
mode="full"
iconsize="small"
customizable="true"
context="toolbar-context-menu"
toolbarname="Toolbar"
crop="end"
defaultset="logoimage,toolbarseparator,quicklinks">
</toolbar>
</toolbox>
CSS
toolbar.nav-bar {
background-image: url("chrome://tbar/skin/tbg.png");
}
#logoimage {
list-style-image: url("chrome://tbar/skin/logo.png");
}
As nobody could help, I asked in mozilla.dev.tech.xul Google group, and got an answer
Try adding "-moz-appearance: none;" to your CSS stanza. This turns off
OS-defined theming.
And that thing simply worked ! It also removes all OS specific look and feel effects
see: https://groups.google.com/group/mozilla.dev.tech.xul/browse_thread/thread/a4cd4452a72b9151#
Given that there are no issues in the code you show here I only see one explanation: the background image is being set to a different value elsewhere, maybe in some built-in CSS file. You can check the CSS rules applying to a particular UI element using DOM Inspector.
Does your toolbar have a height and width? I can't remember if they're block by default, but it might not be showing because it has no dimensions?