#StackBounty: #2013 #javascript #development #css #html Can i rearrange my Key Filter for a wiki page to appears on the top of the page…

Bounty: 50

I am working on an enterprise wiki site collection inside my sharepoint server 2013 on-premises. and inside this site collection i have enabled the Metadata navigation and filter site feature:-

enter image description here

Then i defined the following fields to be used inside the Key filters:-

enter image description here

so the result i got is that when i navigate to the wiki pages library, i will get the key filters fields on the left hand side of the screen as follow:-

enter image description here

now our customer did not like this look and feel. and they asked us to made the key filters columns to be displayed in a grid on the top of the page. now i find this list view web part which suppose to work well https://splistviewfilter.codeplex.com/ . but the problem i got with this list view web part is that the filter will work well on the first click, but when i do a paging the filter setting will be ignored.

so my question is that can i using css/javascript to realign the built-in key filters to be show as follow:-

  1. in a grid view, 3 columns per row, instead of being displayed under each other
  2. show the key filter at the top of the page instead of being displayed at the left hand side of the page ?

something such as :-

enter image description here

Get this bounty!!!

#StackBounty: #javascript #css #safari #hover #transform Hover effect issue on Safari 10.0

Bounty: 50

There is an issue with the hover effect that only appears on Safari 10.0.

The web is this:
Manu Caballero

What is happening is that the effect is working radomly, or not working at all:
Hover effect doesn't working
To see it working, you can use Chrome or Firefox.

The most strange thing is that, on Safari 10.0, if I try to use the inspector, the hover effect works…
enter image description here

On Safari 10.1 and other common browsers like Chrome, Firefox… is working perfectly.

Get this bounty!!!

#StackBounty: #css #angular #google-chrome Can't Set Opacity of Router-Outlet for Animations [Chrome]

Bounty: 50

I have a single page Angular 4.3.1 app that uses the <router-outlet> tag to render components.

The issue is that the component is rendered with an encapsulating element called: <ng-component> (if no selector is present).

So the issue is when I apply opacity to the wrapper the child elements are not effected. It seems as if it’s because the wrapper is a custom DOM element.

Here is an example


div class=”snippet”>

<!DOCTYPE html>

    <link rel="stylesheet" href="style.css">

    <ng-component style="opacity: 0.2;">
First Line
Second Line
Third Line
First Line
Second Line
Third Line
</div> </body> </html>

I’m using chrome version 59.0.3071.115 which seems to be the latest version right now.

Also here is a screenshot in case the problem is only on my end:


I tested the same thing in IE11 but the opacity was fine there. Anyone else experiencing this?


Get this bounty!!!