Mixing
Div showing on page, shouldn't show unless button pressed
up vote
0
down vote
favorite
I have an svg graph with a 100% width and height. I have a filter section that drops down from the top of the screen from being hidden from pressing a button. Recently I have added some sections to the filter section so it has got bigger, unfortunately this means it now partially shows on the main graph, it seems there is deliberate overlap, an effect is created when the filters drop down where it does overlap and this is a wanted effect but not until the button is pressed.
I'm trying to keep the filter section (engagementFilterContainer) out of the screen until the filter section is chosen.
The layout is effectively:
<div engagement graph>
<engagement-filter>
<engagementgraph-container>
</div>
What you can see is that there is the engagement-graphSVG which takes up the page, but the engagement-filtercontainer comes down into the graph.
This is the HTML layout:
<div class="Engagement-Graph" id="graph">
<div class="Engagement-FilterContainer" [ngClass]="{ 'Engagement-FilterContainer--Visible': this.showFilter }">
</div>
<div class="Engagement-GraphContainer" [ngClass]="{'Engagement-GraphContainer--WithFilter': this.showFilter}">
<svg
class="Engagement-GraphSVG"
xmlns="http://www.w3.org/2000/svg"
version="1.1 ">
</svg>
<a
class="Engagement-FeedbackButton"
href="mailto:toplinksupport@weforum.org">
{{ 'Send Feedback' | translate }}
</a>
</div>
</div>
As you can see my filter is outside of the graph container which ha the engagement-graphSVG enclosed within it.
The engagement-filtercontainer is not enclosed within the engagement-graphcontainer, when I try and set the position on the SVG It doesnt do anything for me.
CSS:
.Engagement-Graph {
position: absolute;
width: 100%;
height: 100%;
font-size: 100%;
vertical-align: baseline;
overflow: hidden;
@include tablet() {
width: 65%;
}
}
.Engagement-FilterContainer {
overflow: overlay;
display: table;
position: absolute;
width: 100%;
z-index: 10;
transition: transform $filter-slide-duration;
transform: translateY(-486px);
&--Visible {
transform: translateY(0) !important;
}
@include landscape {
transform: translateY(-436px);
}
}
.Engagement-GraphContainer {
position: relative;
width: 100%;
height: calc(100% - 56px);
top: 0;
background-color: $gray-bg-color;
transition: height $filter-slide-duration, top $filter-slide-duration;
@include tablet() {
background-color: white;
height: 100%;
}
svg {
width: 100%;
height: 100%;
}
&--WithFilter {
height: calc(100% - 480px) !important;
top: 480px !important;
@include landscape {
height: calc(100% - 436px) !important;
top: 436px !important;
}
}
}
I want the filter section to not come into the screen no matter how large it gets, until the button for the filter is pressed.
Thanks if you can help me.
javascript html css
asked Nov 19 at 11:42
Sparlarva
1039
add a comment |
up vote
0
down vote
favorite
I have an svg graph with a 100% width and height. I have a filter section that drops down from the top of the screen from being hidden from pressing a button. Recently I have added some sections to the filter section so it has got bigger, unfortunately this means it now partially shows on the main graph, it seems there is deliberate overlap, an effect is created when the filters drop down where it does overlap and this is a wanted effect but not until the button is pressed.
I'm trying to keep the filter section (engagementFilterContainer) out of the screen until the filter section is chosen.
The layout is effectively:
<div engagement graph>
<engagement-filter>
<engagementgraph-container>
</div>
What you can see is that there is the engagement-graphSVG which takes up the page, but the engagement-filtercontainer comes down into the graph.
This is the HTML layout:
<div class="Engagement-Graph" id="graph">
<div class="Engagement-FilterContainer" [ngClass]="{ 'Engagement-FilterContainer--Visible': this.showFilter }">
</div>
<div class="Engagement-GraphContainer" [ngClass]="{'Engagement-GraphContainer--WithFilter': this.showFilter}">
<svg
class="Engagement-GraphSVG"
xmlns="http://www.w3.org/2000/svg"
version="1.1 ">
</svg>
<a
class="Engagement-FeedbackButton"
href="mailto:toplinksupport@weforum.org">
{{ 'Send Feedback' | translate }}
</a>
</div>
</div>
As you can see my filter is outside of the graph container which ha the engagement-graphSVG enclosed within it.
The engagement-filtercontainer is not enclosed within the engagement-graphcontainer, when I try and set the position on the SVG It doesnt do anything for me.
CSS:
.Engagement-Graph {
position: absolute;
width: 100%;
height: 100%;
font-size: 100%;
vertical-align: baseline;
overflow: hidden;
@include tablet() {
width: 65%;
}
}
.Engagement-FilterContainer {
overflow: overlay;
display: table;
position: absolute;
width: 100%;
z-index: 10;
transition: transform $filter-slide-duration;
transform: translateY(-486px);
&--Visible {
transform: translateY(0) !important;
}
@include landscape {
transform: translateY(-436px);
}
}
.Engagement-GraphContainer {
position: relative;
width: 100%;
height: calc(100% - 56px);
top: 0;
background-color: $gray-bg-color;
transition: height $filter-slide-duration, top $filter-slide-duration;
@include tablet() {
background-color: white;
height: 100%;
}
svg {
width: 100%;
height: 100%;
}
&--WithFilter {
height: calc(100% - 480px) !important;
top: 480px !important;
@include landscape {
height: calc(100% - 436px) !important;
top: 436px !important;
}
}
}
I want the filter section to not come into the screen no matter how large it gets, until the button for the filter is pressed.
Thanks if you can help me.
javascript html css
asked Nov 19 at 11:42
Sparlarva
1039
Your html code is clipped (at the beginning). Also, please put in a code block (ctrl+k)
– Chayim Friedman
Nov 19 at 11:53
I clipped it because it diappeared when It wasn't, I think because of the image
– Sparlarva
Nov 19 at 11:58
You are right though, I amended it, have you any thoughts on this problem?
– Sparlarva
Nov 19 at 11:59
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have an svg graph with a 100% width and height. I have a filter section that drops down from the top of the screen from being hidden from pressing a button. Recently I have added some sections to the filter section so it has got bigger, unfortunately this means it now partially shows on the main graph, it seems there is deliberate overlap, an effect is created when the filters drop down where it does overlap and this is a wanted effect but not until the button is pressed.
I'm trying to keep the filter section (engagementFilterContainer) out of the screen until the filter section is chosen.
The layout is effectively:
<div engagement graph>
<engagement-filter>
<engagementgraph-container>
</div>
What you can see is that there is the engagement-graphSVG which takes up the page, but the engagement-filtercontainer comes down into the graph.
This is the HTML layout:
<div class="Engagement-Graph" id="graph">
<div class="Engagement-FilterContainer" [ngClass]="{ 'Engagement-FilterContainer--Visible': this.showFilter }">
</div>
<div class="Engagement-GraphContainer" [ngClass]="{'Engagement-GraphContainer--WithFilter': this.showFilter}">
<svg
class="Engagement-GraphSVG"
xmlns="http://www.w3.org/2000/svg"
version="1.1 ">
</svg>
<a
class="Engagement-FeedbackButton"
href="mailto:toplinksupport@weforum.org">
{{ 'Send Feedback' | translate }}
</a>
</div>
</div>
As you can see my filter is outside of the graph container which ha the engagement-graphSVG enclosed within it.
The engagement-filtercontainer is not enclosed within the engagement-graphcontainer, when I try and set the position on the SVG It doesnt do anything for me.
CSS:
.Engagement-Graph {
position: absolute;
width: 100%;
height: 100%;
font-size: 100%;
vertical-align: baseline;
overflow: hidden;
@include tablet() {
width: 65%;
}
}
.Engagement-FilterContainer {
overflow: overlay;
display: table;
position: absolute;
width: 100%;
z-index: 10;
transition: transform $filter-slide-duration;
transform: translateY(-486px);
&--Visible {
transform: translateY(0) !important;
}
@include landscape {
transform: translateY(-436px);
}
}
.Engagement-GraphContainer {
position: relative;
width: 100%;
height: calc(100% - 56px);
top: 0;
background-color: $gray-bg-color;
transition: height $filter-slide-duration, top $filter-slide-duration;
@include tablet() {
background-color: white;
height: 100%;
}
svg {
width: 100%;
height: 100%;
}
&--WithFilter {
height: calc(100% - 480px) !important;
top: 480px !important;
@include landscape {
height: calc(100% - 436px) !important;
top: 436px !important;
}
}
}
I want the filter section to not come into the screen no matter how large it gets, until the button for the filter is pressed.
Thanks if you can help me.
javascript html css
asked Nov 19 at 11:42
Sparlarva
1039
I have an svg graph with a 100% width and height. I have a filter section that drops down from the top of the screen from being hidden from pressing a button. Recently I have added some sections to the filter section so it has got bigger, unfortunately this means it now partially shows on the main graph, it seems there is deliberate overlap, an effect is created when the filters drop down where it does overlap and this is a wanted effect but not until the button is pressed.
I'm trying to keep the filter section (engagementFilterContainer) out of the screen until the filter section is chosen.
The layout is effectively:
<div engagement graph>
<engagement-filter>
<engagementgraph-container>
</div>
What you can see is that there is the engagement-graphSVG which takes up the page, but the engagement-filtercontainer comes down into the graph.
This is the HTML layout:
<div class="Engagement-Graph" id="graph">
<div class="Engagement-FilterContainer" [ngClass]="{ 'Engagement-FilterContainer--Visible': this.showFilter }">
</div>
<div class="Engagement-GraphContainer" [ngClass]="{'Engagement-GraphContainer--WithFilter': this.showFilter}">
<svg
class="Engagement-GraphSVG"
xmlns="http://www.w3.org/2000/svg"
version="1.1 ">
</svg>
<a
class="Engagement-FeedbackButton"
href="mailto:toplinksupport@weforum.org">
{{ 'Send Feedback' | translate }}
</a>
</div>
</div>
As you can see my filter is outside of the graph container which ha the engagement-graphSVG enclosed within it.
The engagement-filtercontainer is not enclosed within the engagement-graphcontainer, when I try and set the position on the SVG It doesnt do anything for me.
CSS:
.Engagement-Graph {
position: absolute;
width: 100%;
height: 100%;
font-size: 100%;
vertical-align: baseline;
overflow: hidden;
@include tablet() {
width: 65%;
}
}
.Engagement-FilterContainer {
overflow: overlay;
display: table;
position: absolute;
width: 100%;
z-index: 10;
transition: transform $filter-slide-duration;
transform: translateY(-486px);
&--Visible {
transform: translateY(0) !important;
}
@include landscape {
transform: translateY(-436px);
}
}
.Engagement-GraphContainer {
position: relative;
width: 100%;
height: calc(100% - 56px);
top: 0;
background-color: $gray-bg-color;
transition: height $filter-slide-duration, top $filter-slide-duration;
@include tablet() {
background-color: white;
height: 100%;
}
svg {
width: 100%;
height: 100%;
}
&--WithFilter {
height: calc(100% - 480px) !important;
top: 480px !important;
@include landscape {
height: calc(100% - 436px) !important;
top: 436px !important;
}
}
}
I want the filter section to not come into the screen no matter how large it gets, until the button for the filter is pressed.
Thanks if you can help me.
javascript html css
javascript html css
asked Nov 19 at 11:42
Sparlarva
1039
asked Nov 19 at 11:42
Sparlarva
1039
edited Nov 19 at 11:59
asked Nov 19 at 11:42
Sparlarva
1039
asked Nov 19 at 11:42
Sparlarva
1039
asked Nov 19 at 11:42
Sparlarva
1039
1039
Your html code is clipped (at the beginning). Also, please put in a code block (ctrl+k)
– Chayim Friedman
Nov 19 at 11:53
I clipped it because it diappeared when It wasn't, I think because of the image
– Sparlarva
Nov 19 at 11:58
You are right though, I amended it, have you any thoughts on this problem?
– Sparlarva
Nov 19 at 11:59
add a comment |
Your html code is clipped (at the beginning). Also, please put in a code block (ctrl+k)
– Chayim Friedman
Nov 19 at 11:53
I clipped it because it diappeared when It wasn't, I think because of the image
– Sparlarva
Nov 19 at 11:58
You are right though, I amended it, have you any thoughts on this problem?
– Sparlarva
Nov 19 at 11:59
Your html code is clipped (at the beginning). Also, please put in a code block (ctrl+k)
– Chayim Friedman
Nov 19 at 11:53
Your html code is clipped (at the beginning). Also, please put in a code block (ctrl+k)
– Chayim Friedman
Nov 19 at 11:53
I clipped it because it diappeared when It wasn't, I think because of the image
– Sparlarva
Nov 19 at 11:58
I clipped it because it diappeared when It wasn't, I think because of the image
– Sparlarva
Nov 19 at 11:58
You are right though, I amended it, have you any thoughts on this problem?
– Sparlarva
Nov 19 at 11:59
You are right though, I amended it, have you any thoughts on this problem?
– Sparlarva
Nov 19 at 11:59
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
You can use CSS. Set display:none on your filter box, unless it has the "opened" class:
.Engagement-FilterContainer {
display: none
}
.Engagement-FilterContainer.opened {
display: block
}
Now when the filter section is chosen, you can add the class "opened" to the element.
answered Nov 19 at 12:01
gbalduzzi
1,330622
Thanks for your answer, my buttons to show the filter are actually within the filtercontainer and obviously they are also positioned relative to the filter container so that issue still remains, could i just show the buttons anyway and not the filter, and position the buttons statically?
– Sparlarva
Nov 19 at 12:13
Trying to show the buttons with display: block; while their container is display: none isnt working
– Sparlarva
Nov 19 at 12:18
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
You can use CSS. Set display:none on your filter box, unless it has the "opened" class:
.Engagement-FilterContainer {
display: none
}
.Engagement-FilterContainer.opened {
display: block
}
Now when the filter section is chosen, you can add the class "opened" to the element.
answered Nov 19 at 12:01
gbalduzzi
1,330622
Thanks for your answer, my buttons to show the filter are actually within the filtercontainer and obviously they are also positioned relative to the filter container so that issue still remains, could i just show the buttons anyway and not the filter, and position the buttons statically?
– Sparlarva
Nov 19 at 12:13
Trying to show the buttons with display: block; while their container is display: none isnt working
– Sparlarva
Nov 19 at 12:18
add a comment |
up vote
0
down vote
You can use CSS. Set display:none on your filter box, unless it has the "opened" class:
.Engagement-FilterContainer {
display: none
}
.Engagement-FilterContainer.opened {
display: block
}
Now when the filter section is chosen, you can add the class "opened" to the element.
answered Nov 19 at 12:01
gbalduzzi
1,330622
Thanks for your answer, my buttons to show the filter are actually within the filtercontainer and obviously they are also positioned relative to the filter container so that issue still remains, could i just show the buttons anyway and not the filter, and position the buttons statically?
– Sparlarva
Nov 19 at 12:13
Trying to show the buttons with display: block; while their container is display: none isnt working
– Sparlarva
Nov 19 at 12:18
add a comment |
up vote
0
down vote
up vote
0
down vote
You can use CSS. Set display:none on your filter box, unless it has the "opened" class:
.Engagement-FilterContainer {
display: none
}
.Engagement-FilterContainer.opened {
display: block
}
Now when the filter section is chosen, you can add the class "opened" to the element.
answered Nov 19 at 12:01
gbalduzzi
1,330622
You can use CSS. Set display:none on your filter box, unless it has the "opened" class:
.Engagement-FilterContainer {
display: none
}
.Engagement-FilterContainer.opened {
display: block
}
Now when the filter section is chosen, you can add the class "opened" to the element.
answered Nov 19 at 12:01
gbalduzzi
1,330622
answered Nov 19 at 12:01
gbalduzzi
1,330622
answered Nov 19 at 12:01
gbalduzzi
1,330622
answered Nov 19 at 12:01
gbalduzzi
1,330622
1,330622
Thanks for your answer, my buttons to show the filter are actually within the filtercontainer and obviously they are also positioned relative to the filter container so that issue still remains, could i just show the buttons anyway and not the filter, and position the buttons statically?
– Sparlarva
Nov 19 at 12:13
Trying to show the buttons with display: block; while their container is display: none isnt working
– Sparlarva
Nov 19 at 12:18
add a comment |
Thanks for your answer, my buttons to show the filter are actually within the filtercontainer and obviously they are also positioned relative to the filter container so that issue still remains, could i just show the buttons anyway and not the filter, and position the buttons statically?
– Sparlarva
Nov 19 at 12:13
Trying to show the buttons with display: block; while their container is display: none isnt working
– Sparlarva
Nov 19 at 12:18
Thanks for your answer, my buttons to show the filter are actually within the filtercontainer and obviously they are also positioned relative to the filter container so that issue still remains, could i just show the buttons anyway and not the filter, and position the buttons statically?
– Sparlarva
Nov 19 at 12:13
Thanks for your answer, my buttons to show the filter are actually within the filtercontainer and obviously they are also positioned relative to the filter container so that issue still remains, could i just show the buttons anyway and not the filter, and position the buttons statically?
– Sparlarva
Nov 19 at 12:13
Trying to show the buttons with display: block; while their container is display: none isnt working
– Sparlarva
Nov 19 at 12:18
Trying to show the buttons with display: block; while their container is display: none isnt working
– Sparlarva
Nov 19 at 12:18
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373902%2fdiv-showing-on-page-shouldnt-show-unless-button-pressed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your html code is clipped (at the beginning). Also, please put in a code block (ctrl+k)
– Chayim Friedman
Nov 19 at 11:53
I clipped it because it diappeared when It wasn't, I think because of the image
– Sparlarva
Nov 19 at 11:58
You are right though, I amended it, have you any thoughts on this problem?
– Sparlarva
Nov 19 at 11:59