InputGroup not supported

Babas007
Posts: 250
Joined: 24 May 2011, 09:42

06 Feb 2018, 15:15

Looks ugly with buttons:
Image

User avatar
aragorn
Posts: 3081
Joined: 29 Jun 2013, 12:38

09 Feb 2018, 11:32

We'll check and get back to you.

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

09 Feb 2018, 14:45

Hi,

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>
CSS;

Code: Select all

.ui-fluid .ui-inputgroup .ui-button-icon-only {
    width: 30px;
}

.ui-fluid .ui-inputgroup .ui-button {
    margin-right: 5px;
 }
These are looks like;
Image

Best Regards,

Babas007
Posts: 250
Joined: 24 May 2011, 09:42

12 Feb 2018, 12:10

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:

Image

Basically it means no background and a border below the buttons

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

13 Feb 2018, 09:16

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

Babas007
Posts: 250
Joined: 24 May 2011, 09:42

13 Feb 2018, 11:13

Okay too bad, I actually sent a screenshot of what it should look like on gitter to aragorn (but no answer, as usual...)

When do you plan to release the new version of Barcelona containing all those fixes?

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

14 Feb 2018, 07:44

Right after pf 6.2 version

Regards

Babas007
Posts: 250
Joined: 24 May 2011, 09:42

14 Feb 2018, 14:41

Okay, thanks for providing the changelog once released

User avatar
aragorn
Posts: 3081
Joined: 29 Jun 2013, 12:38

20 Feb 2018, 09:04

on gitter to aragorn (but no answer, as usual...)
- I'm giving all my performance to improve version 6.2/6.1.x in these days. Therefore, I can not respond immediately.

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>
You can change colors according to the selected theme color.

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>
Also, I will discuss this with the design team after 6.2.Final.

Regards,

Babas007
Posts: 250
Joined: 24 May 2011, 09:42

20 Mar 2018, 19:52

Any news regarding the new version of Barcelona?

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests