I'm using in my AngularJS project md-tooltip.
I tried to set the position by CSS by this way:
<md-tooltip class="tooltip" hide-sm hide-xs show-gt-sm><span>{{item.title}}</span></md-tooltip>
and :
.tooltip {
position: relative;
right: 20px;
}
It doesn't work. Is it impossible to do it?
Thanks for help.
Is definitely not impossible. Seems is working on
Fiddle (example here)
just by setting the class.
.tooltip {
position: relative;
right: 20px;}
I would suggest you to use the props of the tooltip if you can ( mdTooltip ) tough.
If your code is still not working, probably something overwrite it. Or is just not working the way you expect it?
I am helping out producing a website for a friend but the header isn't fixed at the top, it overlaps the slideshow at the moment. However if I collapse the screen to 'ipad' width the header is fixed at the top.
This is the site at the moment: http://www.testing-30-10-1993.com/
I don't want to risk editing code in case it messes up. I purchased this theme from Template Monster. I just really want the header/nav to be fixed like if you drag the website width to ipad size.
Can anyone help? Alternatively does anyone know anyone/website where I can pay someone to do this? Cheers & appreciate all help. I would add in code but I'm not even sure what section of the code I should copy.
x
If you are not afraid to edit a line of code, go to line 844 of the main-style.css file in the folder to find this declaration:
.page-template-page-home-php .header > .container > div {
position: absolute;
}
Change it to this:
.page-template-page-home-php .header > .container > div {
position: relative;
}
Otherwise, if you'd prefer not to mess with the theme's files, install a plugin for adding custom CSS and paste in the following code:
#media (min-width: 1200px) {
body.page-template-page-home-php .header > .container > div {
position: relative;
}
}
Good luck!
I've been trying to use Firebug to inspect the elements on my page to see why the pruduct image is dropping down below the configuration box on the right instead of being near the top of the page without much luck. Can anyone see what the issue is?
I've asked the theme developer and they said that Cart2Quote plun breaks the Argeto layout. I'm sure I can tweak the CSS and fix this but I can't find the issue. Can anyone see the problem?
http://dev.globalamericaninc.com/index.php/le-37i-g-3-5-embedded-mini-board-with-intel-skylake-6th-gen-core-h-series-processor.html
you must have an element (or more) that has {clear : left} or {clear : both} in the right side. Google what clear does in CSS
change below CSS rules:
default.css line 742
.product-view .product-img-box {
float: left;
width: 445px;
}
default.css line 746
.product-view .product-shop, .col1-layout .product-view .product-shop {
float: right;
/*
float: none;
margin-left: 385px;
width: auto;
*/
}
I'm trying to do a simple header like so:
Here's my bare bones code:
http://www.ogmda.com/test/help.html
I just can't seem to get the LOGO, NAV, and SOCIAL ICONS items to float correctly using BS3's baked in code. Can someone help start me on the right foot? How would you write the code? Thanks!
adding the following seems to do it for me:
h1 { float: left; }
.list-inline { text-align: right; }
.nav-pils { float: right }
I added a Google Translator widget to a site (using the code provided here: http://translate.google.com/translate_tools) and have the following issue:
It automatically adds a style attribute to the html tag whose value includes:
height: 100%
This is "breaking" the page layout. For example, CSS backround images that were positioned to "bottom" are now (incorrectly) positioned at the bottom of the view port.
Is there any way to prevent or fix this?
This resolves the issue:
/* Google Translate Overrides */
html, body{
min-height: 0!important;
height: auto!important;
position: inherit!important;
}
I was able to solve this by setting the body min-height attribute in css as !important to prevent override.
body {
min-height: 0 !important;
}
UPDATE - Unfortunately, this no longer works. The Google Translation script will strip out any attempts you make to counter it's min-height style. I have both the above CSS in my stylesheet AND an inline style on the body tag.
The Google Translation script is pretty aggressive and I'm not seeing any way to disable this.
This should work:
html {
height: auto !important;
}
body {
position: initial !important;
min-height: initial !important;
top: auto !important;
}
maybe it's like
body{ height: auto !important; }
do not write css in head part, write in a css file. this will preventing automatic translation by google.
I tried using the solutions provided by the other answers, but they didn't work for me. If anyone else is having this issue, I did have success with this solution.
body { position:static !important; min-height:100%; top:0; }
I found a way to solve this issue, it's not bulletproof I guess but works for now:
Plugin: http://darcyclarke.me/dev/watch/
with this code :)
$(window).load(function(){
$('body').watch('min-height', function(){
var style = parseInt($('body').css('min-height'));
if(style > 0){
$('body').css({
'min-height' : '0',
'position' : 'static',
'top' : 'none'
});
}
});
});
The only way I can see to combat this is to put a timeout of 500ms on code to reset the body min-height property. If you're not to bothered about your page jumping around a little for half a second on load, it works. Using jquery, it would look something like this:
$(function(){
var myMinHeight = 950;
setTimeout(function(){$('body').css('min-height',myMinHeight)},500);
});
Set the value of myMinHeight to whatever you wish it to be.