the application I write consists of many routes with transition animations between routes. It looks like:
<section class="a animated bounceUp">...</section>
<section class="b">...</section>
When I change route it will show animation and render new content - pretty simple behavior.
Today I created a new section and I need to put inside fixed filters pinned to the viewport. It should look like:
<section class="a">...</section>
<section class="b">...</section>
<section class="c animated bounceDown">
<div class="fixed-filters">...</div>
<div>...</div>
</section>
And here I met my problem. I added fixed position to div, but it doesn't work. The element hasn't fixed position.
Of course I made research about that and I found articles like:
'transform3d' not working with position: fixed children
and
https://www.achrafkassioui.com/blog/position-fixed-and-CSS-transforms/
Which says that I can't do that, because:
'transform' creates a new local coordinate system:
In the HTML namespace, any value other than none for the transform
results in the creation of both a stacking context and a containing
block. The object acts as a containing block for fixed positioned
descendants.
Is that over? Or maybe is there any solution how to do that?
I will be grateful for your help in solving this problem or finding a good workaround that anyone could use.
Related
I am working on a drag and drop query designer using HTML5 with AngularDart and CSS. For this issue all I really need to figure out is how to format the objects in HTML5 and CSS. I am running into formatting/positioning issues with the object in CSS. If you look below I have a div with the class "queryElement". The queryElementLine, queryElementHead, and queryElementBody sections of the object were already in this object and were formatting/positioning properly.
This UI allows a user to drag and drop one element onto another element. Once dropped I act upon the object to add the new element as a child, but I need to judge where in my collection of elements to add the new dropped item based on which edge of the drop zone element the new/moved element is dropped on.
I recently added divs with classed called "somethingDropZone" (left,top, right, bottom). These are objects I want to use to determine where the dragged element is dropped. I want them to mimic the top,left,right, and bottom border. I want them to show a 3px gradient border on :hover so the user can see where they will be dropping the item they are dragging. Below is the element html and images that give a better idea what I am facing and what i want to do.
This is what the element box should look like.
Here is what it looks like when I add a left border div.
Everything in the element is pushed down and the left dropzone object with its border stacks above it. What I want is to position the left dropzone inline with the other query element content.
Here is an image I created to show basically where I would like all 4 dropzones to be positioned:
What I am mostly looking for is some CSS guidance in how to make the dropzone divs float where the above image shows.
HTML Code:
<div class="queryElement"
(drop)="onDrop($event)"
(dragstart)="onDragStart($event)"
draggable="true">
<div class="queryElementLeftDropZone queryElementLeftDropZoneDragOver"></div>
<div class="queryElementTopDropZone"></div>
<div class="queryElementBottomDropZone"></div>
<div class="queryElementRightDropZone"></div>
<div class="queryElementLine"></div>
<div class="queryElementHead noselect">
<span class="idSpacer">#{{cohortQueryElement.id}}</span>
<button class="elementButton noselect" (click)="edit()"><img src="/packages/GenomicsPortal/assets/images/PNG icons/Edit.png" /></button>
<button class="elementButton noselect" (click)="delete()"><img src="/packages/GenomicsPortal/assets/images/PNG icons/Trash.png" /></button>
<button class="elementButton noselect" (click)="toggleIncludeExclude()"><img [src]="cohortQueryElement.includeExcludeImagePath"/></button>
</div>
<div class="queryElementBody"> {{cohortQueryElement.displayName}} </div>
<div class="queryElementFoot"> {{cohortQueryElement.displayData}} </div>
</div>
After giving this question some additional thought, I think I will avoid the issue altogether by not adding new objects/elements to hover at the edges. That solution seems to be causing the formatting issues.
It occured to me, rather putting objects to overlay the edges of the box, I could instead determine x,y ranges defining the top, left, bottom, and right of the existing box and then act based on dragover or drop within those x,y coords.
I will post to let you all know how that works out.
I'm trying to learn Polymer. Currently, I have a custom element that needs to animate content within some paper. In an attempt to do this, I currently have the following:
<paper-material elevation="4">
<h4>Hello</h4>
<neon-animated-pages selected="0" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<div>
Thank you for visiting. I think you'll enjoy what you're
gonna find. To dive in, click the "Next" button.
<br />
<paper-button>Next</paper-button>
</div>
<div>
some more information
</div>
</neon-animated-pages>
</paper-material>
The odd part is, the content within the neon-animated-pages element does not render within the paper properly. I've included a screenshot below showing how it renders.
What am I doing wrong?
If you look at the source of neon-animated-pages, you will see that it is a position: relative div, and its children (the pages) are all position: absolute (taken out of the document flow).
This means that unless you give a height to your neon-animated-pages element (either by directly setting the height CCS property or the fitor flex class), you will see some overflow like this.
This is fairly simple, so I'm sure I'm just missing something obvious.
Say I have this example code:
<main>
<header>Header</header>
<section>
Content
</section>
<section>
Content
</section>
<section>
Content
</section>
</main>
And initial CSS of:
main{text-align:center;}
section{display:inline-block;width:33%;}
So I have three columns taking up more or less a third of the page each. Now, because of the way the code is written, there will be white space on the page. My preferred method of dealing with this is to set *{font-size:small}, and then add body>main{font-size:0;}.
Of course, thats fine on a simple page, where the font is the same. However, with different sized fonts and header tags here and there, this doesn't work well.
I think I just misunderstood what it is that the > selector does, but what I'm trying to look for is a selector that styles an element, without applying said style to children elements. In this case, I want to style my main element, but I don't want the style affecting the header or section elements.
What is the right way to do this?
And before anyone suggests it, no, I do not wish to use the other methods for removing white space (HTML comments, moving the final part of the closing tag onto the next line, etc.), as they look ugly and I prefer my code to look as presentable as my page.
First off: I'm not exactly sure if this works and not able to thoroughly test right now. This should have been a comment but I'm lacking the reputation to do so. sorry.
The problem is that the font size is one of the properties that is inheritet from it's parent and values like "small" don't set absolute sizes, but relative to the inherited size. so I would try to reset the size right after your main layer, using an absolute value instead of a relative one
body>main>*{font-size:18px;}
The important part is obviously not using a relative size, however, I have no idea how this holds up to user-specified default font-sizes. also, you would have to ensure that any text that has a non-medium font-size (so in your case any and all text) is at the very least a grandchild of main since the font-size for all direct children will be overwritten.
hope this will help you; bw
Suppose I have the following html:
<div style="width:200px;height:200px;overflow:scroll">
...
</div>
If the stuff in this div ends up overflowing, the most popular way to change the scrolling position of this item is to use jQuery.scrollTop(). However, I have a situation where I would like to set the initial scroll position of the div using the source HTML. Is there a way of doing this? All examples I see online for doing this end up using javascript.
One way I tried is to write a scrollTop property on the element, like so:
<div scrollTop=20 style="width:200px;height:200px;overflow:scroll">
...
</div>
However, this does not work. Surely, there must be a way to set the initial scrolling position of an overflowing item via HTML/CSS...
Here is a full version of this code that illustrates that it doesn't work- The vertical scrollbar remains at "0": http://jsfiddle.net/gueBZ/1/
Can anyone help me to make it work? Thanks so much for any pointers!
<div style="width:200px;height:200px;overflow:scroll">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="hello">autoscroll here</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
then open the page as
page.html#hello
this is the only thing you can do, with HTML only
I've got some HTML:
<div id="thing">
<div id="contentheader">
<h3>Header</h3>
</div>
<div id="contentcontainer">
<div id="image">
<img alt="balt" src="imagesrc">
</div>
<div id="body">
<p>hegl gegl</p>
</div>
</div>
</div>
I need to push the h3 in 'contentheader' down alongside the image in 'contentcontainer' while having the body text sit alongside it. Everything is of variable width save the image.
Perhaps an image will demonstrate better:
As you can see, grey corresponds with 'thing', green with 'contentcontainer' and blue with 'contentheader'.
Editing the HTML would be a major hassle. I also can't make anything other than the image fixed-width. Is it possible to do it with just CSS? (It'd be awesome to be able to do it with floats and stuff but I don't know if it's doable)
I don't think you're going to find a perfect solution with CSS. You could use positioning but you would probably run into issues if you had a long title that ran more than one line.
If you're open to using javascript the following non-framework snippet would work.
// Add the header inside the container div just before the body
containerDiv = document.getElementById('contentcontainer');
headerDiv = document.getElementById('contentheader');
bodyDiv = document.getElementById('body');
containerDiv.insertBefore(headerDiv, bodyDiv);
You could recreate this code as a neater, one-liner using jQuery or another javascript framework.
Sure, heres the Css for a rudimentary setup:
http://jsfiddle.net/Nkapr/
Ask if you have any questions.
The problem here is the HTML structure, it's not been written really with your goal in mind (which is a bummer!)
If all you're after is pushing the H3 container 'contentheader' down in line with the rest of the stuff inside 'contentcontainer' you could set a negative top margin on 'contentcontainer' to pull it upwards, and then add a positive top margin to the elements in 'contentcontainer' which need to go down (in this case 'image') giving the impression that the h3 section actually sits in with the rest of the content. It's a bit of a hack but it might do the trick if you can't alter the HTML.
Thirtydot's answewr in the comments section solved my issue.