I'm not sure who here is familiar with using custom CSS styling within the Mendix Low-Code Development platform, but I'm running low on ideas so I figured it was worth the shot.
So for the app we’re working on, one of the things we have is a popup that comes up that users can input information on. It has an autocomplete widget, two date pickers, a radio buttons widget, and a template grid, and then below all of these input widgets are two buttons (Continue and Cancel). The template grid has the paging buttons active on it, and has some custom CSS styling active on it to set it to a specific height, enable y-axis scrolling on autoflow, and move the paging buttons to the bottom of the template grid instead of the top.
Clicking to go anywhere but the first or last page works fine, however clicking the “last page” button, or clicking the “next page” button to go to the last page, will result in everything but the template grid, and the continue and cancel buttons disappearing, and the template grid’s height shrinks to an unusable level. In the opposite direction, clicking the “first page” button, or clicking the “previous page” button to go the the first page, will result in essentially the entire popup being wiped out, with all the input widgets and action buttons disappearing, and leaving just a white page.
After looking around, it seems it’s due to some custom CSS that I had taken from a Mendix community forum post that I used to move the paging buttons on the template grid to the bottom of the grid as opposed to the top that’s causing the issue. If it’s because of issues with the paging buttons trying to readjust, is there a way to edit this CSS code so that these issues do not happen? The CSS code I used is shown below, any critiques on it would be super appreciated. Thank you!
.mx-grid.mx-templategrid{
display: flex;
flex-direction:column;
}
.mx-grid-searchbar{
order: 1;
}
.mx-grid-controlbar{
order: 2;
}
.mx-grid-content{
order: 1;
}
I am having a popup page,in that page i have a select box, which i have applied jquery UI selectmenu. The problem is that the selectbox is in the bottom of the popup, and when it gets open, it get out of the popup limits.
My actual code (I cannot paste here my code for security reasons) has:
The z-index of of the select box is bigger compared to pop up container´s one, so its rendering on top of the pop up with no-issues.
The z-index for the select box is in relative with the pop up,not with the whole page,so the select box is hiding behind the pop-up when
the pop up height is less.
The desired behaviour is when popup height is less than needed to show all the select box. I need to show the select box without hiding.
If i did not apply jquery ui select menu, it´s working as expected.
Please find the below images for reference.
1.When having enoug popup size.
2.when popup size is less ,select is hiding.
3.What i am expecting.
Please suggest me what i can do to solve this.
Add CSS property overflow-y:visible on the main popup div:
This will make the inner content that is outside the main div top/bottom bounds to be rendered.
popupSelector {
overflow-y: visible;
}
Here is the documentation about overflow-y
I've got div with overflow="scroll" on it, which is displaying content (icefaces app). I've got event for right mouse button with displaying context menu of element of this content, but context menu is displaying inside of this div, i must scroll to see this context menu. This context menu is hidden div - after mouse click it's set to visible.
It's physically putted inside of scroll panel (and it unfortunatelly must be inside). Anyone have idea how to resolve this problem (i tried everything from google). Maybe some js trick or something like that? ;)
Problem is that i need it out of this scroll ;)
Thanks a lot.
Matthew
I have a Panel that I'm using as a modal dialog box, and as such the contents should be hidden from view while the page is loading. However, if I use CSS to set the div's display:none or visibility:hidden then the YUI show() & hide() methods don't work properly (eg, clicking the button to call up the modal dialog greys out the screen, but the referenced div does not appear). Can anyone point me towards the best way to do this?
Thanks!
Try adding yui3-widget-loading to the container div. When Y.Panel is instantiated, it will remove this class. You can then define .yui3-widget-loading { display:none; } so it is not visible during page load.
I have a div at the top of my mobile application that is position:fixed so it will stay on the top of the browser (it scrolls away in ios 4 and lower which is fine). When an input is focused and brings up the keyboard, the div moves down to the middle of the page. See screenshots:
http://dbanksdesign.com/ftp/photo_2.PNG
Edit:
Here is a simplified test page:
http://dbanksdesign.com/test/
<body>
<div class="fixed"><input type="text" /></div>
<div class="content"></div>
</body>
.fixed { position:fixed; top:0; left:0; width:100%; background:#ccc; }
.content { width:100%; height:1000px; background:#efefef; }
Unfortunately you are probably best off using absolute positioning for your fixed elements when working with IOS. Yes, IOS5 does claim to support fixed positioning, but it all falls down when you have interactive controls within that fixed element.
I had the same problem with the search box on my switchitoff.net site. In IOS5 the fixed header would jump down the page if the search box gained focus while the page was scrolled. I tried various workarounds, and the one I currently have is a <div> which sits over the search box. When this <div> is clicked the following occurs:
The page is scrolled to the top
The fixed header is changed to absolute
The <div> covering the search box is hidden
The search <input> is focused
The above steps are reversed when the search box loses focus. This solution prevents the header jumping down the page when the search box is clicked, but for a simpler site you are probably better using absolute positioning in the first place.
There is another tricky issue with IOS5 and fixed positioning. If you have clickable elements on your fixed area with body elements scrolled behind them, this can break your touch events.
For example, on switchitoff.net the buttons on the fixed header became unclickable when interactive elements were scrolled behind them. touchstart was not even being fired when these buttons where tapped. Luckily onClick still seemed to work, although this is always a last resort for IOS because of the delay.
Finally notice how (in IOS5) you can click on the fixed header and scroll the page. I know this emulates the way you can use the scroll wheel over a fixed header in a normal browser, but surely this paradigm doesn't make sense for a touch-UI?
Hopefully Apple will continue to refine the handling of fixed elements, but in the meantime it's easier to stick with absolute positioning if you have anything interactive in your fixed area. That or go back to IOS4 when things were so much easier!
Using the JohnW recomendation to use absolute instead of fixed I came up with this workaround:
First set up a bind to detect when the input is onFocus, scroll to the top of the page and change the element position to absolute:
$('#textinput').bind('focus',function(e) {
$('html,body').animate({
scrollTop: 0
});
$('#textinput-container').css('position','absolute');
$('#textinput-container').css('top','0px');
});
Note that I'm using the id textinput for the input and textinput-container for the div top bar that is containing the input.
Set up another bind to detect when the input is not on focus anymore to change the position of the div back to fixed
$('#textinput').bind('blur',function(e) {
$('#textinput-container').css('position','fixed');
$('#textinput-container').css('top','0px');
});
I've been using a similar solution for a bar fixed at the bottom of the page, the code posted should be working for a bar fixed at the top but I didn't test it
Modified version of pablobart's solution but without scrolling to top:
// Absolute position
$('#your-field').bind('focus',function(e) {
setTimeout(function(){
$('section#footer').css('position','absolute');
$('section#footer').css('top',($(window).scrollTop() + window.innerHeight) - $('section#footer').height());
}, 100);
});
// Back to fixed position
$('#your-field').bind('focusout',function(e) {
$('section#footer').removeAttr('style');
});
The simple CSS:
section#footer
*{ position:fixed; bottom:0; left:0; height:42px }*
This solution works pretty well for me. All the code does is wait until the user taps on a text field, then changes the element identified by the 'jQuerySelector' parameter from a 'fixed' to 'static' position. When the text field looses focus (the user tapped on something else) the element's position is changed back to 'fixed'.
// toggles the value of 'position' when the text field gains and looses focus
var togglePositionInResponseToInputFocus = function(jQuerySelector)
{
// find the input element in question
var element = jQuery(jQuerySelector);
// if we have the element
if (element) {
// get the current position value
var position = element.css('position');
// toggle the values from fixed to static, and vice versa
if (position == 'fixed') {
element.css('position', 'static');
} else if (position == 'static') {
element.css('position', 'fixed');
}
}
};
And the associated event handlers:
var that = this;
// called when text field gains focus
jQuery(that.textfieldSelector).on
(
'focusin',
function()
{
togglePositionInResponseToInputFocus(that.jQuerySelector);
}
);
// called when text field looses focus
jQuery(that.textfieldSelector).on
(
'focusout',
function()
{
togglePositionInResponseToInputFocus(that.jQuerySelector);
}
);
The reason the buttons are becoming unclickable is because they have actually scrolled invisibly with the content. They are still there, just not at the location they were originally, nor where you see them.
If you can guess how much the button has moved (based on how much the content has moved) you can click on the invisible button and it will function normally. In other words, if the content has scrolled by 50 pixels, click 50 pixels away from the button and it will work.
You can scroll the content manually (even by a tiny amount) and the buttons will again work as expected.
Just hide your fixed element on focus and then show it again on focusout. I bet your users don't need to see it when focused. I know this is not a solution but I think it is a better approach. Keep it simple.