LinkedIn share button is not aligned with its count area - linkedin

Does anyone have an idea why the LinkedIn share button is not aligned with its own count box?
I am not meaning aligning it with other share buttons like Facebook or Twitter.
The LinkedIn share button is not aligned with its own counter box.
Here: http://www.bbi.net.br/galeria/gal1.html
Thank you

I was getting the same issue, diving a little deeper with firebug I found that I had a style on an anchor which was causing the issue. To fix it add:
.IN-widget a {
font-size: 100%;
color: inherit;
line-height: 1;
}

Please to check what is the version you are using for jQuery. Since LinkedIn Button is also using a jQuery Library, your own library may cause a conflict. Try to make your jQuery the most up to date.
Maybe helpful :
https://stackoverflow.com/questions/15388054/linkedin-button-goes-to-the-end-bottom-of-the-page
Good luck.

Related

Top Margin / Overlay and Hiding Elements

https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.

Is it possible in row in Dashboard to have an alternate color using Google App Maker?

All the codes that I've research are not acceptable in Google App Maker. Can somebody help me to solve this issue?
Sample image below:
Ctto
https://bootsnipp.com/snippets/50E5W
Your question is really really bad. You should include at least a code snippet of what you've tried so far. Anyways, put the following css at the Page style level of where your table is and you should be good to go.
.app-ListTableRow:nth-child(even){
background-color: mistyrose;
}
.app-ListTableRow:nth-child(odd){
background-color: lightgreen;
}

Github Code Review - Full Screen Width

Can anyone tell me how to tell Github, that I want to see code reviews on Pull Requests in full screen width. Code lines are often longer than the area provided by Github and there is a lot of unused screen real estate.
Is there a setting in Github or a Chrome extension or Tamper Monkey or something like that.
Use Stylebot chrome extension
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en
I use my own style for my favourite websites, I love it.
Plus point is that you can use the styles created by other peoples also. Someone might have already done the things you need there. Or else you can modify on your own.
I have few CSS rules for you,
.repository-with-sidebar .repository-content {
width: calc(100% - 50px);
}
.container {
width: 90%;
}
Github's CSS has changed, so the new styles should be:
.container-lg {
max-width: inherit;
}
You can create a shortcut in your browser to automatically apply this style:
javascript:(function(){var a=document.getElementsByClassName("container-lg")[0];a.style.max-width="inherit";})();
There's a class on the body called full-width for that, so all that's needed currently is:
document.body.classList.add('full-width');
This can also be added as a bookmarklet:
javascript:(function(){document.body.classList.add('full-width');})();
Don't know why the OP said it's not a problem anymore, if you're doing a code review of your own work you won't be comparing it against another in side-by-side view.
Fix for full screen:
Inspect element on the white space to the left of the code
You'll be brought to a tag, expand this
Click on the 3rd div child of 'main'
Scroll down through the css on the right hand side until you find ".container-xl"
Untick this and you'll get the code full screen
If you want to you can write a console script or use one of the plugins mentions above but I find this method the simplest to remember and apply on anyones machine.
This is no longer an issue after GitHub introduced side-by-side code review. That really works well.

Google Map Pan Control Disordered on IE 11

I'm using Google Maps API v3 in my application. Maps Pan control isn't displaying properly on IE 10 and IE 11.
.
It's working fine on Chrome, Mozilla and IE8, IE9. I can't figure out the way to resolve it.
on Stackoverflow, a nearly similar question is posted here: Google Maps zoom control
but not solution is not application. Definitely, it's the CSS issue, but I couldn't resolve it. I've checked in IE developer tool for any css class overriding, but no luck.
Have anyone faced the similar problem or anyone had any solution for this?
EDIT: The basic map is also disordered in my IE 11 version.![enter image description here]
-- Anil
Well, as #geocodezip suggested, it's a bug till today in Google map API and best solution for it is to use css.
use below css on the page :
.gmnoprint div[title^="Pan"]
{
filter:alpha(opacity=0)!important;
}
hope it would help others and save time.
-Anil
I just added the styling to my CSS , and fix
.gmnoprint div[title^="Pan"] {
opacity: 0 !important;
}
An important addition to non-English localizations:
You must use in style not "Pan", but the text specific to your locale. For example, for Russian localization - "Пан".
Hover your mouse on a button of pan Control and look pop-up hint. In style the first 3 letters from it are used.
FWIW - I've found that the above CSS isn't enough because we next get "+" for zoom in/out for street view. I made a slight modification...turn off all title items except the one we don't want hidden.
.gmnoprint div[title]
{
opacity: 0 !important;
}
.gmnoprint div[title^="Exit Street View"]
{
opacity: inherit !important;
}
Late to the party I know, but when I came across this issue I implemented the following fix for my applications using Google Maps V3 which I know is similar to what has already been posted here, but just in case it helps as I know how damn frustrating these sorts of issues can be!
<script>
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
</script>
<style type="text/css">
html[data-useragent*='Trident/7.0'] div[title^="Zoom"]
{
opacity: 0 !important;
}
html[data-useragent*='Trident/7.0'] div[title^="Pan"]
{
opacity: 0 !important;
}
</style>

My JS Accordion is acting goofy - it jumps all over the place

I am trying to implement a js accordion I found and I'm having problems with it. The titles are supposed to cleanly slide up to the top of the page and drop the content below. That is not what is happening. There is some obvious jumpiness going on when you look at it. It's not smooth at all. I don't know much about js so please explain your answers carefully. Thanks so much!
http://imip.rvadv.com/accordion.html
EDIT:
After replacing the js with the default file from the site I got it from, nothing changed. Here is a jsfiddle for it
http://jsfiddle.net/imakeitpretty/ruwjn/
Check this: http://jsfiddle.net/luissanchezm86/ruwjn/4/
The problem wasn't the .js, and you don't have to write it all on jsfiddle, since it's JQuery UI, you can simple check it to include it, if it's another external .js, use it as a resource, check fiddle's documentation for that.
Besides that, the other problem was your CSS markup, you had a lot of duplicated classes in that fiddle, it was a bit of a mess.
The main problem with the jumping was the:
.st-accordion ul li.st-open > a{
margin-top: 70px;
}
I just commented that margin-top: 70px;, and it fixed 75% of the problem, I recommend you to use the css that I arrange on the jsfiddle.
Hope it helps you!
UPDATE
Now, if you want to scroll all the way up like http://jsfiddle.net/luissanchezm86/ruwjn/5/ you need to make the body higher on height:
body {
height: 2000px;
}
After looking at your code, you appear to be using this plugin:
http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/
If you go to that page, it has the javascript options you need to control the animation speeds, as well as a working example which is more smooth than yours.

Resources