I'm using jQuery UI Autocomplete 1.12.1 for several dropdowns, with some having a lot of options. In order to accommodate scrolling, we added the following into our stylesheet:
.ui-autocomplete {
height: auto;
max-height: 180px;
overflow-x: hidden;
z-index: 1002;
}
What's happening now is that when you mouseover the last option in shorter lists, it triggers the vertical scrollbar as in the images below:
My suspicion is that the element height/width that is calculated by the library is missing 2 pixels somewhere, perhaps from the border? Any idea on how I can solve this issue?
To get around the problem, we used two separate css classes - one for the case of a dropdown that needed a scrollbar and one for a dropdown known to have only a few options.
Related
I have a question on using CSS in order to hide a row in a questionnaire (problem occurs more than 20 times, so unfortunately difficult to just adjust just the structure of the questionnaire):
How can I hide an HTML table row so that it takes up no space (unlike: "visibility:hidden")?
I look for an alternative command to "visibility: collapse" (hide row (unlike: "visibility:hide") but keep impact on layout (keep rowspan + colspan in contrast to "display:none") that works in all browsers including Chrome and IE.
Is there any alternative that would solve my problem?
I have added a link to the page that causes my problem for your reference:
http://ww2.unipark.de/uc/hollnder_Goethe_Universit__t_Fra/4568/ospe.php?SES=ce4b3db51563762d1d5b1c27c3598dbc&syid=243842&sid=243843&act=start&preview_mode=1
(Code: 80a4231323d632d5 if asked: "Bitte geben Sie Ihre gültigen Zugangsdaten ein")
I added the row with the item scales (occuring always on top) always also below the subtitle in order to solve the problem of shifting buttons for the statements below (currently have the problem of shifting buttons for questions 1 and 2 - problem is fixed for question 3 but I cannot get rid of the additional space below the subtitle).
To solve my problem, I have tried to add the below 3 different codes in a separate CSS file which one can use to adjust the style of the questionnaire:
.nameq_2610826 ul.head.odd.i4 {opacity: 0; position: absolute; z-index: 10; top: 0; left: 0;}
-> FIRST QUESTION: SPACE IS ELIMINATED VIA font-size:0px BUT THIS WAY ALSO THE LAYOUT IS DISTROYED
.nameq_2612760 ul.head.odd.i4 {display: none; border-bottom:none}
-> SECOND QUESTION: SPACE IS ELIMINATED VIA display:none BUT THIS WAY ALSO THE LAYOUT IS DISTROYED
.nameq_2612762 ul.head.odd.i4 {visibility: collapse; border-bottom:none}
-> THIRD QUESTION: LAYOUT OF ITEMS BELOW IS KEPT IN THE RIGHT WAY BUT I CANNOT GET RID OF THE SPACE AS WITH COMMAND Visibility:COLLAPSE IN FIREFOX
An alternative way to solve the problem might be to make sure that the design is not destroyed by the usage of subtitles. In fact, I use the additional row with the item scales just to make sure that the buttons below follow the same layout as above the subtitles.
Any solution to my problem would be super helpful.
One alternative to
visibility: hidden;
is
opacity: 0;
That will make the element completely transparent.
If you then want to move it out of the way so it occupies no space on the page, you might try something like:
position: absolute;
z-index: 12;
top: 0;
left: 0;
Try display: none;
this will render the element with 0 height and width
and also invisible semantically.
Have you tried overflow: hidden along with a height of 0?
I am wondering: You write about a HTML table, but there is no table in your code, it's all uland li elements, and other stuff (input, labels etc.) inside them (?).
So I would recommend to actually use tables, however not with <table>, <tr>and <td> tags, but with <div> tags instead, which get their table styling trough CSS, like display: table, display: table-row and display: table-cell. These are much more flexible concerning styling (CSS) and also responsivity (although I don't know if you are after that).
It's quite a bit of work to rebuild the whole page like that, but I think it could help you.
I have a dynamically generated list of moderators on a minecraft network with a tooltip generated for each head that is generated showing their username on hover. The functionality works, the tooltip generates and has the correct username in it however, the position is wrong. It's shifted to the left and falls apart as I move down the list. Here's a gif on what's happening:
I simply do not know what to do in this situation.
Well the plugin seems to work correctly (if the names are okay), I suppose it might be a css issue. Maybe the parts of the tooltip get somehow some margin on them. try to inspect them with right click and see if they have any other style attributes than the defaults.
Anyway, if you could post some of the codes, that would be easier.
Seems like this page has changed since you asked this question, but I bet it was a CSS issue. You probably needed to center the tooltip box relative to its parent. Here's some (unvetted) code that might help. I've only included the properties that would affect the centering on the tooltip container:
.parent {
position: relative;
}
.tooltip-container {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
Notice, you have to set a width on the tooltip-container. margin-left is 1/2 the width, and negative (visualize that left: 50% will put the left edge of the container at the center of the parent, and the negative margin-left will shift the container half the width of the container).
I got two divs, and ive given the divs backgrounds.
They have exactly the same attributes/css.. But one div is fully clickable (the entire image inside the div area is clickable), the other one is only clickable here and there.. Any ideas?
http://romeon.net/deffrage
Its the two buttons
"Deffrage" "Josef"
its the deffrage button that is not working..
Your .backlava item is obstructing the link below it. You'll need to adjust the dimensions of this item. You might be able to simply remove the explicitly-declared height from the li. A quick test revealed that this fixed the problem, without affecting the layout (you should test further though if you decide to go that route).
In following code, change height from 53 to 3.
<li class="backLava" style="left: 9px; top: 0px; width: 66px; height: 53px; overflow: hidden;"><div class="leftLava"></div><div class="bottomLava"></div><div class="cornerLava"></div></li>
Both link for me. But one of them has the end tags in the wrong order (</span></div></a> where it should have been </a></span></div>).
And this CSS
.robin {position: relative;float: left;margin-right: 100px;}
applies to only one of them.
(And what's the point of the span without either a class or an id? That's a no-op, I'd say).
There seems to be Javascript setting the height of the backlava class to 53px instead of it's default of 16px. Remove whatever Javascript is doing that and you should be good.
I have an Ajax Toolkit combobox in a web page, which have a master page. The Combobox is inside a table.When the webpage loads the listitems of this combo box are appearing below far away from the combo box.
What is the fix?? :(
.ajax__combobox_itemlist
{
position:absolute!important;
height: 100px !important;
overflow: auto !important;
top: auto !important;
left: auto !important;
}
It's work perfectly....
I'm having the same problem. It's a well listed bug that is also in the ajaxcontrolkit autocompleteextender. Basically, the calculations for where the list will be placed inside the page are wrong.
There are lots of fixes for this, but they're a pain to use, so just do this:
combobox1_OptionList{
position: fixed !important
}
It changes the way the calculations are made, which luckily makes it accurate.
Note: if your containing div will change position on window resize (e.g left: 10%; top 50%;) then when you change your window size, the combo box list will not move under the combo box and will be left behind. However, each time the combo box list is triggered its position is recalculated, so adding a javascript event for a window resize that turns the comboboxlist off might do the trick.
Try wrapping the ComboBox in a div. I had the very same problem. I added a class to each ComboBox div and added the following css.
.cbox
{
margin: 0 auto;
width: 280px;
}
Set the width according to your preference. Margin: auto places the div centrally within the parent according to the width.
Kindly look at this sample
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ComboBox/ComboBox.aspx
ComboBox Known Issues
When ListItemHoverCssClass is specified and the ComboBox list is scrollable, highlighting a list item will cause the scrollbar to flicker when using the Internet Explorer web browser. To avoid this issue, do not specify the ListItemHoverCssClass property.
if this doesn't solve a problem mention your markup for combobox in comment
thanks
I have several divs on a page that all have the same width but different heights. They are all in one div, the #note1PreviewDiv. They all share the class .note, which has the following css code (among other):
.note{
width: 160px;
padding: 10px;
margin: 10px;
background: #e3f0ff;
float: left;
}
I thought with float: left; they would all automatically align so that they are well aligned among each other.
Here's a preview of what it looks like:
Current state http://posti.sh/img/ist.png
And here's what the positioning should be like:
Desired state http://posti.sh/img/soll.png
I think you get the idea. Somehow it seems to me the height of the leftmost div pushes the other divs in the second row to the right - but that's only guessing.
Thanks for your help!
Charles
You're not going to be able to do this easily with CSS only.
CSS3 has a new feature called column layout, but browser support is not great. IE9 and below don't support it.
See http://designshack.net/articles/css/masonry/ and the last example for CSS3 solution.
Have a look at these js / jQuery options for easier implementation and browser support:
masonry
isotope
vanilla masonry which doesn't need jQuery.
wookmark
The kind of lay out you want is really difficult (not possible?) without going for a column based approach and adding additional block elements to represent each column. This obviously won't work with a flexible number of columns if you want a dynamic layout based on screen size.
That said, you could always use JavaScript to dynamically place elements into columns, and get it to match the screen size.
Is the height of the parent container given a fixed value? If it is, try setting the height of the parent container to auto, and the overlow propery to hidden.