I'm using Minton Template (http://coderthemes.com/minton_2.1/blue_hori/index.html)
As you can see from the image above, the top of datepicker being blocked by the fixed header menu. It seems the datepicker not automatically being placed at the bottom of the input field.
This is the JS code that I used.
jQuery('#date-range').datepicker({
toggleActive: true
});
This happen on smaller screen. Bigger screen display correctly with the datepicker placed at the bottom of the input field as image below.
I dont want the menu blocks the datepicker. Please help.
check the z-index of datepicker. the z-index in the css should be greater for the datepicker class than for the menubar.
check this link for more information about z-index
Related
I've been trying to programmatically scroll a list (accordion) in an Ionic-Angular app and I’ve been having no success at all.
I reproduced it in this stackblitz: https://stackblitz.com/edit/stack-overflow-ionic-scroll-problem?file=src/app/home/home.page.ts
When you click on an item, it expands and I want it to align to the top of the screen (with the title visible). In this example, I am using scrollIntoView() to get it to the top but it disappears behind the toolbar.
I've tried many things to get it to align properly (including setting a "scroll-margin-top" as suggested on many posts) but this hasn't worked for me.
Also, I can't seem to be able to use the scrollBy() or scrollTo() method... they do nothing at all.
Can anybody help me figure this out and get this precise example to work? Thanks in advance!
The problem is in the property [fullscreen]="true" of the <ion-content> tag.
The property fullscreen of ion-content, according to the ionic documentation...
If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
In ionic when you use the option fullscreen as in <ion-content [fullscreen]="true"> it adds the following style to the ion-content tag:
--offset-top: 56px;
The goal of the [fullscreen]="true" is to create the effect of the content scrolling behind the header.
As a side effect, part of the <ion-content> is hidden behind the <ion-header>.
Fullscreen property and scrollIntoView()
According to w3schools...
The scrollIntoView() method scrolls the specified element into the visible area of the browser window.
So, in your code, when you call scrollIntoView() of a group it is working exactly as expected. The screen is scrolled until the top o the group is into the visible area of the browser. The problem is that the <ion-header> is covering part of the top of this visible area.
Solution:
If you remove the [fullscreen]="true" of the <ion-content>tag the scroll will work as you expect.
But you will loose the effect created by the fullscreen property (content scrolling behing the header).
References
Fullscreen property of ion-content tag:
https://ionicframework.com/docs/api/content
ScrollIntoView:
https://www.w3schools.com/JSREF/met_element_scrollintoview.asp
I'm using Primefaces 5.3, and AdminLTE 2 as a template for my website (Which based on bootsrap).
The problem is when I open a dialog box, this dialog gets hidden by the top navbar, and this topbar doesn't get disabled I can still click on its links.
[![enter image description here][2]][2]
As you can see in that picture a portion of the dialog box is hidden by the top nav bar.
How can I solve this problem ?
Without a sample code to work and check your issue. Here is a probable solution that i can suggest to you. Check the z-index of the navbar and the dialog. Try setting z-index for both where the dialog box z-index value is greater than the navbar.
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'm using Fancybox for Wordpress to display a form.
Within the fancybox is a div with id "popup1", which contains the form.
When the user submits the form, #popup1 disappears, and #popup2 appears. div#popup2 just has a little "Thank you" message that is very short.
The height of the fancybox window automatically resizes to fit the height of the content when I switch from popup1 to popup2, but I want the WIDTH of fancybox window to shrink also. How can I do that?
Thanks in advance!
You have several handlers to flip from one pop-up to another like
$("#popup4-BA").slideDown("slow");
Try adding the fancybox (v1.3.4) method $.fancybox.resize() after completing the animation like
$("#popup4-BA").slideDown("slow", function(){
$.fancybox.resize();
});
... you may need to do this in every handler.
Some Notes:
you first pop-up has a fixed width so you may need to try removing it and set the css width property to auto.
since you are using fancybox v1.3.4 with inline content, you need to be aware of this BUG and workaround.
Using a default/vertical form, the bootstrap documentation suggests that the submit button sits underneath the various inputs but that's not the case in my form.
When the browser has a large viewing space, it sits beside the last input field and is not in line. If you resize the browser to a phone or tablet width, Responsive takes over and it displays correctly.
Changing the wrapping div from .span12 to .span3 pushes the button down, but it seems like a hackish fix because adding .span3 to the inputs and buttons to make them uniform in size yields the button pushed off to the side.
Am I missing some markup or is there an issue with Bootstrap? In their docs, the button is preceded by a checkbox label and some help text wrapped in a p - so that could be affecting their styling to make it look correct.
You have to put your submit button in a div with the class controls.
If you check the source on the Bootstrap documentation page, they even divide all the inputs and buttons in control-groups and controls.