Button group.

edalakiran · Post by **edalakiran** » Fri Nov 10, 2017 9:44 am

Hi,

Please look the attachment and can anyone tell me how to design the button group.

Previously i tried, i wrote the template in the HTML and retrieve that layout using property setters and retrievecustomlayouttemplate it is retrieving and showing in the pui designer but when i hit the preview it is not working as expected.

is there any other way to design this?

Post by **Emily** » Fri Nov 10, 2017 5:13 pm

Hi Teja,

Our team would be happy to help you with this. However, we will need more information regarding what the problem actually is with your buttons. You mention that in preview mode the buttons do not look as you're expecting them to. Could you give us more information about this? Could you tell us which aspects of your buttons do not look as you expect them to? Have you tried running this screen using a program to see if your buttons look correct then? We'll need to know exactly what kind of problems you're experiencing in order to assist you with this.

--Emily

edalakiran · Post by **edalakiran** » Mon Nov 13, 2017 9:21 am

Hi emily,
Thank you for getting reply, i attached gif, in the browser the focus is not staying when i hit on any button, i have no idea how to do this, i am new to profound. Any suggestions would be appreciated.

Post by **Emily** » Mon Nov 13, 2017 10:38 am

Teja,

From your image, it seems like you are wanting the background color of your buttons to change when the button is selected. Is that correct? Unfortunately, I do not have the HTML/CSS that you are working with on my end, however I did set up a test on my end that includes a button group similar to the one that you are working with:

: group1.png (2.6 KiB) Viewed 6067 times

I was able to change the color of a selected button by using the CSS :focus selector.

: group2.png (2.84 KiB) Viewed 6067 times

You can see that when Button1 is chosen, the background color of the button turns white. I've tested this using Preview Mode in the Visual Designer and it seems to be working properly for me using the :focus selector. If it helps, you can find more information about this selector here: https://www.w3schools.com/cssref/sel_focus.asp.

Would something like this work for you?

--Emily

Sondra Jones · Post by **Sondra Jones** » Tue Feb 06, 2018 12:46 pm

Would it be possible to see your CSS code you were using for the button group you created? We were trying to use :active selector.

Post by **Emily** » Tue Feb 06, 2018 3:25 pm

Hi Sondra,

For the example I posted above, I simply used an existing example for button groups found here: https://www.w3schools.com/css/css3_buttons.asp. There are quite a few examples using different CSS styles with buttons on this page that might be helpful. In my example, I placed an HTML Container on the screen and then used the following in the 'html' property:

Code: Select all

<!DOCTYPE html>
<html>
<head>
<style>
.btn-group .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    float: left;
}

.btn-group .button:hover {
    background-color: #3e8e41;
}

.btn-group .button:focus {
    background-color: white;
    color: black;
}

</style>
</head>
<body>

<div class="btn-group">
  <button class="button">Button1</button>
  <button class="button">Button2</button>
  <button class="button">Button3</button>
  <button class="button">Button4</button>
</div>

</body>
</html>

This will create the green button group shown in my previous post and uses the :focus selector to change the button to white when it is selected.

I hope that this helps!

--Emily

Sondra Jones · Post by **Sondra Jones** » Wed Feb 07, 2018 9:23 am

Hi Emily,

I am really new to all of this so I am just trying to get all this to work and understand how it is working.

The thing I don't understand is that when I add the button group to the designer, preview mode, and then do an inspect, I can go to the styles, hit :hov and then select active and it makes that button selected change colors as the code indicates it should. So why is it not accepting that code when it is clicked?

Maybe it would be easier for you to see my code?

Thanks,

Sondra

Post by **Emily** » Wed Feb 07, 2018 9:54 am

Hi Sondra,

I'd be happy to take a look at what you have to see if I can assist you with what you're wanting to accomplish. You can post your code here in this forum post, or you can send it to support@profoundlogic.com.

Thanks!

--Emily

Sondra Jones · Post by **Sondra Jones** » Wed Feb 07, 2018 12:22 pm

What would be the easiest to do?

I am not sure if you need the whole css file as this button group is using css buttons that we created as well. So I am assuming you would need to see that part of the css as well? Those buttons that we previously created on their own are working as expected. Just not the button group.

Post by **Emily** » Wed Feb 07, 2018 3:15 pm

Sondra,

Either method is fine. If you don't mind posting your CSS on this forum post, that works just as well. I will need as much CSS is as necessary to create your buttons and your button group on my end so that I can try to reproduce what you're experiencing.

Please let me know if you have any other questions.

Thanks!

--Emily

Profound Logic Forums

Button group.

Button group.

Re: Button group.

Re: Button group.

Re: Button group.

Re: Button group.

Re: Button group.

Re: Button group.

Re: Button group.

Re: Button group.

Re: Button group.

Who is online