Bs4 Select1_contents

1

How do i find out the properties and methods for the bs4 select control gh showed me select1 _contents.style.background but where is a list of the others

1579960318934-1795322454
1579960318934-1795322454.jpg1548×2064 2.1 MB
the one on the right i manually colored using a paint program. I just to be able to color the control i am using 7.4.2 App Studio.

2 
Select1.style.background = "red"

These expressions can be figured out by using the Chrome Debugger’s Inspect function to see how the control is constructed. You’ll need to know some HTML, CSS and JavaScript for it to make sense.

3

That did not change the color of the control only the background i need to change the light gray color of the control to blue. But thank you.

4

I can change the contents using Select1_contents.style.background but i want to change the control color

5

Can you make it clear what you are asking?

6

I am trying to change the color of the Select control I can change the color of the contents based on using Select1_contents.style.background = “Red” but that only changes the contents background color. I want to change the color of the control itself

219152.png

The control on the left is how it appears in my app the control in the right is an example of what colors I would like to change to but how do i do that?

Thanks,

David

7

Open up your page / file with Chrome.
Right mouse click and a context menu will appear. Select Inspect (It’s usually the last one in the menu).

The Developer Tools panel will appear. With the Elements tab selected (it’s usually selected by default), inthe top left corner look for an icon with a box and pointer. Select that. You’ll be able to select and inspect the CSS file associated with the element.

You can then edit the CSS by overriding the class without touching the original CSS.

You can also check out https://wiki.appstudio.dev/Using_the_Chrome_Debugger

8

Thank you James…The only portion I can’t change the color is the portion that i manually colored blue with a paint program

401465.png

9

Can you provide a test file with what you have already? Optionally, try this:

In AS, select the Project Properties and Global Code.
There is a CSS tab. Whatever we place in there will allow us to override the CSS.
Here’s a sample CSS style to paste in:

.form-control {
    color: red;
    background-color: greenyellow;
}

.bs4-control-label {
    color: white;
    background-color: purple;
}

.col-sm-2 {
    color: white;
    background-color: purple;
}

.col-sm-10 {
    color: white;
    background-color: purple;
}

.col-form-label {
    color: white;
    background-color: purple;
}

What we’re doing there is telling the page to render everything else as per the original CSS on the condition that the color and background-color style be the way we specified.

I hope that gets you closer to where you’d like to be.

10

I can’t wait to try it out…Thank you James…great developers like you make us better especially when you are willing to share your knowledge.

David

11

csstest

You may need to fiddle around with it a bit. The challenge is being able to target the part we want to change.

The example is what the sample posted would sort of turn out.

12

You are my new bestest friend! lol