Superfish Child Drop Downs Falling Off Page - javascript

Superfish is a very common menu plugin, so I'm surprised I'm having difficutly rectifying this.
I have a pretty intense menu structure that involves several child menus. So much so, that a lot of them fall off of the page or out of the browser's view when their parent is hovered.
People have suggested applying a right: 0px; property in place of the left: 0px; property in the superfish.css file, but it looks like the JS script is writing it's own CSS properties to the element as in-line styles. In fact, it actually looks like it's measuring the width of the parent menu in order to apply the correct left: value.
The sub-menu's end up looking like this
<ul class="sub-menu" style="left: 16.18181818181818em;
float: none; width: 14.5em; display: block; visibility: visible;">
So, I guess what I'm getting at is... what applies these CSS properties if not the CSS file? Even when I apply a specific class for menus I want to 'drop-down' to the right instead of the left, the property gets overridden anyway.
Is there a way to rectify this, or just make it so once I get to the second level of drop downs (when drop downs start going to the left instead of below) they go to the right instead?

I was just dealing with the same issue. It looks like this "feature" fell off the road map :)
Anyways I found this Superfish Menu text off-screen
it solved it for me but YMMV as always.

if CSS comes from Javascript,
then you may use !important in your style sheet to over ride it.
Add a comment aside your rule in style sheet , so one may remenber or understand the use of
left:0!important;/* !important is here to overide style from js' suckerfish menu */ :)

I've solved this issue just doing this...
jQuery Superfish Menu Plugin - v1.7.4
just open Superfish.js and find the visibility change to display
example:
visibility: hidden to display : none
visibility: visible to display : block
superfish js edit file

Related

Wide Drop-down menu gets clipped after adding overflow-y: scroll to Sidebar

I have a R Shiny application, but I believe my question requires a HTML/CSS (possibly jQuery?) solution in which I am not too familiar with. I produced two simple Shiny apps which exemplifies the issue I am currently facing.
https://sometesting.shinyapps.io/test/
https://sometesting.shinyapps.io/test_-_copy/
The first one does not contain the CSS property:
.sidebar {
height: 95vh;
width: 300px;
position: fixed;
overflow-y: scroll;
}
While the 2nd link does contain the above CSS property. You can see in the 2nd link, the drop-down menu gets clipped.
I would like to avoid this clipping issue, and have the drop-down menu go over the sidebar and scrollbar. I've researched for many hours and found a few jQuery solutions, but due to my unfamiliarity with jQuery plus how drastically different the R Shiny-generated HTML syntax is to me, I am not able to solve this.
Thanks!
Edit
Thanks to moose for helping me solve this! Check out this thread:
Rendering Shiny Selectize pull-down menu on top
Pretty much, I placed dropdownParent: "body" in my selectizeInput function as such:
selectizeInput("s1", h4("Select State:"),
options = list(dropdownParent = 'body'),
choices = state.name)
You may need to adjust the width and height of your selectize-dropdown. Thanks moose!
The issue is with the selectize dropdown. If you made the html list visible, the overflow works as expected, but I'm assuming you need something more powerful than the default select list.
There's a similar issue solved here:
https://github.com/selectize/selectize.js/issues/192
Even though it's overflow-x rather than y, the solution should be the same. Failing that, you can try Semantic UI's dropdown (or better yet, Fomantic UI)

UI Fabric-js Pivot control - no link item overflow functionality

I am trying to use the Pivot component from the Office UI Fabric JS library but I have found that it does not have functionality to deal with link items overflow.
The documentation shows the overflow as ellipsis however this does not have any functionality behind it. It is just for presentation.
As anyone modified this component so that it automatically resize and show all the links correctly?
There is a known issue with the Pivot control. In order to get it to work, you need to override the overflow-x: hidden that is set in the default stylesheet. Adding the following to your page's CSS seems to fix it:
.ms-Pivot{
overflow-x: visible;
}
You'll also need to make sure you wire up the JavaScript for Pivot and Context Menu. This includes the script to swap the is-hidden and is-open classes when clicking on the ellipsis.
At the moment there isn't any automatic sizing of tab or automatically moving the overflowed elements into a context menu.

ContentFlow javascript carousel - how to add text to image?

I'm looking to make use of the excellent Javascript widget called ContentFlow:
http://jacksasylum.eu/ContentFlow/index.php
However, in my ExtJS application, I have a need to print text inside the images that are scrolling by. Not being a CSS whiz, I'm really struggling to do this. Any insights would be most welcome!
I think that you should add the following styles in .caption class. Something like that may work.
.caption {
position: relative;
bottom: 125px;
}
Apart from that, it just an issue of playing around with the bottom value to position it at your will. Also, don't forget that you could add left, right and top attributes as well, if you need to.

Alternative to frames with CSS?

I am looking for a way to achieve the layout using CSS or any other method that can accommodate the design and implementation.
The "top" portion is a fixed area. The "left" area will be a list of text links that target to the "main" area. To be more specific, a list of links to profiles will be in the "left" area and I want the associated profile to show in the "main" area.
I can do it with frames, but since it is not the best way or is not supported by HTML5, I want some other alternative for this. Any ideas?
Have a look at this Steve Sanderson blog post:
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
You can do this by setting some of your elements as position: fixed; in CSS. For example make a div for the top and a div for your sidebar, set those for position: fixed; in CSS.
Your main area div is just a normal div which will be scrolled with the normal body.
It's really easy and works on all major browser (excluding some mobile browsers I think).
No need for jQuery or Javascript. You can use things like PHP include for your main area.
Update
You can also make DIVs with fixed sizes and add the attribute overflow: scroll; to get a similar result.
Yes ... you can use jquery and the load() function as I suppose you are using only HTML and not serversidescripting.
You don't need Frames and you don't need any reload or AJAX if you don't like to.
Put all HTML on one page.
Put your head, side and contents in different div containers.
Use style.display = "none" or style.display = "" to steer which link from the left side opens which div in the content area...
Alternatively you can get the content of the profiles using AJAX.
I don't know, if this answer is good enough for you, because I don't know about your JavaScript Knowledge.

Have the header/toolbar remain static at the top of the page during scrolls

On many sites now, say you have a toolbar/table-header that is midway in the page.
Once you start scrolling, you can't see the header or toolbar anymore so you can't perform actions on any rows you may have selected, or you can't see the name's of the headers of the columns.
Many sites do this now, which is great, when you start to scroll the toolbar/header is fixed at the top of the browser. This doesn't happend right away, only when you scroll down to the point where the header/toolbar would normally not be visible.
How can I do this? Is there a name for this functionality?
Gmail has this, if you scroll down when reading an email, the toolbar at the top is fixed at the top so you can label/move/spam the email.
Take a look at jQuery Waypoints - Sticky elements, should be what you're looking for.
Use this css:
.static{
position:fixed;
}
And then, put a class="static" to your header element.
Hope this helps. Cheers
You don't need Javascript to solve this problem — don't make it harder on yourself. Using fixed positioning forces the header to "hover" above your content, and when you scroll, remain at the top of your screen, not at the top of the page. You can use this CSS to make your header fixed.
.header {
position: fixed;
}
Make sure you assign the class "header" to your div. For design reasons, I'd suggest keeping your header at the very top of the screen and stretching all the way across. You can use this CSS to do so.
.header {
top: 0px;
left: 0px;
width: 100%;
}
Technically, you don't need to specify "top" or "left" positioning, but it ensures you don't have anything to go wrong if you do decide to change something like that later. You can take a look at other types of positioning at this site.

Categories

Resources