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 make background scale from center outwards with CSS transition

    CSS how to make an element fade in and then fade out?

    XPath how to find second element with CSS class name

    How to stop Table within a Table inheriting style of first table?

    How to define CSS rules relative to previously defined values witout re-writing them?

    How can I avoid div from executing new line if one line is already full?

    How to get use the functionality same as “-webkit-appearance” in firefox?

    How to keep nav bar from shifting elements to next line when zooming in?

    How to write a CSS selector that works on nested divs and selects the closest match?

    How to use a divider in a navigation with list elements?

    How does Grails process static files without resources plugin?

    CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?

    How to hide youtube iframe using CSS

    how to add css code on jquery?

    D3js SVG open lines display a fill artifact, how to fix it?

    How to place an image between horizontal list items

    How to get a property from other class in CSS?

    How to have different layout orders for same html code for desktop and desktop using css or javascript (not jquery)

    Why is border radius not showing up in IE?

    CSS can't be overwritten, no matter how ; Wordpress with responsive style_options.php

    How to extract attribute values using css selectors?

    How to select the first element from a selection when one element does not have a class via CSS?

    How to change elements opacity based on if checkbox is or is not checked with CSS only?

    How to apply more than 1 CSS styles in javaScript? [duplicate]

    CSS - How to align 2 fields into 1 row?

    How to read CSS Content value with jQuery?

    How to get the CSS style from Inspect Element

    How to Set custom text Color in QTextEdit?

    How to get margin to be relative to text amount css

    Css Sub menu needed to show on the left not on the right of the menu