I have a multiselect dropdown in one of my kendo grid that i am using for kendo modal window.First place its dropdown box is coming good but because of alot of columns i have to scroll horizontal right, If I does that and click for dropdown to select the value is displaying same place where it was before scroll. current css class is set to position relative on parent.
How can i fix this issue ?
main.html
<div multiselect-dropdown-tree
class="geoPosition"
ng-model="this.dataItem.geoLocationsKeyList"
disable-children="true"
options="treeviewOptions">
</div>
main.css
.geoPosition {
position:inherit !important;
}
Use position: static. static is the default value of the position property.
You can always use initial as any property value, which will set it back to the user agent's default.
Related
I have 2 dropdowns in Datatables to fiter the content and i've got a bug. When a dropdown on the right side of the page, it shifts the page to the left by about 10px. And in the opposite case when dropdown on the left it shifts page to the right. With first Click happens nothig, but only when i try to change the selected value.
<p-dropdown
id="ListFilter_priority_dropdown"
inputId="ListFilter_priority_dropdown_input" #priorityDropdown
styleClass="my-form-control" [options]="prioritySelectItems"
[showClear]="true" placeholder="Select"
(onChange)="filter($event.value)" appendTo="body"> <ng-template
let-option pTemplate="item"> <div
id="ListFilter_priority_item_container"> <span
id="ListFilter_priority_dropDown_{{option.label}}">{{option.label}}</span>
</div> </ng-template> </p-dropdown>
Angular v 13.3.8
PrimeNG version 13.4.1
Build / Runtime - Angular CLI App
I have already tried to play around the position of the "body" - absolute, static, relative and s.o. but it doesn't work aswell as changing the property "appendTo" of dropdown.
This seems like an unresolved bug with the p-dropdown component of PrimeNG. Other people are having this issue:
https://github.com/primefaces/primeng/issues/10992
https://github.com/primefaces/primeng/issues/11046
However, I was able to overcome the problem in PrimeNG 14.1.2 by adding [virtualScroll]="true" to the p-dropdown component, and also adding a min-width to the dropdown panel with the property [panelStyle]="{ 'min-width': 'min(100vw, 250px)' }"
Another situation that may be causing this is if you're using appendTo="body" and the body has overflow: hidden or overflow-x: hidden but has horizontally overflowing children.
If you're using appendTo="body", try setting the overflow to auto and check if you have a horizontal scrollbar.
If you do, this may be causing the problem. To fix this, either take care of the overflowing children, or set overflow: hidden/overflow-x: hidden on a child element of the body.
I made a button and when I click on that ;
it moves,and its not fixed!
the style that I wrote for that is :
(signup is the name of class for button)
.signup:active {
position:fixed;}
CSS position: fixed doesn't mean it is a "fixed" position, it means the position of the button won't change when you scroll. I suggest you read more about CSS style position:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
What you are doing here with CSS (See my comment above):
When mouse is down on button, change position of button to fixed. I guess thats why it moves...
And may be you could provide some more information of what you actually want to achieve so we can help you a bit better :)
I'm trying to add a downward-pointing chevron (basically a down arrow) from the FontAwesome icon set to a form select box. I've removed the default styling from the select box and added the icon as a pseudo-element after the form. It's working as-intended in a jsFiddle, but not on the site I'm working on.
It seems like the issue may be that the background: transparent; styling on the select isn't working the same on the site as in the fiddle, but I'm not sure why that would be the case. I know I could make the icon visible by increasing the z-index, but then the select dropdown won't show when the icon is clicked (as it does in the fiddle).
Edit: I need to have the dropdown show up when the icon is clicked; this is the case in the fiddle, but doesn't work with a higher z-index on the pseudo-element
Edit 2: Example of accepted solution is in this fiddle; also removed link to production website.
Any thoughts on what's happening here?
Seems as you have 2 different problems - positioning and functionality. Currently your website doesn't display the arrow at all. And even if it did, clicking on the arrow would not open the dropdown list. Simply putting it on top, may work in some browsers, but AFAIK would not be a cross-browser solution.
Per functionality, add 'pointer-events:none' to the arrow alement. This will make sure that it doesn't handle any clicks and they will be propogated to the select elemnt.
Regarding your positioning:
Instead of changing the z-index, simply set the min-width to N pixels and remove the absolute positioning from the arrow.
In CSS selector ordering:after
Remove `position:absoulte;`.
In CSS selector select.orderby
Change width:100%; to min-width: 200px; (or any width you need)
Hope this helps!
You have z-index: -1 on this .woocommerce-ordering:after in your css. Make it 0 or larger than 0 and it works.
I ran into a CSS issue in the site I'm working with: http://shontejtaylor.fix-it-buddy-clients.com/
If you click the button under the Slider that says "POTENTIAL... TAP IT", It will change its active state to a different position.
Q: How can I fix the issue using CSS only?
If you click the button under the Slider that says "POTENTIAL... TAP IT", It will change its active state to a different position.
set the TOP into auto :-)
Like Cherniv pointed out, the button has 1px assinged in "top" attribute. So what I did is I put
I just assigned the value of "top" to "auto". And it worked.
#mc_embed_signup.horizontal .button{
top: auto;
}
I am working on a web based drag and drop type application.I could drag and drop the draggable element(i.e image) to required area (i.e droppable 'div' element).My problem is the droppable element is getting above the image element while dragging.I would also like to move the image further to other droppable element(there will be several droppable elements in my page) so i want my image,which is being dragged currently,to be on top of all other elements on the page.I used jQuery and html.Can any one please suggest me a way to solve this problem.Thanks in advance
You need to make sure the z-index of the image is set to a value higher than the other elements on the page. This can be done through CSS statically or with jQuery dynamically.
CSS:
img { z-index: 99999; }
jQuery:
$('img').css('zIndex', 99999);