Databases
StackOverflow2013
Postsdbo
POMaking a programmatically created jQuery UI datepicker work with CSS scope
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking a programmatically created jQuery UI datepicker work with CSS scope
    primarykey
    data
    text
    <p>This addresses a limitation of jQuery UI that has <strong>not</strong> been fixed as of version 1.10.3.</p> <p>jQuery UI has a <a href="http://jqueryui.com/themeroller/" rel="nofollow">themeroller</a> function that allows you to style your jQuery UI widgets, but sometimes you need to have multiple themes on the one page, so the themeroller allows you to specify a CSS "scope" when you create the widgets. This is simply a custom CSS class name that is used in the themerolled CSS to disambiguate the theme's CSS. Here is an example of a CSS rule that is generated by themeroller:</p> <pre><code>.myCustomClass .ui-buttonset { margin-right: 7px; } </code></pre> <p>where <strong>myCustomClass</strong> is the "scope" that was given when generating the themed widgets. The idea is that you can then specify which part of the page is to have your custom theme by assigning the class to the form, div or whatever container in which your widgets are rendered:</p> <pre><code>&lt;div class="myCustomClass"&gt; ...your custom themed widgets go here... &lt;/div&gt; </code></pre> <p>The problem is that some widgets, notably the <strong>datepicker</strong> create another <strong>div</strong> that is appended to the document body. It looks something like this:</p> <pre><code>&lt;div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-..." style="position: absolute; ..." &gt;...&lt;/div&gt; </code></pre> <p>Normally you can't see this div as it is hidden by assigning the style <strong>display: none</strong> but it is there all the time once a datepicker has been created. It is shared by all datepickers on the page. When a datepicker needs to show a "picker" this is the div that gets displayed.</p> <p>But this picker div is not inside the form, div or whatever contains your widgets, so it loses all of its styling because it's not inside a container where class="myCustomClass". This is pretty obvious when the picker is displayed.</p> <p>A common workaround is to run this once the document is ready:</p> <pre><code>$("#ui-datepicker-div").wrap('&lt;div class="myCustomClass" /&gt;'); </code></pre> <p>But this will only work if a datepicker has already been instantiated on the page. But I have to create my widgets on-the-fly, so what can I do to make the datepicker work in this case?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USGlenn Lawrence
    1. USGlenn Lawrence
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMaking a programmatically created jQuery UI datepicker work with CSS scope
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhy can you not apply the wrapping `div` to each of your datepickers as you create them on the fly?
      singulars
      1. POMaking a programmatically created jQuery UI datepicker work with CSS scope
      1. USMister Epic
    2. COThanks @Chris. There seems to be only one div shared between all instances of datepicker and you only want to wrap it once.
      singulars
      1. POMaking a programmatically created jQuery UI datepicker work with CSS scope
      1. USGlenn Lawrence
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload