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
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.
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.
I am using Zurb Foundation 5 to build a site. My site has a navigation panel against the left side of the screen. When open, I want the nav area to take up 3 columns. The actual content will take up the remaining space. Here is the HTML I have thus far:
<body>
<div style="width:100%; max-width:100%; height:100%;">
<div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
<!-- Nav Items Go Here -->
</div>
<div class="large-9 columns">
<!-- Main Content Goes Here -->
</div>
</div>
</body>
Each nav item has an icon and some text. I need to be able to collapse the navDiv in a way that it shrinks down so that only the icons are showing. The text goes away. At the same time, I need the main content area to grow to take up the space that was used by the nav area. I cannot figure out how to do this in the realm of zurb. From what I can tell, the grid is not dynamic. Is it possible to do what I'm trying with a grid? If so, how?
THank you!
If you want to use Foundation (with jQuery dependency) and no other add-ons, you can use a jQuery event handler to toggle the classes used by Foundation. It feels like a hack, but it works.
HTML
<body>
<button>Toggle sidebar</button>
<div class="row">
<div id="navDiv" class="small-2 medium-1 columns">
<img src="http://dummyimage.com/48"><span>Item 1</span>
</div>
<div id="content" class="small-10 medium-11 columns">
<!-- Content goes here -->
</div>
</div>
</body>
CSS
.small-2 span {
/* Hide text when sidebar is small */
display: none;
}
JavaScript + jQuery
$(function() {
$('button').click(function() {
// Resize sidebar
var navDiv = $('#navDiv');
navDiv.toggleClass('small-3');
navDiv.toggleClass('small-2');
navDiv.toggleClass('medium-2');
navDiv.toggleClass('medium-1');
// Resize content
var content = $('#content');
content.toggleClass('small-9');
content.toggleClass('small-10');
content.toggleClass('medium-10');
content.toggleClass('medium-11');
});
});
Demo on Plunker
I really would like to use twitter-bootstrap, and their scaffolding system with the 12 columns - is there a way to get this working properly with for example ember.js and handlebars.js? I recently ran into trouble, because inserted tags disterb bootstrap.css descriptions like :first-child, my specific situation described below.
So question: Is there a way properly avoid disterbing bootstrap.css when working with for example ember and handlebars, including tags?
My specific trouble: the <div class="span9"> misses out on the CSS below, because the tag picks it up instead, i think...
<!-- Using a handlebars code block helper, {{#if}}, -->
<div class="row-fluid show-grid">
{{#if controller.currentItem.isDuo}}
<div class="span9">{{controller.currentItem.text}}</div>
<div class="span3">{{controller.currentItem.imgText}}</div>
{{/if}}
</div>
<!-- Rendered HTML from code above (stripped script tag's attributes for readability) -->
<div class="row-fluid show-grid">
<script></script>
<div class="span9"><script></script>00<script></script></div>
<div class="span3"><script></script>Mask<script></script></div>
<script></script>
</div>
CSS-code in bootstrap.css, relevant to my situation
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
If fixed this by adding and extra div right after the diff like this:
<!-- Using a handlebars code block helper, {{#if}}, -->
<div class="row-fluid show-grid">
{{#if controller.currentItem.isDuo}}
<div>
<div class="span9">{{controller.currentItem.text}}</div>
<div class="span3">{{controller.currentItem.imgText}}</div>
</div>
{{/if}}
</div>
Not the most elegant solution, but it works.
I'm stying bootstrap sticky footer on my project: http://twitter.github.com/bootstrap/examples/sticky-footer.html
Is it possible to set height of content to fill remained space?
Let me explain. I want to reside image and I need to it gets sized relates to available height.
If your intention is fill any space between the end of the content and the start of the footer, I can see all sorts of challenges.
Depending on the specifics of your image, maybe you can include it as a background like this:
http://jsfiddle.net/panchroma/hBzjn/
You could use media queries, possibly with different images at different viewponts and also use padding to refine the results.
Good luck!
HTML
<div id="wrap">
<div class="contentWrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p>page content</p>
</div>
<div id="push"></div>
</div><!-- end contentWrap -->
</div> <!-- end wrap -->
<div id="footer">
<div class="container">
<h3>sticky footer </h3>
</div>
</div>
CSS
#wrap{
background: url(http://is.gd/0QPvoC) left bottom; /* define image and position */
}
.contentWrap{
background-color:#fff; /* quick fix so background image is hidden behind main content */
}