Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am working with a React package name 'react-select' that allows me to create dropdown easily. Everything was fine until I create a page where there is multiple divs with several dropdown inside. Weirdly, they go under the next dropdown in the stack.
I can't really copy all my code, so I made something on netlify. Try to open the dropdown under the "Training" section, you should see what I am talking about. There are some empty options, but it's the same behavior anyway.
I tried to put a higher z-index on the "menu" parts (where there is options), but it didn't work.
Here is the link: https://nervous-franklin-89a3d8.netlify.app/#/demo-modify-profile
Thanks!
Seems the problem is the dropdown is trying to overlap the next section(files section in rour example). You need to add a Z-Index to the section containing the dropdown. However Z-index property only works on a positioned element. See docs here
So you want something like this.
<div style="position:relative;z-index:1{higher than other sections};">Container with dropdown in it</div>
<div>Next Section</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am creating a dashboard and in the dashboard I got two boxes that I wanted have in the same level at the top. I am using the display "inline-block" to group them in boxes; however, the result is different instead the bottom part is in the same level but the top is not. See screenshot below:
https://www.mediafire.com/convkey/8e14/xdh672yojc8owe86g.jpg
I set the height of each box to "auto". You can see on the screenshot that the first box is not aligned equally to the second box, is there a way to have the two boxes in the same level or aligned equally at the top? I tried using table-cell display but it has compatibility issue on other browsers such as IE. Thanks
Use the verical-align: top; CSS property on the element which contains your inline-block elements. ;)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have this unordered list
http://neaen.com/frying/neaen-masterfry-continuous-fryer.html
Whichever combination I tried using FireBug, I can't get the first row to align properly. I am sure this is an easy fix, but I am missing it somehow.
These are caused by line breaks in the list items. Do one of two things. Either remove all spaces between each </li><li> or remove the closing </li> altogether. This is valid.
I would get rid of the unordered list code entirely and use divs to make this work. Then you could put only a single link for each of the boxes and have the entire box be the link for each one.
You will have more options for styling and positioning your content that way.
Here is a source you can look at for that: http://css-tricks.com/creating-clickable-divs/
Apologies if this doesn't answer the specific question.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
In my attempt to be terribly clever and have my #secondary sidebar sit on top of the slideshow on my homepage, I have somehow made the area dangle over the #wrapper on all the secondary pages. Have added a removed a whole bunch of div tags, nudged things around and tried everything else I can think of. Anyone have a suggestion how to fix this?
This is the homepage: http://emgraphics.net/joyful/ and the sidebar dangles on any other page (the shame!) Thanks!
You won't have a problem once you add content to those pages, though. Not sure what the issue is. An absolutely positioned element is taken out of the document flow, so the wrapper will not take any notice of the sidebar. You could alternatively float it and give it a negative top margin on the home page.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Panel control over div is impacting hyperlink within the div as no linkable.My panel is just appear above my div hyperlink content.
so part of my hyperlink where panel displays not linkable.. but remaining part of hypherlink is linkable
I am not able to add my sample code over here..
Please see my detail post here.. http://forums.asp.net/t/1895787.aspx/1?Panel+UpdateProgressBar+controls+over+div+is+impacting+hyperlink+within+the+div+as+no+linkable+
You misspelled "progress" in the closing </progressTemplate> tag.
Update
Actually I was hoping that would fix it. Usually if you're having z-index issues and there's a borked tag, that's the reason why.
If it's still not working, then you need just need to dig into the CSS of the page and figure out why. The HTML you gave is not indicative enough to know what the issue could be. You want to 1) look at the rendered HTML source, rather than your ASP.NET view, and 2) look at what CSS is being applied to that HTML.
Generally, if you need to move an element above another that is blocking focus, you just increment z-index until you've achieved that. Just bear in mind that the element must have either position: relative or position: absolute before z-index will even apply and sometimes the overlapping element's z-index is ridiculously high (1000, 9999, etc.). So you might have to make the blocked element even more ridiculously high. This is all just trial and error stuff, though, so you're mostly on your own for that part.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have made use of the DevExpress ASPxDropDownEdit and DropDownWindowTemplate.
I have copied the example from the DevExpress demo site to setup my page - link to demo
Now the problem I'm having is when the Drop Down gets too many values, it extended outside of the page and i cannot select values lower down in the drop down box.
Am I able to place a scroll bar in the DropDownWindowTemplate so I can fix the height?
I have tried setting the Height of the Grid within my DropDownWindowTemplate as well as setting the DropDownWindowHeight on the ASPxDropDownEdit.
Include the Div element into the DropDownWindowTemplate and set its style.height property to some value. If you set the div's style.overflow attribute to Auto, this Div element will show scrollbars when it is necessary. Finally, you will have to include the required content to this DIV.