I'm designing a joomla horizontal scroll website by specifying the width of the body to be 4500px wide and absolute positioning the content I want (tried loads of different ways and this one works the best for me). The problem is bootstrap tooltips dont position themselves correctly if I specify data-position"bottom"
I've tried adding { container: 'body' } to the js tooltip initialisation but it does not fix the problem (as the width of the body is wider than the viewport).
It's annoying the heck out of me, can anyone help please.
I've create a bootply and the code is below for reference
http://www.bootply.com/x1xfg7Z19J
The JS is as follows:
$("[data-toggle=tooltip]").tooltip({container:'body'});
the CSS is as follows:
body {
width: 4500px;
position:relative;
height: 100vh;
overflow-x: visible;
}
.dyno {
position: absolute;
transition: none;
}
.zap-fb {
background-color:#456789;
background-size: 100% 100%;
}
.zap-fb:hover {
background-color:#453698;
}
.zap-li {
background-color:#763456;
background-size: 100% 100%;
}
.zap-li:hover {
background-color:#854a34;
}
.zap-pi {
background-color:#912643;
background-size: 100% 100%;
}
.zap-pi:hover {
background-color:#7269c3;
}
The HTML is as follows:
<p>Scroll to the right to see the tooltip issue. If you position the squares around the center of the screen and hover you will see the bottom positioned tooltip way off to the left. If you position the squares to the right of the screen and hover to see the tool tip it is almost in the right position. Note without body position: relative, the tooltip boxes are wierd dimensions</p>
<a style="width:50px; height:50px; left:3144px; top:20px;" class="zap-fb dyno" data-block="268,292,left,3144,top,20" href="#" target="_blank" title="Spread the Word, Like Us on Facebook" data-toggle="tooltip" data-placement="right"></a>
<a style="width:30px; height:30px; left:2900px; top:10px;" class="zap-li dyno" data-block="240,250,left,2900,top,10" href="#" target="_blank" title="Promote your business whilst promoting ours" data-toggle="tooltip" data-placement="bottom"></a>
<a style="width:70px; height:70px; left:2700px; top:10px;" class="zap-pi dyno" data-block="200,208,left,2700,top,10" href="#" target="_blank" title="Share our work with the world" data-toggle="tooltip" data-placement="left"></a>
EDIT: posted the problem on the bootstrap github issues page: official response "Closing as a won't fix since it's v3." So I guess it is an issue but one that I've got to live with. I did try the scenario with bootstrap 4alpha and the tooltips position themselves correctly.
EDIT 2: using bootplys bootstrap version select, I've found that prior to the introduction of bootstrap 3.2.0, tooltips aligned correctly. I'll try and download 3.1.1 and see if I can spot the error.
Related
I'm starting to learn a few basics with nuxt & vue.
I'm basically building a little list of elements that you can click and will expand with an image or some other content.
What I made so far
is an homepage with the list (like the first image)
and 3 other pages : /about, /projects, /contact
Here is the demo with images :
As soon as I click the first link, an image appears, and everything is moved down to the bottom. The URL is updated with the corresponding url (here, /about)
What I would like to achieve:
So far it's working fine and I can naviguate on my website.
But as the images suggests, I would like the differents elements of the menu to move with an animation to the bottom on the page transition to the different pages, it would take them (let's say) 2 seconds to go their next position in the next page.
It would look something like that : https://codepen.io/pbouigue/pen/KKVxbYa
when you click a dropdown menu like first videothe menu expends and everything is moved down.
The issue with that is that the url is not updated and considered to move to another page (in the case it should be exemple.com/first-video
<template>
<div class="container">
<transition-group name="list">
<nuxt-link to="about" key="about">First item - about</nuxt-link>
<img src="../assets/ours.png" alt="">
//these two remaining items should have an animation when they move to the bottom of the image
<nuxt-link to="projects" key="projects">Second item - projects</nuxt-link>
<nuxt-link to="contact" key="contact">Last item - contact</nuxt-link>
<transition-group>
</div>
</template>
<style >
img{
display: block;
width: 40%;
}
a{
display: block;
color: orangered;
font-family: 'Courier New', Courier, monospace;
}
</style>
and my /about :
<template>
<div class="container">
<transition-group name="list">
<nuxt-link to="about" key="about">First item - about</nuxt-link>
<nuxt-link to="projects" key="projects">Second item - projects</nuxt-link>
<nuxt-link to="contact" key="contact">Last item - contact</nuxt-link>
<transition-group>
</div>
</template>
<style >
img{
display: block;
width: 40%;
}
a{
display: block;
color: orangered;
font-family: 'Courier New', Courier, monospace;
}
</style>
Do you have any help on how to achieve that? Maybe there is an easier way to do it, but since I'm all new and learning by myself, I would have loved some clues or a little help.
I read about transition-group and this css, but somehow, I can't manage to make it work...
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
because actually this :https://vuejs.org/guide/built-ins/transition-group.html#move-transitions
does exactly what i would like to do : move elements down in an animation, but I would like this to happen on a page transition in order to have to url updated.
Maybe I should look for https://router.vuejs.org/guide/essentials/nested-routes.html ?
My PWA in a desktop browser is not really cool (because i don't have a lot of information to show).
And I would like to limit the width to 768px.
I tried many solutions, but i can't to change elements in position "fixed" like v-navigation, v-footer, v-dialog, ...
they are always 100% of the width of the browser.
I tried this in app.vue or in index.html:
html,body,#app {
max-width:768px !important;
overflow: hidden;
}
and last time I tried this in index.html:
#mytable {
width: 100%;
overflow: hidden;
}
#mytable td{
width:50%
}
<table id="mytable">
<tr>
<td>
<div id="app"></div>
</td>
<td>other half</td>
</tr>
</table>
But no solutions works.
Thanks for your help
Marco
Your problem seems you need different layout in function of screen size. You have several solutions from media queries to simple margin. Here I will explain how to do what you want with just margin.
I advise you to use a div to wrap your content and do not apply all your style in your #app container. Why ? Because you can imagine for instance that you want a top bar that take all the width and a content that take only 768px. If you make your layout in only one block this will be very complex. Separation in several block is a good strategy to have a modulabe UI. So we will use this template. You can make whatever you want in the .content div.
<div id="app">
<!-- Here we can imagine a top bar -->
<div class="content">
<!-- Display whatever you want -->
</div>
</div>
First you need to prepare your app container to display your application in all screen. I suggest this css :
html,body,#app {
overflow: hidden; // If content is large it will display scroll bar
height: 100vh; // Tell to your browser to take 100% of the available viewport height
}
Then you can define the css of the .content block :
.content {
max-width: 768px; // Max-width you want
height: 100%; // Take all the height available
margin: 0 auto; // Display div at the center
}
Here is an example: jsFiddle
If you are very interested in layout design, I strongly advise you to look into flex box and css grid.
I try to put a div 100% on top of the content of the page. The problem comes when the content has some margin. I illustrate here with a simplified case.
If I understand, position fixed: "The element is positioned relative to the browser window". So, why the div .trans is affected by what is behind? How to put the div transparent 100% of the page and on top of content?
Here is a good place to see the problem and try the solutions: http://jsfiddle.net/rdkAW/1/
CSS:
body { margin:0; }
.trans{
position:fixed;
width:100%; height:100%;
margin:0;
opacity:0.7; filter: alpha(opacity = 70);
background-color:red;
z-index:5;
}
#content {
position:relative;
margin:30px auto; /* is this the problem? */
width:95%; max-width:890px; height:1200px;
z-index:1;
background-color:blue;
}
HTML:
<div class="trans"></div>
<div id="content"></div>
The problem is solved if I use. top:0; left:0; It seems that position fixed needs that. I still do not understand very well why. If the fixed div is 100% and by definition fixed position is relative to the window, why is it need to specify top and left? I would appreciate if someone can explain it.
I'm updating an older html page with CSS, which I've just started getting into. The new version looks good, but there are huge empty spaces now at the bottom and right of the page when the user scrolls.
The nature of the page is several different content boxes, all of which have graphical backgrounds.
The old method I was using was to use a large table to organize the layout and give the table one large, solid background image. A colleague pointed out this was too old-school and suggested I try learning divs and css.
The newer version I produced broke each box up into separate divs and images and positioned them absolutely, but there was no way to keep the content centered if the browser window was resized.
I redid the whole page again, this time using relative positioning and one main container div that I could center. Everything looks good and stays centered, but now I'm getting big blank spaces on the bottom and right sides because of the positioning.
I've seen some people say they've fixed this by using a negative margin, but it doesn't seem to be having any effect on my page (unless I'm putting it in the wrong spot).
I need to know if there's a specific way to fix this that I don't know about or if I'm just going about the whole page completely the wrong way. How can I get my elements lined up correctly, centered, and with no extra scroll space? Should I just go back to using a table?
Here's a simplified version of the page with the content taken out (just the layout):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style type="text/css">
body
{
background-color: black;
margin-bottom: -2000px;
}
div.main
{
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-bottom: -2000px;
}
div.logo
{
position: relative;
left: 40px;
top: 60px;
z-index: 1;
}
div.window1
{
position: relative;
left: 320px;
top: -555px;
z-index: 1;
}
div.window2
{
position: relative;
left: 320px;
top: -580px;
z-index: 1;
}
div.window3
{
position: relative;
left: 680px;
top: -1250px;
z-index: 2;
}
div.window4
{
position: relative;
left: 25px;
top: -1570px;
z-index: 1;
}
</style>
<div class="main">
<div class="logo">
<img src="images/logo8.png">
</div>
<div class="window1">
<img src="images/window1_fullsize.png">
</div>
<div class="window2">
<img src="images/window2_fullsize.png">
</div>
<div class="window3">
<img src="images/window3_fullsize.png">
</div>
<div class="window4">
<img src="images/window4_fullsize.png">
</div>
</div>
</html>
You could use "em" or "%" values for top and left.
But the best be to handle this using JS.
Hope this helps.
I fixed this some time ago. I eventually did go back to using a table for the layout (which I understand is frowned upon) combined with a little bit of relative positioning, but I made sure everything was done with css and was w3 compliant:
http://www.burningfreak.com
The inherent problem, I think, is the way I designed my older pages, visually. They were highly graphical and usually made up of one contiguous background image, with a lot of art making up the section borders, etc. The general layouts tended to be unusual shapes, and I would then over-lay text and content on top on that. Unfortunately, it's very difficult to get looking right if the sections are separated.
I've since designed newer pages using only divs and css and it seems to work well, although it's a bit trickier to get working. The key, I think, is to come up with a look and style that I know is going to work using that technique from the start.
I've encountered an odd behavior in a Windows8 app that I'm building with WinJS, javascript, and HTML. In a particular Page that I'm implementing, there are several divs that have CSS rules like this:
.col {
border: 1px solid none;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
margin: 0px;
width: 100%;
}
The problem is when I invoke the main app bar by right clicking, the scrolled content in the div snaps to the top of the div. In other words, the scroll position of the div is lost. I've tried a host of ways to fix, but nothing has come up. How can I prevent the scrolled content from jumping around upon invoking the App Bar.
Thanks!
suggest to use -ms-grid for the page. The app bar will overlap the div in that case, which is ok and likely right behavior that you can see in other apps also.
html:
<div class="test5 fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">test page</span>
</h1>
</header>
<section class="content" aria-label="Main content" role="main">
<div class="test-content">
Text here.
</div>
</section>
</div>
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
</div>
css:
.test5.fragment section[role=main] {
display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-columns: 1fr;
}
#Sushil is correct. AppBar is an overlay control, so you should place it next to the fragment div, not inside it. #Sushil's code shows how to do it.
Placing an appbar inside the fragment has performance penalties as it will need to be rendered every time a user navigates to that page. Another undesirable side effect is that all input to the appbar will propagate to the fragment. This is the problem you are facing.
In theory, you can listen to the various input events for mouse, keyboard, touch and call preventDefault on them. But it is not recommended.