How do i wrap a parent div to the width of a child div (dialog)?


Tags: css,angularjs,single-page-application

Problem :

Jsfiddle to demonstrate my issue.

I have a SPA (Single Page Application).
In the appliation several dialogs can popup on the screen.
Every popup has it own width and height.

The title and content of the dialogs are added by angularJs The problem i have here is the size of the dialog.

Currently all popups are made and added seperatly. I want to change this into one popup with variable content. The problem that comes with this is that the popup must wrap the contents width.

Example (as shown in the Jsfiddle)

<div class="dialog">
    <div class="titlebar"></div>
    <div class="content">
       The content that is added has css that tells it has a width of 400px
       This means the dialog needs to wrap to this 400px
    </div>
</div>

How do i solve this by only using CSS?


Some examples of the variation of popups (although the width of both look the same, this is not the case)

Popup 1 Popup 2



Solution :

For young browser you may use :


1) display:flex; property (includes centering) DEMO

.backdrop {
    position: fixed;
    top:0;
}
.backdrop {
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dialog {
    margin:auto;
    position:relative;
}

2) max-content as value for width and not set any width to inner content . (exept some padding to keep room for the close button) : DEMO

Info on W3C about those new keywords value, soon avalaible i hope.

CSS updated

.dialog {
    width: max-content;
    z-index: 101;
    margin: auto;
    /* basic way t o center */
    top:50%;
    left:50%;
    margin:-80px -150px;

}

.titlebar {
    height: 50px;
    line-height: 50px;    
    background-color: #000000;
    border-radius: 10px 10px 0px 0px;
}

.title{
    color:#FFFFFF;
    font-size: x-large;
    padding:0 50px 0 10px;
}

.close_button {
    position: absolute;
    right: 0px;
    top: 0px;
    line-height:30px;
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    background-color: #ffd549;
    color: #000000;
}

.content {
    background-color: #FFFFFF;
}

.content-width {
    background-color:#FFF000;
}

or as already said , use the display: table, inline-table


    CSS Howto..

    How to not apply a webpage's CSS on the div I am inserting into it via content scripts?

    How do i get css3pie to work on all Joomla 2.5 pages not just default page

    How to hide submenu until it is hovered over by mouse

    CSS how translate DIV with whole content in it

    How to set custom fonts in JavaFX Scene Builder using CSS

    How to view CSS/HTML in GUI?

    How can I put three elements in the same column, with the first on top, second and third in the center of the remaining space, using Flexbox?

    How to make more divs appear when hovering over one div?

    CSS: How do I stop hover effects from pushing my text?

    How to overwrite css animation

    Showing play button and time on each image

    How to style the values in a textfield using CSS?

    How to make width of navigation auto, while absolutely positioning its wrapper

    How can the common text message format be replicated purely with CSS?

    How to set background url for css files in thymeleaf?

    BeautifulSoup4/CSS selector how to select the

    How to make div background color transparent in CSS

    How to include css in mulitple jsps?

    How to remove strange border from css-animated clip-path?

    How to make a bullet of an image slider look different while is active?

    How to get page-header and nav-pills to appear on the same line

    How to remove unwanted white space in CSS

    How to make div css background hover

    How to use non-online images in CSS?

    How to fix crispy text in Safari 5 Mac OS X after using css 3d transforms?

    How to make a parent --> node relationship in css?

    How to make a div to fit all available width even hidden with scroll?

    How to implement single-line ellipsis with CSS

    How to Fix Collapsing Top and Bottom Margins?

    How to always center a flexible square in viewport with pure CSS?