Button attribute Name not shown in browser inspect elements

Community Support
1

Hi,

When I set attribute Name for Button widget for instance button1 = Button(label=“B1”, button_type=“success”, name=“Tile_1”, css_classes=[‘button_G1’])

this attribute (Name) not appear in the Inspect element of the browser. The inspect element looks like

Normally I expected <button class=“bk-bs-btn bk-bs-btn-success” type=“button” name=“Tile_1”>

I would like to use attribute Name to define CSS style for this button. For other buttons other appearance (color, linecolor, …)

I hope somebody will give possible solutions.

Thanks,

Goran

2

It looks like the BokehJS does not use all the attributes as specified in its JSON Prototype.
You can however customise each button using css inheritance.

Following this example and adding css inheritance you can define new styles according to your needs.

Then your css file would look like this:

.button_G1 { width: 500px; }
.button_G1 button.bk-bs-btn.bk-bs-btn-default {
background-color: lightblue;
font-weight: bold;
color: navy;
border-style: solid;
border-width: 10px;
border-color: navy;
height: 300px;
}

.button_G2 { width: 700px; }
.button_G2 button.bk-bs-btn.bk-bs-btn-default{
border: none;
background-color: orange;
height: 80px;
}

``

···

On Thursday, February 7, 2019 at 6:12:18 PM UTC+1, Goran Goki wrote:

Hi,

When I set attribute Name for Button widget for instance button1 = Button(label=“B1”, button_type=“success”, name=“Tile_1”, css_classes=[‘button_G1’])

this attribute (Name) not appear in the Inspect element of the browser. The inspect element looks like

Normally I expected <button class=“bk-bs-btn bk-bs-btn-success” type=“button” name=“Tile_1”>

I would like to use attribute Name to define CSS style for this button. For other buttons other appearance (color, linecolor, …)

I hope somebody will give possible solutions.

Thanks,

Goran

3

Hi Tony, I have two different posts. I mentioned in the other one that i solve the problem with css selectors. I used
div[class$=‘button_G1’] > button[type=‘button’]{

background-image: url("/a/b/c.png");

width:77px;

}

because in Microsoft Edge Inspect element (also in other browsers) is shown complex div class name (see the image in attachment) and no useful information (attribute) for button to distinguish from other buttons

Goran

···

On Saturday, February 9, 2019 at 12:43:07 PM UTC+1, tony halik wrote:

It looks like the BokehJS does not use all the attributes as specified in its JSON Prototype.
You can however customise each button using css inheritance.

Following this example and adding css inheritance you can define new styles according to your needs.

Then your css file would look like this:

.button_G1 { width: 500px; }
.button_G1 button.bk-bs-btn.bk-bs-btn-default {
background-color: lightblue;
font-weight: bold;
color: navy;
border-style: solid;
border-width: 10px;
border-color: navy;
height: 300px;
}

.button_G2 { width: 700px; }
.button_G2 button.bk-bs-btn.bk-bs-btn-default{
border: none;
background-color: orange;
height: 80px;
}

``

On Thursday, February 7, 2019 at 6:12:18 PM UTC+1, Goran Goki wrote:

Hi,

When I set attribute Name for Button widget for instance button1 = Button(label=“B1”, button_type=“success”, name=“Tile_1”, css_classes=[‘button_G1’])

this attribute (Name) not appear in the Inspect element of the browser. The inspect element looks like

Normally I expected <button class=“bk-bs-btn bk-bs-btn-success” type=“button” name=“Tile_1”>

I would like to use attribute Name to define CSS style for this button. For other buttons other appearance (color, linecolor, …)

I hope somebody will give possible solutions.

Thanks,

Goran

4

My bokeh info

Python version : 3.5.6 |Anaconda, Inc.| (default, Aug 26 2018, 19:24:31) [MSC v.1900 32 bit (Intel)]

IPython version : 6.0.0

Bokeh version : 0.13.0

BokehJS static path : c:\miniconda3\lib\site-packages\bokeh\server\static

node.js version : (not installed)

npm version : (not installed)

thanks Goran

···

On Thursday, February 7, 2019 at 6:12:18 PM UTC+1, Goran Goki wrote:

Hi,

When I set attribute Name for Button widget for instance button1 = Button(label=“B1”, button_type=“success”, name=“Tile_1”, css_classes=[‘button_G1’])

this attribute (Name) not appear in the Inspect element of the browser. The inspect element looks like

Normally I expected <button class=“bk-bs-btn bk-bs-btn-success” type=“button” name=“Tile_1”>

I would like to use attribute Name to define CSS style for this button. For other buttons other appearance (color, linecolor, …)

I hope somebody will give possible solutions.

Thanks,

Goran