jquery datepicker is firing a button event under the calendar when a day is selected - jquery-ui-datepicker

When the date text box gains focus, the calendar pops up. The day that I need to choose is directly over a button underneath the calendar. When the day is clicked the button event behind the calendar is fired. I could move the button further down on the form but this is an issue for phones and is not a good solution. I am relatively new to the jquery development environment and would appreciate any solution.
Here is the button control:
Search
Thanks,
John

After days of searching I finally found a solution. The z-index must be added to the datepicker css.
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; z-index:9999 !important; }
^^^^^^^^^^^^^^^^^^^^^^^^
This solved my problem and just wanted to share.

Related

How to control bootstrap wizard modal final button

I am using a wizard modal for my step-by-step form. I would like to control the generation of the last button, which currently generates a button labeled "Complete" on the final step. I want to hide that "Complete" button since I am including a submit button on the last step. How can I do this?
You need to add the following CSS to hide the complete button:
.modal-content [data-step="complete"] {
display:none;
}
Codepen example: https://codepen.io/aystarz52/pen/mZaGbz?editors=1000

SharePoint 2013 document callout popup cut off when webpart is a fixed height

This appears to be a SharePoint 2013 bug.
One of the exciting features of SharePoint 2013 is the Callout. When you have a list of documents, and you want to learn more about the document without having to open it, you can click the three dots Callout button to get a popup that shows pertinent information about the document.
The problem is this information is being cut off when you apply a fixed height to the webparts properties and the height is not enough to accommodate the popup.
It appears to be due to the webpart being converted to an iFrame when a specific height is applied to it. I have been unable to find a CSS fix for this.
You can view an image of the issue here: http://www.pixelwonders.com/fixed-height-webpart.jpg
Anyone know how to fix this?
Thank you in advance for your help!
I had a very similar issue. I have a Google Map web part with fixed height and width in a two column layout, with a list on the right. The filter drop down menu would cut off just like what your image shows.
I was able to correct it by adding a script editor to modify the CSS with overflow: visible !important on both columns. In your image it looks like you have one web part above another, I would think the same rules would apply.
<style>
#WebPartWPQ3{
overflow: visible !important;
}
#WebPartWPQ2{
overflow: visible !important;
}
</style>

how to get previously selected tab after dismissing modal IOS

I have an application using UITabBarController. There are 5 tabs (tab1, tab2, cameraTab, tab3, tab4). When user taps on middle tab , the modal view will appear hiding the TabBar (in my case camera - UIImagePickerController). If user then taps on cancel button on that modal view, how do I make it to return to previously selected tab. For example: if i am on tab2 and I tap on the camera tab, modal view appears and then I tap on cancel, how do i return back to tab2 automatically. The same goes for all other tabs, if I'm on tab3 it should return to tab 3 and so on. Right now it remains on camera tab without modal view - just blank view with background image.
I'd really appreciate if you can help me with some examples. I've been searching in various ways - there must be a way that UITabBarController keeps a record of previously selected tab.
Thank you
Personally, I think you should create a custom view where the middle camera tab would not be a tab at all, it would actually just be a button that presents the modal view and then that view would have a button to dismiss it. I would do a little research in http://idevrecipes.com/ to see if there is anything there. If not, maybe github. The tab bar itself is looking for views to push, not present.
I am sorry I couldn't give you more of an answer, but I wanted to give you something for waiting so long.

Social button's links issue

I have added on my web-sire some social buttons. Tweet share button works just fine but I have some issues with facebook and google+ button.
In fact I added this away the buttons : (the buttons are supposed to link to a web page through a parameter $URL
<div class="g-plusone" data-size="medium" href="{$URL}"></div>
and for facebook
<iframe src="http://www.facebook.com/plugins/like.php?href={$URL}&layout=button_count&show_faces=false&width=90&action=like&font=verdana&colorscheme=light" allowtransparency="true" style="border: medium none; overflow: hidden; width: 90px; height: 21px;" frameborder="0" scrolling="no"></iframe>
In fact I used iframe because my buttons are wrapped by divs that displays them in grey and color them the expected way on hovering.
The problem I have is that when clicking on the g+ no box appears, and when I click again, the g+ button displays a red triangle instead and I have a "+1 button errors" message : but I am in none of the case that would explain this kind of message.
When clicking on the facebook-like, I have nothing displayed on my facebook's wall...
Does anybody has an idea how to fix it ?
For the +1 button, I have a few things you can try. Is the actual button itself rendering also or are you getting unexpected behavior when you click it?
If the button isn't rendering, you might be missing the JavaScript library for Google+. The following code should be added to your post before the actual button gets rendered:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
If you are getting unexpected behavior when the button is clicked, you probably are having an issue with the URL parameter. You might be able to get by without passing a URL because the +1 button defaults to the current page. The following example shows the simplest case of rendering the +1 button for the current page:
<g:plusone></g:plusone>
If that correctly renders, you are putting something bad into the URL parameter or have something wrong with the strings in your parameters. For example, check that the strings you're using don't have backticks in the starting or closing quotes as opposed to single quotes.
The +1 documentation will have any additional details that you will need for configuring and customizing the button and its parameters. You can find it here:
https://developers.google.com/+/plugins/+1button/

How can I scroll dojox.mobile.EdgeToEdgeList to a particular item dojo 1.7.2?

I'm using a dojox.mobile.Opener to select an action from an ActionSheet.
The Action sheet should operate on an item inside an EdgeToEdgeList below that opener.
After the user selects an item, and clicks the open ActionSheet button, I would like to scroll the EdgeToEdgeList so that the selected item is at the top of the screen (not under the opener).
Does anyone have any idea how I can programmatically ask the EdgeToEdgeList to scroll up to a particular item.
Thanks,
Guy
You can use the DOM node's scrollIntoView() method.
Generic browser version:
document.getElementById('NodeIdToScrollTo').scrollIntoView();
Dojo version:
dojo.byId('NodeIdToScrollTo').scrollIntoView();
or if you would rather go via widget id:
dijit.byId('NameOfListItem').domNode.scrollIntoView();