Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Dialog]: It's not possible to use CSS width:100% #920

Closed
mehdijouan opened this issue Nov 9, 2019 · 3 comments
Closed

[Dialog]: It's not possible to use CSS width:100% #920

mehdijouan opened this issue Nov 9, 2019 · 3 comments
Assignees
@MapTo0

Comments

@mehdijouan
Copy link

Describe the bug
The dialog component does not display a content with a 100% width component.
It seems pretty much the same (but for the height) of #889
Isolated example
https://codesandbox.io/s/vue-template-epsy5?fontsize=14

Expected behavior
The three content divs should be separated
Context

  • UI5 Web Components version 1.0.0.rc4
  • OS/Platform: macos
  • Other information: use of bootstrap

Affected components (if known)
Dialog
@mehdijouan mehdijouan changed the title Dialog content It's not possible to use CSS width:100% Dialo: It's not possible to use CSS width:100% Nov 10, 2019
@mehdijouan mehdijouan changed the title Dialo: It's not possible to use CSS width:100% [Dialog]: It's not possible to use CSS width:100% Nov 10, 2019
@MapTo0 MapTo0 self-assigned this Nov 10, 2019
MapTo0 added a commit that referenced this issue Nov 15, 2019
@MapTo0
refactor(ui5-dialog): layuting and styles cleanup
c0f6834 
- Adds Popup as base class for both Dialog and Popover
- Add animation for opening / closing of Popups
- Fixes some layout issues with Dialog's content
- Closing of Dialog can be prevented using preventDefault() call in onBeforeClose

FIXES: #920
@gnseo
Copy link
Contributor

gnseo commented Jan 23, 2020

How this issue is going on? I've met this issue too.
The content of dialog still does not include width: 100%.

I installed version 0.7.1 of @ui5/webcomponents-react.

@MarcusNotheis MarcusNotheis mentioned this issue Jan 23, 2020
Closed
@gnseo
Copy link
Contributor

gnseo commented Jan 30, 2020

Anyone please have a look into the screenshot from SAP/ui5-webcomponents-react#285.

The dialog content is under the shadow dom, so css style from outside can not be affected.
I just need following property for class ".ui5-dialog.content".

.ui5-dialog-content {
  width: "100%";
}

fifoosid pushed a commit that referenced this issue Feb 13, 2020
@gnseo
fix(ui5-dialog): stretch content area of dialog #920 (#1167)
894d457
@fifoosid
Copy link
Contributor

Closing the issue as the PR is merged 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@MapTo0 MapTo0

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@MapTo0 @mehdijouan @gnseo @fifoosid