I have a html select using Bootstrap-select library. If I define no data-container the list works OK but I have a problem of overlapping. Basically, I am rendering the select (without data-container) inside a container which must have overflow-y: auto;. When the select tries to open above a navbar (main menu) it is overlapped and cut. See JSFiddle here (you must force the dropdown to be opened as drop UP).
The proper solution for me, I think it would be to define a data-container. However, as soon as I do this, the list is misplaced. See JSFiddle here (you must force the dropdown to be opened down, not up).
Another suggested workaround was to set data-container="body" instead of my own container div as previous example. This DID solve the first scenario, but it breaks for other cases. See this JSFiddle and dropdown the list "State" (so that it is opened below) and you will see how the list is misplaced (but below where it should be) letting a big empty space between the dropdown button.
Note that I would appreciate the same solution to be applied everywhere, not a solution that I would need to adjust for every place I render a list.
This has been fixed in the master branch of bootstrap-select, and will be available officially in v1.11.0. See https://github.com/silviomoreto/bootstrap-select/commit/f2358a15e7b3cdba519a22ada9b7654ab6775255.
Continuing discussion from : https://github.com/silviomoreto/bootstrap-select/issues/1422
What do you mean by "a problem of overlapping" ? The fact that the select options are displayed over the heading is not an UX issue for me : this is how the native select works, and users can still click elsewhere to dismiss the menu.
Specifying a data-container would just limit the options menu inside that container, which might not be optimal for your case. Additionally, the issue specified above states that there is a positionning issue with this option.
just add the position: sticky; in bootstrap-select.css to the below class
.bootstrap-select.btn-group .dropdown-menu {
min-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: sticky;
}
Related
I'm using the "Priority Navigation" design pattern. For those who aren't quite sure what this is, basically when the viewport width is reduced and there isn't enough space for all the list-items to fix horizontally, they're moved into another nested list so they can still be accessed. This is within a "more" link at the end of the list.
At a basic level, this works fine in my example (below):
http://codepen.io/moy/pen/RrRJBe
The problems I'm having are:
1) Because I have another item alongside the navigation, which is floated (and of unknown width), I needed to set overflow:hidden; on the nav. This means when the width of the container changes, the nav stays alongside the other content rather than dropping onto the next line. It's fixes that ...the problem is it also means the dropdown on the end isn't visible as it's displayed below the navigation and overflow: hidden; is set.
Any alternative (CSS) fixes for this?
2) Another issue is the nav links need to be positioned to the right. No problem, just float the div right, yeah? Unfortunately it doesn't like this and the page almost crashes - must be something to do with the script trying to calculate the widths? As soon as the nav or it's parent is floated, it breaks!
The list-items are floated left so they display horizontally. Instead I tried using display: inline-block and text-align: right;. This positions the text correctly but when there's not enough horizontal space the items either wrap or all collapse into the "more" link rather than one-by-one.
-
Browser requirements: It's worth noting that my browser support is IE8+, so flexbox is unfortunately out the window. Even if it worked, it would mean that I'd have to find a fix for IE8/9.
Is anyone able to help with this, or maybe there's a plug-in I should take a look at. This script works great when the nav is isolated but as soon as another item is in it's path it becomes a bit tricky. On a previous attempt I got the width of the item which was in the way and subtracted it for the available space. But that isn't that flexible/scalable - but that again, maybe there isn't another way?
Thanks, hope someone can help!
Part 1
You can use clearfix instead of overflow: hidden.
Add the following to the parent element containing nav:
.wrap:before, .wrap:after {
content: '';
display: table;
clear: both;
}
But if you need to support IE8, you can just add element like below to the bottom of the parent element containing nav
html
<div class="clear"></div>
.clear {
clear: both;
}
I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.
I've been playing around with changing the way my portfolio looks and I've been struggling with getting my expander to push elements down (like google images does).
My test is here: http://chris-carpenter.co.uk/new/
I've used this as a starting point to add a filterable option for my work:
queness.com/post/14577/create-a-simple-responsive-portfolio-page-with-filtering-and-hover-effect
This is what is causing the problems. I've found ways to create the filterable portfolio, and ways to create a static portfolio that has an expanding content section but combining them is blowing my mind. I can't seem to figure it out.
At the moment this opens and pushes elements down, but the width is limited by the parent div, so anything below & to the right doesn't seem to shift.
<div class="portfolio--expand is-expanded">
</div>
I'm now looking at inserting a content div at the end of the row clicked. Much like this.
http://jsfiddle.net/JfcAu/450/
I'm not experienced enough with JS to understand what's happening and apply it to what I have though. Could anyone help me achieve a filterable grid which has a click to expand option?
I don't expect to retain any current styling ofcourse, since I haven't changed it at all from the original source yet, I just want the function working.
This has been hurting my brain for ages.
Useful things I've looked at:
isotope.metafizzy.co/filtering.html
oriongunning.com/blog/thumbnail-grid-expanding-preview/
You might have to do some width adjustment, but this:
#portfoliolist .portfolio {
box-sizing: border-box;
width: 23%;
margin: 1%;
display: none;
float: left; /* <-- this is taking it out of the DOM */
}
has a float:left - that is taking it out of the DOM - you have to remove the float:left - and then adjust width to maybe 22% or something to let the expanded content push everything out of the way.
I have been modding a vbulletin forum. All I have modded is the css from within the style editor in the bulletin control panel, plus two template files.
What I have found is that one of the javascript dropdowns is no longer working (it definitely was).
The forum is http://forum.selfbuild.com/
Other dropdowns still work ("community" and "forum actions" links in header) so it relates specifically to the "notifications" dropdown menu item, that you see when logged in.
I have reverted the two template files I modded, but the problem still occurs, so it's not that I have blasted some code out of existence.
On mouseover, rather than the browser showing javascript:// in the bottom bar, it shows a URL.
So I have no idea how to fix it - I don't know how to go about tracing a javascript problem.
Any help appreciated. To log in and see the issue, you can use testuser abc123, and once logged in the notifications menu item appears.
Remove overflow: hidden from .toplinks - then your menu will show.
.toplinks {
background: none repeat scroll 0 0 #DEDEDE;
color: #417300;
float: right;
font: 11px Arial,Tahoma,Calibri,Verdana,Geneva,sans-serif;
overflow: hidden; <- kill this
text-align: right;
width: 430px;
}
This class was basically hiding everything that wasn't already shown, ie. the drop downs.
I have a <button> with an accesskey assgined to it. The accesskey works fine as long as the button is visible, but when I set display: none or visibility: hidden, the accesskey no longer works.
Also tried without success:
Use a different element type: a, input (various types, even typeless).
Assign the accesskey to a label that wraps the invisible control.
Note, I'm not sure if this is the standard behavior, but prior to Firefox 3 the accesskey seemed to worked regardless of visibility.
The behavior you are seeing is correct, you cannot "access" an element that is not displayed. Sal's suggestion will almost certainly work, but may I ask what your purpose is in doing this? There is probably a better way to accomplish what you are trying to achieve. Have you considered using a keypress handler?
I think you probably want to go with the other suggestions if you don't want a keypress handler. Try position:absolute; left:-9999px; to pull your content out of the page. Or use absolute position, change opacity to zero and z-index to -1. By using position absolute the element won't affect positioning of other content on the page, setting opacity will make it not visible. Even with opacity set to zero you can still click on the element and though you cannot see it it may prevent you from being able to click on other elements of the page so use a negative z-index to pull it behind other content.
You can apply a negative margin to push the element outsite of the visible page. I think many browsers and text readers ignore elements with display:none and possibly also visibility:hidden.
Easiest solution: height: 0px; margin: 0px; padding: 0px; in your CSS.
Instead of visibility or display attributes, position the button outside of the page
<button accesskey="a" style="position: absolute; top: -9999px">button</button>
Warning: using left instead of top causes a weird display bug in ie7