p-calendar with showIcon=true in a ui-fluidcontainer has wrong width

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
stefanbr
Posts: 1
Joined: 11 Jan 2018, 15:46

11 Jan 2018, 16:15

hi! we are having a problem with this theme and how the p-calendar element is displayed inside a container with a ui-fluid class. It's wider then other input elements.

here's a simplified version of our template markup that demonstrates the problem:

Code: Select all

<div class="ui-g-4 ui-fluid">
    <div class="ui-g-12">
        <span class="ui-float-label">
            <input type="text" pInputText name="demoName1" />
            <label for="demoName1">demoName1</label>
        </span>
    </div>
    <div class="ui-g-12">
        <span class="ui-float-label">
            <p-calendar [showIcon]="true" name="demoDate1"></p-calendar>
            <label for="demoDate1">demoDate1</label>
        </span>
    </div>
    <div class="ui-g-12">
        <span class="ui-float-label">
            <input type="text" pInputText name="demoName2" />
            <label for="demoName2">demoName2</label>
        </span>
    </div>
</div>
here is a snippet from our .angular-cli.json with the included styles.

Code: Select all

      "styles": [
        "../node_modules/primeng/resources/primeng.min.css",
        "assets/theme/theme-bluegrey.css",
        "assets/layout/css/layout-cosmic.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "styles.css"
      ]
the only thing in styles.css is this. but the element width is broken anyway.

Code: Select all

.ui-float-label { margin-top: 1em; }
and here's a screenshot:

Image

btw is there a better way to use input elements with the float levels regarding top-margin? should be added right into the theme i think.

thanks for your help! a fix would be appreciated.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

18 Jan 2018, 10:51

Can you send us a screenshot please of how your calendar looks like.

Post Reply

Return to “Verona - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests