It seems as though angular-ui tooltips are easily mangled when used in conjunction with bootstrap's grid. Here is a plunker illustrating the behavior:
http://plnkr.co/edit/gVekao4JCdC5O91RCoiW?p=preview
<!doctype html>
<html ng-app="tooltip_app">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script>
angular.module('tooltip_app', ['ui.bootstrap']);
</script>
</head>
<body>
<br/><br/><br/><br/><br/>
<div class='container'>
<!--Row 1 - bad tooltip -->
<div class="row">
<div class="col-md-2">2 <span tooltip="This is a real long tooltip designed to show you how tooltips have funny behaivior depending on bootstrap column width">bad</span>
</div>
<div class="col-md-2">2</div>
<div class="col-md-8">8</div>
</div>
<hr>
<!--Row 2 - good tooltip -->
<div class="row">
<div class="col-md-8">8 <span tooltip="This is a real long tooltip designed to show you how tooltips have funny behaivior depending on bootstrap column width">good</span>
</div>
<div class="col-md-2">2</div>
<div class="col-md-2">2</div>
</div>
<hr>
<!--Row 3 - egregious tooltip -->
<div class="row">
<div class="col-md-9">9
<div class="row">
<div class="col-md-2">2 (nested)
<span tooltip="This is a real long tooltip designed to show you how tooltips have funny behaivior depending on bootstrap column width">worst</span>
</div>
<div class="col-md-10">10 (nested)</div>
</div>
</div>
<div class="col-md-3">3</div>
</div>
</div> <!--End Container-->
</body>
</html>
Notice how, when the viewport is small, everything works ok, but as you make the viewport more and more wide the tooltips start becoming compressed and misaligned. Is this behavior expected? If so, how can I ensure my tooltips stay aligned with the things they are supposed to be pointing to?
I had this exact same thing happen to me. I would encourage you to double check the bootstrapped portions of your controllers and your CSS for code that is attempting to to align the same elements. By default, these data displaying grids will align things pretty well. Usually bootstrap allows you to place some layout configuration within your controller, AND because we are creatures of habit we will do the same in our CSS. Try to define as much of the layout of the grid as you can within the controller. I checked the documentation and followed the alignment rules to the t, assigning how I wanted everything to look to a variable, $scope.MyDefs and concentrated on definitions within the ui-grid portion of my controller, I could shrink and grow my screen and everything would stay in place. It was a really easy fix that drove me nuts for days on end.
Related
I have a very wide element, #widelement inside a bootstrap row col. I would like to enclose it on a div, .mywrapper, with a horizontal scroll bar in order to keep page layout.
Someone can explain to me what style I should add to .mywrapper to avoid that #widelement overflows the bootstrap col?
In this sample, the wide element has a 5000px width, but, this is not a fixed number, can be bigger or smaller, also smaller than col size.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- first col -->
<div class="col-4" style="background-color:yellow">
<p class="text-end">
This text is ok, should be visible by default.
</p>
</div>
<!-- second col -->
<div class="col-4">
<div class="mywrapper" style="background-color:red;">
<div id="widelement" style="width:5000px;">
<p class="text-end">
This text is inside a 5000px div.
I would like the div .mywrapper has a horizontal scrollbar.
I mean, just a scrollbar for the div, not for the whole page.
The div should be inside de col-6.
On scrolling right, this text should become visible.
</p>
</div>
</div>
</div>
<!-- third and last col -->
<div class="col-4" style="background-color:yellow">
<p class="">
My left div should have a scroll bar.
</p>
</div>
</div>
</div>
What I tried unsuccessfully:
.mywrapper {
overflow-x: scroll;
}
Testing your solution I ended up with this snippet:
.mywrapper {
overflow-x: scroll;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- first col -->
<div class="col-4" style="background-color:yellow">
<p class="text-end">
This text is ok, should be visible by default.
</p>
</div>
<!-- second col -->
<div class="col-4">
<div class="mywrapper" style="background-color:red;">
<div id="widelement" style="width:5000px;">
<p class="text-end">
This text is inside a 5000px div.
I would like the div .mywrapper has a horizontal scrollbar.
I mean, just a scrollbar for the div, not for the whole page.
The div should be inside de col-6.
On scrolling right, this text should become visible.
</p>
</div>
</div>
</div>
<!-- third and last col -->
<div class="col-4" style="background-color:yellow">
<p class="">
My left div should have a scroll bar.
</p>
</div>
</div>
</div>
It turns out that the very code you have suggested works. So, something prevents it from working at your end, which could be one or more of the following:
client-side cache (your browser temporarily stores your css and js files in order not to have to download them each time you load a page and it's possible that when you have tested, the cached old version of your CSS was loaded by a locally cached file by your browser instead of downloading it from the server), Ctrl+F5 (or even clear browser cache or even testing in a freshly opened incognito window) sorts this out
server-side cache (CloudFlare or some other server-side software generates static files periodically and sends those out to the browser upon page load rather than generating the response upon each request), in which case, you need to clear the server-side cache while you are testing
you forgot to save the code when you have edited it
you forgot to deploy it on the server
the wrong file was edited
the right file was edited, but it was wrongly not included into the HTML
some higher prio CSS rule prevented the overflow-x rule from being applied (see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
So, your idea was correct, but something prevented it from providing the benefits you have expected. The issue therefore is something technical at your project and you will need to troubleshoot the potential issues listed above. If it still does not work at your end, then you will need to edit your question with more information and let the answerer(s), including myself know about the additional information.
I need to update one of my pages that contains portraits and bios -to one that has a hover effect with a drop down field that shows the bio. I found code here that does exactly what I need (How to show text on image when hovering?) and I tested it out on another site to make sure it's working correctly. Problem is, when I put it on my page template, all the header and footer coding (color, font, styles, etc.) are overwritten by the code that I've pasted in. I'm not a coder and only know a little bit of the terminology and how it all works (so please be specific with your responses). I am thinking I need the new code to be in some kind of container that keeps the default page/site styles intact but I'm not sure what to put to do that. I'm also not sure if my new hover code is in the right place. The original code on my template is this:
<!DOCTYPE html>
<html lang="en">
<!-- Head Tag -->
[[$head-tag]]
<style>
.top {
margin-bottom: -75px;
}
</style>
<body>
[[$gtm]]
<!-- Navigation -->
[[$navigation]]
<!-- PAGE CONTENT -->
<section class="top">
<div class="container">
[[$top-page-info]]
<div class="row body-copy">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
[[*content]]
</div>
</div>
</div><!--end row-->
</div><!--end container-->
</section>
<section class="leaders">
<div class="container">
<div class="row">
[[!getPage?
&elementClass=`modSnippet`
&element=`getResources`
&parents=`14`
&depth=`0`
&pageVarKey=`page`
&includeTVs=`1`
&processTVs=`1`
&includeContent=`1`
&showHidden=`1`
&sortby=`{"publishedon":"DESC"}`
&tpl=`LeaderTpl`]]
</div><!--end row-->
</div><!--end container-->
</section>
<!-- PAGE CONTENT END-->
<!-- Footer -->
[[$footer]]
<!-- JS Includes -->
[[$js-includes]]
</body>
</html>
Should I insert the new code in place of the "!getPage?" section (though I'm wondering if deleting some of that is removing code that I need for the default page settings/styles) or should it go below it, just above the line at the end that closes the div and ends the container?
Any help or direction would be greatly appreciated. (And please be specific as I don't really understand all this language.) TIA
I have two main divs on page and I want to hide on of them in case user comes from tablet / phone.
Based on documentation I tried something like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="contrainer row">
<div class="col-lg-6 col-md-12">
SHOW ME ALWAYS!
</div>
<div class="col-lg-6 hidden-md-down">
HIDE ME ON SMALL
</div>
</div>
Unfortunately it doesn't work. Second div will display all the time. Any idea what I'm doing wrong?
4.0.0-beta no longer has hidden-*, see Migrating to v4:
Our responsive utility classes have largely been removed in favor of explicit display utilities.
The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".
I am new to Bootstrap and was trying my hands on 12 column layout. Looking at the tutorials it should just happen out of box, but for some reason the Divs are stacking one below another rather than arranging themselves in row layout with spans. Its baffling can someone help?
<body>
<div class="row">
<div class="span6">Text 123456</div>
<div class="span6">Text 123456</div>
</div>
</body>
Here is is the fiddle - I am using Chrome and Firefox.
http://jsfiddle.net/vshtmczf/
Well, you have to got parent element with class container and instead of span6 use col-xs-6, because you are using Bootstrap 3.2. documentation
look here:
<body class="container">
<div class="row">
<div class="col-xs-6">Text 123456</div>
<div class="col-xs-6">Text 123456</div>
</div>
</body>
jsFiddle
I am using the isotope plugin on my site which is in local development. I'm running into a css problem which i'm hoping someone will be able to help me with. Here's the situation.
<div class="wrapper"> //* Position is relative
<div class="portfolio1"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio2"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio3"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio4"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
</div>
This pretty much lays the portfolio items out in a grid. My problem is that I have a comment system inside which adds the comments inline. When this happens the ".portfolio" class slides underneath the remaining items on the page. Is there a way either through css or jquery that can remedy this problem? I understand that you can position the elements with relative and float them to keep them from running underneath, but as soon as you do that then the isotope plugin breaks down. Here's a screen shot of the problem as well.
Screen Shot
Cheers,
Mike
I'm guessing the comments are inserted with Ajax? Maybe there's some CSS attached to them that could be overridden to position them differently and keep them within their divs.
Just as likely, though, you shouldn't use Isotope for this. If you're using isotope just to create grid there are simpler ways to do that (you might only need to use float). Isotope does some very fancy footwork, does it differently in different browsers and really likes to work on elements with a nice, specific size. If the comments are getting added with javascript, changing the divs at the same as as Isotope is trying to calculate how it's going to move things around for the layout, you're going to run into trouble.