a quick introduction :
facebook has changed the LIKE (count) button
into something like :
LIKE (count)
[ -------------------- clic = open a Big zone bottom / right --------------------]
problem :
Its nice BUT ....
you forgot that a lot of website are using the like button in "toolbars". Page example
Header
Left column Tooblbar, include fb:like -------------------- Right column
Document content
Footer
and lot of structured pages/ blocs are using "overflow:hidden" !! So it makes the displayed widget randomly truncated everywhere (right, bottom...) depending of its environnement.
Its impossible to remove all the overflow:hidden from the containers blocks, to satisfy a widget update.
What can we do. Some sites where clean, now they look drafts, with all button opening truncated stuff...
any solution ?
If you want to use the Facebook plugin, the only solution seems to be to change the HTML/CSS so overflow:hidden can be removed. Alternatively, you could try to use a service that forwards the user actions to social networks for you and offers different methods of website integration.
If you're not using overflow: hidden for semantic reasons, you could always change it to overflow: visible or just remove it. I'm assuming that the fix isn't that simple...
A quickfix that wouldn't require you to modify your CSS would be to place your FB Like button outside of any containing elements that have overflow: hidden or overflow: auto and use absolute positioning to get it where you want it.
Related
I have a Google Charts dashboard with various filters. One of the filters has 300 options.
When I click on the filter the dropdown list box expands way outside the dimensions the data table.
Does anyone know the class, to which I can apply a height property, so that I get scroll bar within the drop down box.
I've tried to inspect the element and I thought my best shot was the class .goog-menu goog-menu-vertical
but that doesn't seem to affect it
I've enabled "allowHTML" in the options of the wrapper - just need to know a class....
thanks
I might have found a potential solution to what you are looking for in the Google Groups forum: https://groups.google.com/forum/#!topic/google-visualization-api/VilEBO0m3xI
Add the following to your style/CSS:
.goog-menu-vertical {
max-height: 80vh;
overflow-y: auto;
}
I think you also need to have cssClass in the ControlWrapper and allowHtml: true in your code for it to work.
Hope this helps! It did for me :)
EDIT: just noticed that #Alon Eitan provided the answer in the comments section... :) I'll leave my comment here for others to see better
Goal: I need to set anchor tags for the wordpress-site: http://joy-academy.eu/programs/
I am using Visual Composer and there is some animation.
Problem: If I try to set an anchor tag, it scrolls to the right place but does not show the previous parts that are animated like here:http://joy-academy.eu/programs/#example or if I use a Plugin "scroll to Id", it just scrolls to a random place, like for example here: http://joy-academy.eu/programs/#cc
Details: The Wordpress Theme is "Zyen". Ref: https://themeforest.net/item/zeyn-multipurpose-wordpress-theme/8848292
Thanks for your help!
I see that your site is using the Zeyn theme.
That's the first place to look for coding style changes. Here's a demo example doing what I think you are hoping to achieve. http://djavaweb.com/selector.php?theme=zeyn-classic
This means don't use the button for an anchor. So, use the Extra id in the rows to correspond with the anchor link (#example).
Here's the directions to do this; just start after the steps about the menu items.
http://kb.detheme.com/knowledge-base/zeyn-faq-one-page-navigation/
I am trying to create a profile menu for my polymer website, something on the lines of github.com
If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.
The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.
I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output
If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.
Short answer : No you can't.
Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :
...
connectedCallback() {
super.connectedCallback();
this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
...
}
...
This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.
UPDATE (22/09/2017) :
Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.
How do I completely remove the sidebar from MediaWiki, and I mean in the sense that the content div occupies 100% of the width of the browser space? I've successfully implemented an extension where non-registered users do not have a sidebar or toolbox to begin with and hence the extra space now seems rather superfluous in such cases.
I'm trying to create my own skin from Vector and have tried so far to change the margin-left: 10em and corresponding tags in div#content and mw-panel in the skin's css file but no luck so far.
Why use CSS when you can edit the sidebar menu and have this stored in the database
Navigate to MediaWiki:Sidebar edit the page and remove the components you don't need
If you want to use CSS then you can try,
#sidebar{
display:none;
}
to see if it gives you the desired effect.
Or you can do what dreamweiver said and use JQuery
$('#side-bar').remove()
If, as you are writing, you are creating your own skin, then you simply do not have to print the sidebar! It is there because you have a piece of code in your skin printing it.
Search your skin code for $this->data['sidebar'], and you will find the loop that prints the sidebar.
However, I'm guessing that you skin has some kind of navigation,and rather than reinventing the wheel, I would recommend using the sidebar, with it's built-in functionality (possible to set from MediaWiki:Sidebar, etc), even if you chose to use it in another fashion. it doesn't have to be printed as a sidebar,just because that's the name -- it could be a top menu, a dropdown, ...
Is it possible to , in Drupal 6 using Views, to specify that an image should be shown only if it belongs to the page? I want to make a header image that's different for every page, so each page should show only the image that belongs to it, and none of the image that belong to other page. Or can I do this without Views? I've used ImageField to add the field for the image, but I want it to display in the header, not the content with the node stuff.
Maybe I misunderstand, but I wouldn't use Views for this. Am I correct that what you want is to display a given image in the header of a given page ? I can see two options :
1) If you page basically display one node, and If you add the image using an imagefield, then you could use CSS to move it out of the content and into the header (using absolute positioning).
Something like :
div.field-field-<your field name> {
position: absolute;
top: 50px; /* Adjust to fit your theme */
left: 0px; /* Adjust to fit your theme */
}
You should make sure you've left enough space for the image at the location you want it. This CSS should go in your theme.
2) You could use a block for each of the images, set the block to display only on the page you want. Go to /admin/build/block/add to create a new block. Add the image under 'block body' - this will depend on your setup, but the general idea is to select an input format that allows images (That is the HTML img tag) and enter the HTML to point to that image, eg. <img src='/path/to/your/image' width='50px' height='50px' />
Then under 'Page specific visbility settings' select 'show on only the listed pages' and enter the path of the page you want this image on.
Save the block, then go to /admin/build/block/list and drag the newly created block in the section you want it to show (eg. header).
Option 2. means you don't have to know CSS/Drupal Themeing, and that the way the page is formated is independant of the node content (which you may or may not want). The downside is that you may end up with a lot of blocks which will make things a bit unwidly. A cleaner way to achieve the same way is to use the context module : http://drupal.org/project/context
There are yet other ways to achieve what you want (Drupal is very flexible), but I hope these are good starting points !