function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Kevin Francisco MulliganKevin Francisco Mulligan 

Visualforce Page with Data Category filters - not able to select dropdown choice

We have a VF page on Knowledge that filters articles based on 4 data categories. The filters were side by side.  I added a right hand sidebar to the page and now the 4 filters are stacked 2X2. However when I click the top category filter and try to select by mousing down, the filter below it opens and the top one closes. I cannot select anything.  

Can this be fixed? Possibly force the top filter to stay open? Or can I reduce the width of the filters so all 4 are in one row?
Thanks! KevinUser-added image
Best Answer chosen by Kevin Francisco Mulligan
Kevin Francisco MulliganKevin Francisco Mulligan
Thanks RZ. Before I tried your suggestion I got some help elsewhere. I used z-index to bring the dropdowns to the front, now I can select from the options, works perfectly. 

All Answers

R Z KhanR Z Khan
I had similar issue. I ran event.preventDefault() in the onclick method. Onclik should be called when you click on your selection so it doesnt click on the dropdown under yours
Kevin Francisco MulliganKevin Francisco Mulligan
Thanks for reply. Now if I hover over any filter (like State or Topic) the dropdown opens automatically. I need to make it so that the filters have to be clicked to open. Is that what event.preventDefault() does? 

My VF page has 3 places with onClick. Here is one, where do I edit it? 

<apex:variable var="hasResults" value="true"/> <div class="article-container"> <div onclick="parent.document.location.href='https://mycompany.force.com/students/s/Article?num={!article.ArticleNumber}';" class="article">
R Z KhanR Z Khan
event.preventDefault stops the default behaviour of your element My code would act ina funny way when i used it though iPad. but I have a feeling you might have a similar issue. . Try the fllowing and let me know if it works
<apex:variable var="hasResults" value="true"/> <div class="article-container"> <div onclick="event.preventDefault();parent.document.location.href='https://mycompany.force.com/students/s/Article?num={!article.ArticleNumber}'; " class="article">

 
Kevin Francisco MulliganKevin Francisco Mulligan
Thanks RZ. Before I tried your suggestion I got some help elsewhere. I used z-index to bring the dropdowns to the front, now I can select from the options, works perfectly. 
This was selected as the best answer
R Z KhanR Z Khan
Glad you figured it out!