Looks ugly with buttons:
InputGroup not supported
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
We'll check and get back to you.
Github Profile: https://github.com/mertsincan
-
- Posts: 87
- Joined: 10 Jan 2018, 16:04
Hi,
Please try code blocks that I wrote down.
HTML;
CSS;
These are looks like;
Best Regards,
Please try code blocks that I wrote down.
HTML;
Code: Select all
<div class="ui-g ui-fluid">
<div class="card card-w-title">
<div class="ui-g-12">
<div class="ui-inputgroup">
<p:inputText placeholder="Vote" />
<p:commandButton icon="fa fa-close"/>
<p:commandButton icon="fa fa-check"/>
<p:commandButton icon="fa fa-home"/>
</div>
</div>
</div>
</div>
Code: Select all
.ui-fluid .ui-inputgroup .ui-button-icon-only {
width: 30px;
}
.ui-fluid .ui-inputgroup .ui-button {
margin-right: 5px;
}
Best Regards,
mmmh are you sure about the pattern? It does not respect the pattern you've been using for calendar (which is basically an inputgroup as well) I was expecting something similar to calendar, like:
Basically it means no background and a border below the buttons
Basically it means no background and a border below the buttons
-
- Posts: 87
- Joined: 10 Jan 2018, 16:04
Hi,
I make this design based on to your post and BarcelonaNg. Calendar icon that you said is inside the calendar component. They are separate components. But if you want to change you can change the style of buttons yourself.
You can check out BarcelonaNg here https://www.primefaces.org/barcelona-ng/#/forms
Regards
I make this design based on to your post and BarcelonaNg. Calendar icon that you said is inside the calendar component. They are separate components. But if you want to change you can change the style of buttons yourself.
You can check out BarcelonaNg here https://www.primefaces.org/barcelona-ng/#/forms
Regards
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
- I'm giving all my performance to improve version 6.2/6.1.x in these days. Therefore, I can not respond immediately.on gitter to aragorn (but no answer, as usual...)
Maybe, you can use the following code if you want it to look like the one above;
Code: Select all
<style type="text/css">
body .ui-inputgroup .ui-button-icon-only {
width: 30px;
background-color: transparent;
border: 0 none;
border-bottom: 1px solid #bdbdbd;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
body .ui-fluid .ui-inputgroup .ui-button-icon-only {
width: 30px;
}
body .ui-inputgroup .ui-button-icon-only .ui-icon{
color: #757575;
}
body .ui-inputgroup .md-inputfield {
bottom: -9px;
}
body .ui-inputgroup .ui-button-icon-only.ui-state-hover {
background-color: #e8e8e8;
}
body .ui-inputgroup .ui-button-icon-only.ui-state-hover .ui-icon {
color: #000000;
}
</style>
Exp;
Code: Select all
<div class="ui-g ui-fluid">
<div class="card card-w-title">
<div class="ui-g-12">
<div class="ui-inputgroup">
<p:inputText placeholder="Vote" />
<p:commandButton icon="fa fa-close"/>
<p:commandButton icon="fa fa-check"/>
<p:commandButton icon="fa fa-home"/>
</div>
</div>
</div>
</div>
Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 20 guests