AngularJS with a styled select drop down - css

I have an AngularJS 1.x app that I need to add a styled drop down as see in the image below. Some items need to have a red or green left border.
How can I achieve this?


Some more code would help.. but something like this
.element.red {
border-left: 5px solid red;
}
.element.green {
border-left: 5px solid green
}

Related

how to update the border color for fundamental ngx token component

I am trying to use the fundamental ngx token component (https://sap.github.io/fundamental-ngx/#/core/token) in my angular project. The default border is gray, I want to change it to green. I tried to apply style as follows:
<fd-token class="green-border">Bibendum</fd-token>
.green-border {
border: 2px solid green;
}
But It doesn't work. Please help me. Thank you.

You can override the border color of the inner span with class fd-token as follows:
fd-token .fd-token {
border: 2px solid green !important;
}

Change style of Bootstrap listgroup active item

I am trying to style an active item in bootstrap list-group similar to this:
See how Recent is highlighted with just a dark border on the left.
This is my code:
Code
This is my css:
.list-group-item.active {
background-size: 10px;
background-color: #add8e6;
border-color: #add8e6;
}
Please advice.

Thanks. Added a border-left: 5px solid blue and it worked

How to add borders to tabulator-bulma.css?

I am unable to add borders to the tabulator table using the tabulator 4.2.3 css file.
I've tried changing the -is-bordered classes but the displayed table show no border. I find the Bulma theme pleasing but need borders to make it more table and data entry friendly for my users.
CSS section referenced below:
.tabulator.is-bordered {
border: 1px solid black;
}
.tabulator.is-bordered .tabulator-header .tabulator-col {
border-right: 1px solid black;
}
.tabulator.is-bordered .tabulator-tableHolder .tabulator-table
.tabulator-row .tabulator-cell {
border-right: 1px solid black;
}
I thought I would have 1px Black border around each cell and header, but it still shows as no border.

The is-bordered class is working in v 4.4.3.
Are you sure you are only including the tabulator_bulma.css. if you include the tabulator.css as well the two will fight against each other.

How can I change the borders of mask div?

How can I change the borders of Mask div ?, I am using 3.0.6 gxt.
final Portlet portlet = new Portlet();
portlet.mask("Loading Requests ....");
I want to add the style to say not to show any borders in the mask div, how to do that ?
I tried to override ext-all.js with my css, but didn't work (hoping x-mask & x-mask-msg are the css class names )
.x-mask {
border: 0px solid #a3bad9 !important;
}
.x-mask div {
border: 0px solid #a3bad9 !important;
}
.x-mask-msg {
border: 0px solid #a3bad9 !important;
}
.x-mask-msg div {
border: 0px solid #a3bad9 !important;
}

I think you are going to have to create an appearance. Here is Sencha's guide to doing that in gxt 3: https://docs.sencha.com/gxt-guides/3/concepts/appearance/Appearance_3.html
The appearance that you'll want to override should be Css3MaskAppearance. I'm not sure which part of the .css it will go in, I'm guessing .mask or .box but you should be able to add borders: 0px; and they should disappear.

How to make a multi step header

I am trying to make a header of multistage form containing the page number and description .
What I want to do is divide each step with an arrow mark something like this
1 step > 2tep > 3 step> 4 step
This is mostly a css question I just need to know how to make those boder into arrow sign
Fiddle
Explanation
As you can see in the fiddle I have icons that changes to check mark when you slide to next step . So I am trying to separate these icons with > arrow and then add some css background colors to separate the active,previous, next steps

Looking at your fiddle, does this do what you want?
.divider:before { content: ">"; }

are you searching something like this fiddle (I've done a simple arrow with text)?
.generatecssdotcom_arrowpoint {position:absolute;top:0;right:0;font-size:8px;color:#cccccc;}
.generatecssdotcom_arrowpoint a {color:#cccccc;text-decoration:none;font-weight:normal;}
.generatecssdotcom_arrowpoint a:hover {color:#cccccc;text-decoration:none;font-weight:normal;}
.generatecssdotcom_arrow {text-align:left;font-size:24px;font-family:Georgia;color:#000000;width:250px;height:30px;position:relative;background:#E46B00;border:7px solid #FFCC00;margin:7px 41px 7px 7px;padding:10px;}
.generatecssdotcom_arrow:after, .generatecssdotcom_arrow:before {left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}
.generatecssdotcom_arrow:after {border-left-color:#E46B00;border-width:34px;margin-top:-34px;}
.generatecssdotcom_arrow:before {border-left-color:#FFCC00;border-width:44px;margin-top:-44px;}
refer this site to generate it
for a single arrow refer this demo
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
<div class="arrow-right"></div>

Resources