React select (https://github.com/JedWatson/react-select) drop down list is not fully shown in IE, works in other browsers.
Works on other browsers.
I tried setting the
.react-select__menu {
overflow-x:auto;
overflow-y:auto;
}
Tried also to set the position to absolute and fixed for react-select and overflow to visible when menu is open (not sure if correct).
and also setting the height for both menu and its child menu-list, nothing seems to work.
what can be done to fix it ?
Thanks in advance.
it was a simple fix ,after many "un-necessary" trial and errors, i made the react-select position:absolute and it worked.
I don't have experience with react-select, however I suspect the parent is limiting the visibility of the drop-down menu. If you can add the CSS of the parent container to your answer, that might be helpful, but for now my suspicion is based on the way the menu is being cut off. If you inspect the drop-down does IE indicate the element hight is taller than what is shown, with the rest of it hidden on the page?
Another way to test this which might be faster, is to create a plain HTML document with the drop-down, no additional except for react select.
If it's still broken I think you would have a good case for opening a bug ticket on GIThub.
In the mean time, without knowing what the exact issue is, you might be able to use positioning on the parent or a nested child of the drop-down (as the top level might be position absolute) to get the drop-down to render correctly. Sometimes adding position:relative can resolve collapsing element issues.
I see that you solved your problem but I had this same issue and struggled with it for awhile. In case anyone else struggles with this I wanted to share how I solved it. My dropdown was cut off and I was having issues getting the scrollbar to show up, overflow: auto; was not working for me.
To make it work I added maxMenuHeight={150} to and set the position to fixed. Here is my code:
<div className="d-flex justify-content-end align-items-baseline">
<p className="font-size-14 mr-1 mt-3 align-self-end">Page</p>
<div className="mr-5 mb-5 align-self-start">
<Select
maxMenuHeight={150}
className="btn btn-mini position-fixed"
options={paginationOptions}
placeholder="1"
/>
</div>
I have also faced the same issue.
I just fixed it by using overflow: visible on the parent component of react select check attachment here.
as the menu was cut down due to the overflow hidden of the absolute positioned parent.
Related
I have tried every way I know how (and failed) to properly set the width on a kendoAutoComplete. My latest attempt (below) is JS based, but I've also tried numerous CSS solutions.
The issue I'm seeing is that no matter the width I choose, the actual input area remains a consistent width, and then there is a weird gray area to the right:
Here's the hover state (the gray box disappears):
But don't be fooled by the appearance of a large text box. Here's what happens when you begin to type:
I've tried:
var autoComplete = $("#gridFilter").data("kendoAutoComplete");
autoComplete.list.width(400);
And
autoComplete .wrapper.css("width", "300px");
And...various CSS solutions.
Why must it be so hard to set the width of a silly auto complete? What am I missing here?
I want the width of my auto complete to be 100% to fill its container.
Bonus points if you can help me understand why Telerik consistently makes me want to hurt myself.
EDIT
OK, I've (partially) figured it out. I temporarily removed bootstrap CSS from the page and the input works as expected.
If I find the offending CSS, I'll post an answer here.
As mentioned in the edit above, default Bootstrap CSS was conflicting with the styling. Specifically, the max-width property. The CSS below fixed it:
<input id="gridFilter" style="max-width: 10000px; width:100%;" />
I have HTML like below and all is displaying grand, the problem is that due to a problem with Sharepoint 2013's editor your unable to edit the link text but as soon as I remove display: block I can edit the link text, the same happens using float.
My question is there a way to emulate the affect of display: block where it will span the whole width that is available to it without using display or float?
<div class="button">
Link Text
</div>
There is one option to make an inline element to be like a block by using position:absolute without using display or float.
But I hope absolute positioning doesn't fit your want. Thus, the final conclusion is that you must use display or float property to render it correctly.
If you even use absolute then don't forget to keep position:relative to your parent element from which you want to be the element as absolute.
You could try display: inline-block; width: 100%;. You might need to alter the width to take into account any padding or border you've set.
(In the past I've used an edit mode panel and other tricks, so these hacky styles only apply when the page is being edited.)
SharePoint 2013's editor is so utterly awesome isn't it? :-(
i'm having a very strange problem with the wordpress template.
i'd like to place 2 divs besides each other like this:
<div style='float:left;'>
left div
</div>
<div style='float:right'>
right div
</div>
normally this works as it should - both divs should stick directly to each other -
but something in the style.css (which uses css reset) causes the right div to overlap the left div with ~ 5pixels.
i searched the whole .css for it but couldn't find out :((
it's just a fact that it must be something with the default css.
anyone knows what is causing this - some fix?
thanks
Do either of your divs have widths? Give them a width, float BOTH left and add margin-right to the first div.
Make sure your width + margin doesn't add up to more than the surrounding div. For example if your surrounding div is 600px your boxes shouldn't be more than width:290px; a margin-left:20px; on the left div.
Also, you can use Firebug or any other web development broswer tool to check to see what styles in your stylesheet/s are affecting your divs.
Float both left or use inline-block. You can also just float the first one left.
I would highly recommend that you (if you don't already have it) download FireFox and install the Web Developer Toolbar plugin. This plugin is GREAT for tracking down problems like this. Under the CSS portion of this toolbar when you're viewing the page with the issue you can select to "View Style Information". Then just click on the divs that are the issue on the page. Off to the left you should see a little window pop up that shows all the styling that is affecting those divs and what css source they are coming from. With CSS if you rely on "bug" fixes to fix things that aren't really bugs then you'll just cause more headache later on in most cases.
I think the problem is probably with parts further on in your code. May I suggest clearing the floats:
Html:
<div class="clear"></div>
CSS:
.clear {
clear: both;
}
The code you have posted would work fine, but I expect you have more divs or containers or something somewhere which is messing it up.
Total width = margin_width + border_width + padding_width+ width of the box + (the same for the other box).
Make sure you have width defined for both floating device. The best way is to debug the code by hitting F12. You can do it FireFox, IE,Chrome or Safari but usually you have to enable this option yourself.
<div style="background-color:red;width: 300px;">
<div style="float:left;border:1px solid yellow;">AAA AAA AAA</div>
<div style="float:left;border:1px solid green;">BBB BBB BBB</div>
<div style="clear:both;"></div>
</div>
Pasting the above HTML here: http://htmledit.squarefree.com/
And then zoom out in Chrome, you will see that <div> B will eventually be forced down to the next row. If you do the same thing in Firefox and IE, both <div> A and B will stay on the same row.
Adding a height attribute on the parent <div> may help, but if the height of the content is not known beforehand, this will not be feasible.
I would like to know how this problem can be fixed in Chrome.
Many thanks to you all.
EDIT: uploaded a screenshot here: http://img52.imageshack.us/i/screenshot1xd.jpg/
On your first div, add this:
<div style="background-color:red;width: 300px; white-space:nowrap;">
See if that helps.
I can't reproduce this either, but it seems that you are only zooming the text and I can't find this as an option in Chrome right now.
However you should keep in mind, that this is something that always can happen in any browser, if the user somehow overrides the font-site you specified. There is not much you can do other than keep your layout flexible enough to handle it. For example, in this case don't set the width of the surrounding element in pixels, but in ems so that it is relative to the font-size.
There may be other solutions, such as using other methods of placing elements beside each other, but that would require that you give a more concrete example of what you are trying to achieve, especially explaining you don't want the elements to wrap.
Works just fine on my Chrome 5.
What I could suggest to you is to specify the width on the parent div in "em" instead.. Though it seems that your particular version of chrome had a bug, which has already been fixed :)
Another solution is to set nowrap, as proposed by #Kyle and instead of setting static width - set the min-width. This way the div will expand, instead of having the children wrap to the second line ^_^
try using the max-width attribute!
I got an element fixed in the center of the screen, having specific dimensions (let's say 500x500). The element has content, which is larger then the height of the element and thus causes scroll bar to appear, which is fine. In FF/WebKit everything works nice. However in IE 7/8 ... content of the fixed element doesn't scroll, or scrolls with HUGE delay. If I change position:fixed to position:absolute, it starts to scroll fine, but with position:fixed... it's just a pain!..
Is it some known issue? Anyone heard/encountered something like that? Any ideas how to deal with such?...
Only thing any useful I could find on this subject was this, How to create Position:fixed in IE5.5+.
Position:fixed was implemented in IE7. Maybe it still has some issues with it, but there might be something else in your markup or CSS that would cause such behaviour.
It'd be beneficial if we could see some code to help us with your problem.
It turned out that there was additional problem to this - shadow filter beneath that element with position:fixed and scrolling content within it. We couldn't find any solution to this other then either disabling shadow filter in IEs or disabling position:fixed.
:(
.fixDocument
{
position: absolute;
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
Check this page: http://www.gunlaug.no/contents/wd_additions_15.html