Mixing
Is there a way to get a calendar-popover to the top stack position of my form?
I'm currently struggling to fix a form style.
The form contains among other things 2 date elements, where a calendar opens after clicking into it.
The form itself exists at the moment in an old style, where everything is working fine.
old search form
The style needs now to be changed to accordion view, to look like this:
new search form
As you can see it causes problems by providing a complete visible calendar, because it's not popping over the accordion it belongs to.
I tried already working with the z-index so far, but nothing seems to work.
Note: z-index was already set to 9999999, before I started playing around.
I expect the calendar to popover the accordion and not getting cut by the content of the accordion.
(If there are more elements underneath the date-elements, it would look fine, but thats not the case and can't be expected from the form.)
Any idea how to fix it?
edit of providing css code:
.wc-date-popover{
font-size: 14px;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
margin: 0px auto;
perspective: 1000px;
float: left;
background: #fff;
background: $secondary-color;
position: fixed;
width: 90%;
top: 5%;
left: 50%;
z-index: 9999999;
overflow: hidden;
height: 90%;
max-width: 320px;
transition: all .5s linear;
transform: translateX(-50%);
}
@media (min-width: 768px) {
.wc-date-popover{
width: 250px;
position: absolute;
top: 31px;
height: auto;
left: 0;
transform: translateX(0);
}
edit of providing part of html code
<div class="row {{viewobject['css']}}" id="{{viewobject[g.PROPS.title]}}">
<div class="col">
<div class="group">
<div [formGroup]="form">
<div formGroupName="{{viewobject[g.PROPS.title]}}">
<ng-container *ngIf="viewobject !== undefined && form !== undefined">
<ng-container [ngSwitch]="viewobject[g.PROPS.nodeType]">
<ng-container *ngSwitchCase="'accordion'">
<hac-accordion>
<hac-accordion-group [heading]="viewobject[g.PROPS.label] ? viewobject[g.PROPS.label] : viewobject[g.PROPS.title] | hasLang" [blnExpand]="true">
<ng-container *ngTemplateOutlet="content"></ng-container>
</hac-accordion-group>
</hac-accordion>
</ng-container>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
html css
angular asked Jan 2 at 13:13
SereghonSereghon
284
|
show 1 more comment
I'm currently struggling to fix a form style.
The form contains among other things 2 date elements, where a calendar opens after clicking into it.
The form itself exists at the moment in an old style, where everything is working fine.
old search form
The style needs now to be changed to accordion view, to look like this:
new search form
As you can see it causes problems by providing a complete visible calendar, because it's not popping over the accordion it belongs to.
I tried already working with the z-index so far, but nothing seems to work.
Note: z-index was already set to 9999999, before I started playing around.
I expect the calendar to popover the accordion and not getting cut by the content of the accordion.
(If there are more elements underneath the date-elements, it would look fine, but thats not the case and can't be expected from the form.)
Any idea how to fix it?
edit of providing css code:
.wc-date-popover{
font-size: 14px;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
margin: 0px auto;
perspective: 1000px;
float: left;
background: #fff;
background: $secondary-color;
position: fixed;
width: 90%;
top: 5%;
left: 50%;
z-index: 9999999;
overflow: hidden;
height: 90%;
max-width: 320px;
transition: all .5s linear;
transform: translateX(-50%);
}
@media (min-width: 768px) {
.wc-date-popover{
width: 250px;
position: absolute;
top: 31px;
height: auto;
left: 0;
transform: translateX(0);
}
edit of providing part of html code
<div class="row {{viewobject['css']}}" id="{{viewobject[g.PROPS.title]}}">
<div class="col">
<div class="group">
<div [formGroup]="form">
<div formGroupName="{{viewobject[g.PROPS.title]}}">
<ng-container *ngIf="viewobject !== undefined && form !== undefined">
<ng-container [ngSwitch]="viewobject[g.PROPS.nodeType]">
<ng-container *ngSwitchCase="'accordion'">
<hac-accordion>
<hac-accordion-group [heading]="viewobject[g.PROPS.label] ? viewobject[g.PROPS.label] : viewobject[g.PROPS.title] | hasLang" [blnExpand]="true">
<ng-container *ngTemplateOutlet="content"></ng-container>
</hac-accordion-group>
</hac-accordion>
</ng-container>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
html css
angular asked Jan 2 at 13:13
SereghonSereghon
284
Maybe the accordeon has aoverflow:hidden, overwrite this style withoverflow:visible
– Roy
Jan 2 at 13:16
The overflow:hidden property will not work correctly as the accordian usually needs this property. One possible way will be to calculate the target height/width and place the calendar it as a fixed element. If you are using any plugin for the calendar then you should have the option to place the calendar according to body. If you can make a plunkr then we can help you in a better way.
– Aslam
Jan 2 at 13:21
@Roy accordion itself has no overflow property
– Sereghon
Jan 2 at 13:28
@Aslam The date-popover is already in the body of the expanded card.
– Sereghon
Jan 2 at 13:35
Complete the question with HTML code please.
– Roy
Jan 2 at 13:55
|
show 1 more comment
I'm currently struggling to fix a form style.
The form contains among other things 2 date elements, where a calendar opens after clicking into it.
The form itself exists at the moment in an old style, where everything is working fine.
old search form
The style needs now to be changed to accordion view, to look like this:
new search form
As you can see it causes problems by providing a complete visible calendar, because it's not popping over the accordion it belongs to.
I tried already working with the z-index so far, but nothing seems to work.
Note: z-index was already set to 9999999, before I started playing around.
I expect the calendar to popover the accordion and not getting cut by the content of the accordion.
(If there are more elements underneath the date-elements, it would look fine, but thats not the case and can't be expected from the form.)
Any idea how to fix it?
edit of providing css code:
.wc-date-popover{
font-size: 14px;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
margin: 0px auto;
perspective: 1000px;
float: left;
background: #fff;
background: $secondary-color;
position: fixed;
width: 90%;
top: 5%;
left: 50%;
z-index: 9999999;
overflow: hidden;
height: 90%;
max-width: 320px;
transition: all .5s linear;
transform: translateX(-50%);
}
@media (min-width: 768px) {
.wc-date-popover{
width: 250px;
position: absolute;
top: 31px;
height: auto;
left: 0;
transform: translateX(0);
}
edit of providing part of html code
<div class="row {{viewobject['css']}}" id="{{viewobject[g.PROPS.title]}}">
<div class="col">
<div class="group">
<div [formGroup]="form">
<div formGroupName="{{viewobject[g.PROPS.title]}}">
<ng-container *ngIf="viewobject !== undefined && form !== undefined">
<ng-container [ngSwitch]="viewobject[g.PROPS.nodeType]">
<ng-container *ngSwitchCase="'accordion'">
<hac-accordion>
<hac-accordion-group [heading]="viewobject[g.PROPS.label] ? viewobject[g.PROPS.label] : viewobject[g.PROPS.title] | hasLang" [blnExpand]="true">
<ng-container *ngTemplateOutlet="content"></ng-container>
</hac-accordion-group>
</hac-accordion>
</ng-container>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
html css
angular asked Jan 2 at 13:13
SereghonSereghon
284
I'm currently struggling to fix a form style.
The form contains among other things 2 date elements, where a calendar opens after clicking into it.
The form itself exists at the moment in an old style, where everything is working fine.
old search form
The style needs now to be changed to accordion view, to look like this:
new search form
As you can see it causes problems by providing a complete visible calendar, because it's not popping over the accordion it belongs to.
I tried already working with the z-index so far, but nothing seems to work.
Note: z-index was already set to 9999999, before I started playing around.
I expect the calendar to popover the accordion and not getting cut by the content of the accordion.
(If there are more elements underneath the date-elements, it would look fine, but thats not the case and can't be expected from the form.)
Any idea how to fix it?
edit of providing css code:
.wc-date-popover{
font-size: 14px;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
margin: 0px auto;
perspective: 1000px;
float: left;
background: #fff;
background: $secondary-color;
position: fixed;
width: 90%;
top: 5%;
left: 50%;
z-index: 9999999;
overflow: hidden;
height: 90%;
max-width: 320px;
transition: all .5s linear;
transform: translateX(-50%);
}
@media (min-width: 768px) {
.wc-date-popover{
width: 250px;
position: absolute;
top: 31px;
height: auto;
left: 0;
transform: translateX(0);
}
edit of providing part of html code
<div class="row {{viewobject['css']}}" id="{{viewobject[g.PROPS.title]}}">
<div class="col">
<div class="group">
<div [formGroup]="form">
<div formGroupName="{{viewobject[g.PROPS.title]}}">
<ng-container *ngIf="viewobject !== undefined && form !== undefined">
<ng-container [ngSwitch]="viewobject[g.PROPS.nodeType]">
<ng-container *ngSwitchCase="'accordion'">
<hac-accordion>
<hac-accordion-group [heading]="viewobject[g.PROPS.label] ? viewobject[g.PROPS.label] : viewobject[g.PROPS.title] | hasLang" [blnExpand]="true">
<ng-container *ngTemplateOutlet="content"></ng-container>
</hac-accordion-group>
</hac-accordion>
</ng-container>
</ng-container>
</div>
</div>
</div>
</div>
</div>
</div>
html css
angular html css
angular asked Jan 2 at 13:13
SereghonSereghon
284
asked Jan 2 at 13:13
SereghonSereghon
284
edited Jan 3 at 6:46
Sereghon
asked Jan 2 at 13:13
SereghonSereghon
284
asked Jan 2 at 13:13
SereghonSereghon
284
asked Jan 2 at 13:13
SereghonSereghon
284
284
Maybe the accordeon has aoverflow:hidden, overwrite this style withoverflow:visible
– Roy
Jan 2 at 13:16
The overflow:hidden property will not work correctly as the accordian usually needs this property. One possible way will be to calculate the target height/width and place the calendar it as a fixed element. If you are using any plugin for the calendar then you should have the option to place the calendar according to body. If you can make a plunkr then we can help you in a better way.
– Aslam
Jan 2 at 13:21
@Roy accordion itself has no overflow property
– Sereghon
Jan 2 at 13:28
@Aslam The date-popover is already in the body of the expanded card.
– Sereghon
Jan 2 at 13:35
Complete the question with HTML code please.
– Roy
Jan 2 at 13:55
|
show 1 more comment
Maybe the accordeon has aoverflow:hidden, overwrite this style withoverflow:visible
– Roy
Jan 2 at 13:16
The overflow:hidden property will not work correctly as the accordian usually needs this property. One possible way will be to calculate the target height/width and place the calendar it as a fixed element. If you are using any plugin for the calendar then you should have the option to place the calendar according to body. If you can make a plunkr then we can help you in a better way.
– Aslam
Jan 2 at 13:21
@Roy accordion itself has no overflow property
– Sereghon
Jan 2 at 13:28
@Aslam The date-popover is already in the body of the expanded card.
– Sereghon
Jan 2 at 13:35
Complete the question with HTML code please.
– Roy
Jan 2 at 13:55
Maybe the accordeon has a
overflow:hidden, overwrite this style with overflow:visible– Roy
Jan 2 at 13:16
Maybe the accordeon has a
overflow:hidden, overwrite this style with overflow:visible– Roy
Jan 2 at 13:16
The overflow:hidden property will not work correctly as the accordian usually needs this property. One possible way will be to calculate the target height/width and place the calendar it as a fixed element. If you are using any plugin for the calendar then you should have the option to place the calendar according to body. If you can make a plunkr then we can help you in a better way.
– Aslam
Jan 2 at 13:21
The overflow:hidden property will not work correctly as the accordian usually needs this property. One possible way will be to calculate the target height/width and place the calendar it as a fixed element. If you are using any plugin for the calendar then you should have the option to place the calendar according to body. If you can make a plunkr then we can help you in a better way.
– Aslam
Jan 2 at 13:21
@Roy accordion itself has no overflow property
– Sereghon
Jan 2 at 13:28
@Roy accordion itself has no overflow property
– Sereghon
Jan 2 at 13:28
@Aslam The date-popover is already in the body of the expanded card.
– Sereghon
Jan 2 at 13:35
@Aslam The date-popover is already in the body of the expanded card.
– Sereghon
Jan 2 at 13:35
Complete the question with HTML code please.
– Roy
Jan 2 at 13:55
Complete the question with HTML code please.
– Roy
Jan 2 at 13:55
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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%2f54007025%2fis-there-a-way-to-get-a-calendar-popover-to-the-top-stack-position-of-my-form%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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%2f54007025%2fis-there-a-way-to-get-a-calendar-popover-to-the-top-stack-position-of-my-form%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
Maybe the accordeon has a
overflow:hidden, overwrite this style withoverflow:visible– Roy
Jan 2 at 13:16
The overflow:hidden property will not work correctly as the accordian usually needs this property. One possible way will be to calculate the target height/width and place the calendar it as a fixed element. If you are using any plugin for the calendar then you should have the option to place the calendar according to body. If you can make a plunkr then we can help you in a better way.
– Aslam
Jan 2 at 13:21
@Roy accordion itself has no overflow property
– Sereghon
Jan 2 at 13:28
@Aslam The date-popover is already in the body of the expanded card.
– Sereghon
Jan 2 at 13:35
Complete the question with HTML code please.
– Roy
Jan 2 at 13:55