Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

md-dialog: first-child margin incorrect #854

Closed
epelc opened this issue Dec 4, 2014 · 0 comments
Closed

md-dialog: first-child margin incorrect #854

epelc opened this issue Dec 4, 2014 · 0 comments
Milestone

Comments

@epelc
Copy link
Contributor

epelc commented Dec 4, 2014

When using md-content inside of md-dialog the margin for every first child element is incorrectly set to 0px.

The styles source can be found here

md-dialog md-content *:first-child {
   margin-top: 0px;
}

This should not be set when using layout="row" other wise you end up with one item being incorrectly positioned. Theres also problems with incorrect spacing when you collapse a row with several columns to one single column.

I think the best solution may be to remove this styling all together. But maybe it could be fixed to apply this styling to the elements layout elements instead.

capture

Some example code to test this with

<md-dialog md-theme="green" aria-label="Settings" flex class="fancy-dialog">
    <md-content>
        <md-subheader class="md-sticky-no-effect" md-theme="blue">My Dialog</md-subheader>
        <p>The first item of ever row ends up with the wrong `margin-top`</p>
        <div layout="row">
            <md-checkbox flex>1</md-checkbox>
            <md-checkbox flex>2</md-checkbox>
            <md-checkbox flex>3</md-checkbox>
        </div>
        <div layout="row">
            <md-checkbox flex>1a</md-checkbox>
            <md-checkbox flex>2a</md-checkbox>
            <md-checkbox flex>3a</md-checkbox>
        </div>
        <div layout="row">
            <md-checkbox flex>1b</md-checkbox>
            <md-checkbox flex>2b</md-checkbox>
            <md-checkbox flex>3b</md-checkbox>
        </div>
        <hr>
        <p>If you use a column or collapse a row to one then you also get incorrect spacing</p>
        <div layout="column">
            <md-checkbox flex>1</md-checkbox>
            <md-checkbox flex>2</md-checkbox>
            <md-checkbox flex>3</md-checkbox>
        </div>
        <div layout="column">
            <md-checkbox flex>1a</md-checkbox>
            <md-checkbox flex>2a</md-checkbox>
            <md-checkbox flex>3a</md-checkbox>
        </div>
        <div layout="column">
            <md-checkbox flex>1b</md-checkbox>
            <md-checkbox flex>2b</md-checkbox>
            <md-checkbox flex>3b</md-checkbox>
        </div>
    </md-content>
    <div class="md-actions" layout="row">
        <md-button ng-click="cancel()" type="button">Cancel</md-button>
        <md-button ng-click="save()" type="submit" class="md-primary">Save</md-button>
    </div>
</md-dialog>
@ThomasBurleson ThomasBurleson added this to the 0.7.0-rc1 milestone Dec 5, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants