p-calendar with showIcon=true in a ui-fluidcontainer has wrong width
Posted: 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:
here is a snippet from our .angular-cli.json with the included styles.
the only thing in styles.css is this. but the element width is broken anyway.
and here's a screenshot:
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.
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>
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"
]
Code: Select all
.ui-float-label { margin-top: 1em; }
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.