Here's a tricky one: has anybody seen a YUI dialog/panel implementation with nice OS X style shadows around the dialog, instead of the blocky shadow that is implemented by default with the "underlay" element?
You can see this type of shadow on Amazon.com popup windows. It requires quite a bit of PNGs but looks very nice.
I'm thinking of inserting extra DIVs or replacing the .underlay element, and hook into the dialog size event to adapt the dimensions. The latter would be required because YUI uses some CSS trickery to make the underlay element "snap" to the dialog dimensions with CSS only in modern browsers, and uses a manual dimension update for IE.
EDIT: Just checked YUI 3. The Panel widget is not available yet, only the Container and it's still beta. So I'm looking at solving this in YUI 2.
PS: Oh I guess I could include the PNG shadow as part of the Panel's header, body and footer (hd, bd, ft), as an extra padding. And use a css rule to hide YUI's underlay. Hmmmmmm I just wish I didn't have to do this because it changes calculations for the draggable area, it's not a great way to do it.
Related
I try to use column header menus and row context menus in my tabulator but nothing appear. Then I realize in the DOM that the menu is there but out of the window and at the top of the tree in the dom, it's the div with the class tabulator-menu.
The DOM, the div with smd take the whole page
I use Vuejs with Bootstrap 4.
How to make it appear at the right place ?
Thanks
The menu is appearing in exactly the correctly place in the DOM.
It is standard practice in a lot of context menu libraries to append the menu directly to the body rather than to the element that triggered it, this happens because menus are often long and overflow their containing element, by absolutely positioning the elements in the DOM the sit on top of these and prevent this being an issue.
It is hard to say without seeing an example, but it is likely a z-index issue that is causing the problem.
By default Tabulator menus have a z-index of 10,000 if you have anything with a z-index higher than this it will sit over the menu.
To resolve this you simply need to add a bit of CSS after you have imported the tablator style sheet, that changes the z-index to be higher than any others on your page:
.tabulator-menu{
z-index: 99999999;
}
I am tying to create a UI in photoshop that will be used to render a full-width site. I have never used flexbox before and I've never created a full-width site before using it.
I'm wondering if I simply stick to the default bootstrap breakpoints or if I need to be doing something entirely different.
An example of the type of full-width layout:
Thou this is a very general question, I'd have following advice for you:
I would use both, grid & flexbox, since, grids are great for building the bigger picture and make it really easy to manage the overall layout of the page. They are also able to handle more unorthodox and asymmetrical designs.
Flexbox is great at aligning the content inside elements so you can use flexboxes to position the smaller details of a design.
You could use CSS grids for 2D layouts (rows AND columns) and Flexbox for one dimension only (rows OR columns).
There is no reason to use only CSS grids or only flexbox - they work well together in their respective field of usage.
For layouting and screencasts I can definitly recommend Adobe XD - quite fresh in the Adobe-family and free for now.
I hope that gave you some idea how to approach your project andf plan the layout according to your needs.
EDIT:
Have a look at this article - it should give you a fair understanding on how to set breakpoints according to your layout and the media/device.
I've created a nav menu like in the screenshot below. It spans the entire width of the container and the left/right padding of each menu item is constant. This was easy to do by hardcoding the left/right padding in the CSS, but I want the paddings to be able to change as the site admin edits the menus.
Is there a way to do this with pure CSS (CSS3 is okay)?
This was easy enough to do with jQuery (I totaled up the width of the menu items and calculated the necessary padding). But I ran into some issues on some browsers due to our use of Google Web Fonts. On Chrome and Firefox 4 on Windows (not on Mac), the web font was not loaded at the time that my script ran, resulting in incorrect width measurements. I tried running the script in the jQuery's DOM ready event and in the Google Font API's active event. The active event worked in Chrome but in Firefox 4 it was often fired before the font had been applied.
Thanks in advance.
Here's a jsfiddle of a potential different solution.
Using that layout, and assuming the number of menu items is going to change, you call a recalculation method once a list item is added/removed. In this example provided, I've used YUI3 to do the DOM manipulation, but you could do that a number of ways. Note - I didn't test the javascript function, its "probably working pseudo code".
(You may need to make subtract a further 2% or so from the list item widths, if you're trying to deal with IE6/7)
Use jQuery's .load event as suggested by user thirtydot.
I've had some experience in Swing and now I'm trying my hand at writing an ajax app in dojo. I'm particularly having a problem with layout. In Swing I'm used to putting widgets in containers with layout managers for simple things like left-to-right layout to more complicated things like 4 border regions and a center region.
After using Dojo for a bit I see there is a border type layout, but I don't see layouts for simpler things like left-to-right and top-to-bottom. There's a scrolling pane, but I don't want/need a scrollbar.
In my old-school web days, I used tables for layout, but after reading many posts about the "incorrectness" of such an approach I'm expecting the universe to explode if I employ this technique now =).
I've got to be missing something in Dojo... or maybe there's a general "web-way" of doing such things that is not specific to Dojo.
Dijit only provides a handful of layout widgets, and most of them are 'stack' based: StackContainer, AccordionContainer, and TabContainer are all about putting widgets on top of each other and switching between them. BorderContainer does what you describe and is generally the most useful layout widget in Dojo. dojox.layout has a few more.
The general philosophy of Dijit is to use HTML and the browser's native layout engine for anything HTML can do. Left to right is probably just putting widgets inline in HTML flow, top bottom would be separating them by block elements. Basic CSS can be applied for padding, etc. Absolute CSS positioning should be avoided. TABLEs are still your best bet for matrix layout to run well on all browsers -- nothing will blow up, just try not do nest them too much. There are fancier CSS layout techniques coming, but I don't think they're well supported yet.
I am trying to setup a modal YUI panel above a YUI Tabview. For CSS purposes [1] the tabs have a z-index that goes up to about 20 (depending on how many tabs there are).
The problem I am facing is that the mask that YUI draws for the modality of the panel is behind whatever nonzero mask the tabs have, and so the tabs peek through.
So far I have only found YUI API methods to change the mask of the dialog or panel.
Does anyone know how I can do this for the mask? Has anyone had an issue like this before?
I will shortly be posting the code I used.
TIA!
[1] (CSS designer did this, so I can't change the markup)
The solution is
- after show/render of top modal dialog, call hideMask() for underlying modal dialog
- before canceling top modal dialog, call showMask() for underlying modal dialog
Tip: If calling hide/show mask too early and/or too late, mask "flashing" may be experienced visually.
Looks like configuration value zIndex (for the Panel) combined with the stackMask should do it.
Nothing in the docs about whether stackMask should be called before or after rendering, before or after show etc. There is also an event (configzIndex) which fires when the zIndex property is changed.