When I scroll down the metronic Menu Div adds some margin or padding not sure to the div next to it. I am not an expert in metronic and I would like to maintian the position as before the scroll, I am sure it is a simple fix for someone experienced.
After Scroll
Related
When I press a button widget there was always a greed like this image:
I can't find it anymore.
I think you didn't align your button component in your layout. You have to align your button position top, bottom, start, end. & then try to click and see.
The issue was in the *.xml, i missed androidx.constraintlayout.widget.ConstraintLayout instead I wrote ReleativeConstraint.
Thanks
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;
}
My website has a content div which has to be of specific height. Let's say 800px.
I'm looking for a way I could enter the content in that div and make the div break it up and make it available via some "next" anchors.
Is such thing possible in a regular html page, no wordpress no drupal no plugins.
Style your div with overflow:hidden;
Then add a button to make it scroll 800px down
You should also use overflow:scroll-y; to make it simple.
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!
I need to create a DHTML menu with the specified features, but I can't figure out how to do it. Here's what I need:
All items are layed out horizontally. If they would be wider than the screen, two little arrows appear on the right side of the menu that allow to scroll it. Something like this:
+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+
Menu items should be clickable anywhere in the cell. They should stretch both vertically and horizontally to the contents. The text in the items should be centered both vertically and horizontally. The menu should work in IE7/Opera/FF/Safari.
The scrolling is the easy part - I just place it all in a container (say, a <div>), set the container to overflow: hidden and then play around in Javascript with clientWidth, scrollWidth and scrollLeft. That I've figured out and have already tried.
But how to make the menu items so stretchy, clickable anywhere and centered text?
Try the CSS below:
#menu {
display: table;
}
#menu a {
display:table-cell;
vertical-align:middle;
}
And then format your menu like:
<div id="menu">
normal text
<big>large text</big>
<span style="line-height:100px;">very tall text</span>
</div>
This will force vertical alignment and prevent the links from wrapping. Let us know how it works out.
OK, I talked with my superiors and they decided that it might be OK that you cannot right-click a menu item and select "Open in New Window". If this requirement is dropped, then I'm not bound to <a> elements for links. With JavaScript I can turn anything into a link. Thus, I choose you, pikachoo <table>!
Yap, it's a heresy, but it works. More specifically, it's the only construct that I can think of that can do all of the following at the same time:
Center text horizontally and vertically;
Stretch to contents horizontally and vertically;
Not wrap to next line when items are starting to overflow.
Anything else that can do the same will probably be more convulted anyway. And before anyone has the idea - no, I don't need search engine support. It's an internal web application. It'd be pretty bad if Google could index that...
clickable anywhere is easy: you can either bind the onclick event trigger (and hopefully some cursor styling) to the atomic cell element, or you can make the atomic cell elements <a> tags (or more likely wrap these in <li>) and link and style appropriately (padding, margin, foo).
e.g. case 1:
<ul id="menu"><li class="item" onclick="foo()" style="cursor:pointer; cursor:hand; padding:1em; margin:1px; float: left;">FOO!</li></ul>
(obviously I don't really recommend inline styling or script handlers but you get the idea)
Applying padding will effectively centre the text, and having no width assigned they'll naturally stretch to fit their content.