I'm having no end of fun (sic) with jQuery.tabs. The widget is quite crafty in that it turns basic HTML like so
<div>
<ul>
<li>Tab #1</li>
...
</ul>
<div for panel #1>
</div>
<div for panel #2>
</div>
...
</div>
into a cute tabbed dialogue. (It does so by restyling the UL and then toggling the "display" attribute for the panel DIVs to show/not show whatever panel is selected.)
Now I found that I can spare myself a lot of trouble in my JS project if I insert a scrollable IFRAME into each panel.
One usability problem I'm trying to ameliorate is that when the tabbed panel becomes larger than the browser's window, then the user ends up with too many scrollbars. I am trying to avoid this situation by linking the size of the tabbed panel to that of $(window). That is, I trap and process the resize event on $(window).
To make my life bearable, all components are relatively sized. This is also true, in particular, of the IFRAMEs (100% width, 100% height). The only exception are the panel DIVs, which are of fixed height (in px). And this is the only dimension css attribute that I manipulate during my resize action.
All of this works a treat in FF and Chrome, but IE6 is doing something rather cute: So long as I do not affect the width of the browser window (but only change its height), only the panel DIV changes in height; the IFRAME contained will not change. As a result of this behaviour, it is not possible to shorten the tabbed panel below the height of the IFRAME. I can lengthen the DIV, yes. But the IFRAME will not fill the panel in that case.
All becomes good the moment I make the slightest change to the width of the browser window. In that moment, the IFRAME expands to catch up with the extended DIV or DIV and IFRAME contract in tandem.
Bizarre. I inserted useless CSS instructions like "position: relative" and "zoom: 1". Also nudged the display with "display: block". No joy so far.
Any ideas?
Thanks.
Never mind. Just had an inspiration: jQuery.tabs doesn't mind if I make the panels outright IFRAMEs. That is, I can do away with the wrapping DIV and thus need not rely on IE6 to honour the automatic relative dimensioning (height=100%, width=100%) of the wrapped IFRAME. The IFRAME is now fixed px in height and is directly resized by my resizeHandler. Life is now good across 4 browsers. Yipee!
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;
}
Is there any way to make a widget's config and move buttons be placed at the top of the widget itself.
As it is one has to hover over a widget in order to see which one of the items in the widget zone it belongs to. This is impossible though when the content of the widget is not in the same screen space (I had to zoom out in the browser in order to get the below screenshot) unless you zoom out and then zoom back in.
In this image, there are 3 seperate widgets (red, white and green respectively) in a single widget zone.
Also, when the mouse leaves the widget the widget config/move buttons are no longer visible.
One solution is to right-click on the widget and then scroll up to the config wheel but this is not something I want to tell my editors they have to do.
Has anyone else come across this problem and if so, how did they solve it?
This can happen when you have CSS conflicts. You can use Chrome Inspector, Firebug, or IE developer tool to investigate and see if anthing is 'overlapping' those buttons (often a floating div is overlapping the buttons and intercepting the 'click')
Then once you figure out a css class to make it work, just add it to your style sheet with ".EditMode " before it, this is a special class that is on the body when in page editor.
Example:
.EditMode .MyFloatingDivThatsCoveringTheWidgets {
z-index: 0;
}
For navigation I'm using an xe:navigator and containing xe:basicContainerNodes, which in turn contain xe:pageTreeNodes. Rather classic design, I'd say.
If I mark the xe:navigator as "expandable" all the containerNodes are showing something that at first glance appear to be classic "twisties" so that users can collapse / expand them.
This is kind of OK but I'd love to replace the "twisties" with icons showing "+" or "-" as that is what I'm using everywhere else inside the application.
Looking at the rendered html code for my navigator I see that the "twisties" in fact are links with a background sprite applied through css:
<a class="lotusSprite lotusArrow lotusTwistyOpenMenu" style="padding: 0px" role="button" href="#" onclick="javascript:XSP.oneUIMenuSwap(event,'wipe','view:_id1:_id2:facetLeft:_id278:outline_node_0')" title="Click to expand or collapse this section">
<span class="lotusAltText">▼</span>
</a>
(btw: the <span> inside the link appears to be a fake element as it is set to display:none)
Examining the sprite I in fact find some "+" icons but no "-" ones.
Question: is there probably away to reach my goal, other than building my own sprite and replacing the original one?
Update: another helpful option would be to make the container's label clickable so thar user could expand / collapse the containers by clicking their headline labels. Any idea here?
Update #2: apparently not too many responses ;). Meanwhile I solved it by switching to an Accordion based navigator; a bit more programming effort, but nicer looking, too...
solved it by switching to accordions. Looks even nicer but is a bit more programming effort (keeping the right accordion panels open and marking the currently selected menu entries)
I have a 940px wide layout that I turn into a responsive layout once it gets below 940px.
The content I have doesn't respond well. It seems that if there is enough text in some of my divs, the divs span the width of my layout. If there's only a little bit of text, the div will go to the left of the page as per this example:
http://www.coflash.com/stuff/cssproblem.jpg
My question is... without giving divs an actual width, how can I assure thet they'll span the width of the browser no matter how much content they have? As soon as I set an actual width, I get scrollbars on my responsive site and it breaks everything :(
What exactly is the text doing that all of a sudden makes it fill the layout area?
Thank you for any help, and sorry I cannot provide a real world example, surely this is a common issue though.
For that first make
html, body{padding:0; margin:0}
then you can specify
div{left:0; width:100%}
try this, it think this will help :) and reply if not done
Our website www.phototulip.com displays fine in Safari and Firefox but not in IE7.
The main content seems to display on the bottom right hand side and the nav bar shifts slightly to the left. I've tried to adjust sidebar and content widths but with no success.
I was wondering if anyone could help.
You have a few places where your markup is invalid (one or more <div> tags aren't closed properly) that could, potentially affect the layout. FireFox tends to be a bit more forgiving about that sort of thing than IE.
Other things to check are that your content area & sidebar have explicit widths set and that they aren't too wide for the container they're in.