We Keep Coding

Change border color on angular-archwizard steps

I'm using angular-archwizard to create circle steps to navigate. When I click on different steps I can view the right circle step border colored(in my case orange) until I click on the last step. When I click on the last step also the other steps change border color and become green.
I inspected the elements and I saw that it's applied a css on this
aw-wizard-navigation-bar.horizontal.large-empty ul.steps-indicator li.done
.step-indicator
and the 'li.done' it's applied on every steps(with the green border-color).
I would to know if there is a way to do for dont't apply the last 'li.done' when I click on the last step. Or if there another way to work right.
<aw-wizard *ngIf="items.length > 0" navBarLayout="large-empty"
style="padding-bottom: 0.5rem" style="width: 100%"
navigationMode="free">
<div *ngFor="let item of items; let i=index">
<aw-wizard-step [stepId]="i" [navigationSymbol]="{ symbol:
'', fontFamily: 'FontAwesome'}"
stepTitle="{{item.statoContattoDescrizione}}"
(stepEnter)="passToStep($event,i)">
</aw-wizard-step> ...
</aw-wizard>

You can use css. Add something like this to your stylesheet
ul.steps-indicator li:last-child .done .step-indicator{
border-color:orange;
}
or sass
ul.steps-indicator{
li:last-child {
.done{
.step-indicator{
border-color: orange;
}
}
}
}
that would remove the green border for example.

Using numbers from CSS class as CSS values

I'm trying to streamline CSS styling. Is it possible to use a number in the CSS class as a value to be applied? Like parameters in a PHP or JavaScript function
Ex.
<div class="pad-left-35">Div with 35px padding left </div>
<div class="pad-left-10">Div with 10px padding left </div>
.pad-left-[value] { padding-left: 'value'px; }
.color-[value] { color: 'value'; }

As of now, it's impossible, and it will probably always be. However, when the new CSS drafts will be approved, you will be able do to a similar thing with custom attributes. For example, if you have <div padding="35">...</div> you will be able to set its padding like this:
div /* or whatever selector you would like to use */ {
padding: attr(padding px);
}
You can read more about this here. Unfortunately, this draft has not been approved yet. So, until then, you will either set some standard paddings - like padding-4, padding-8, padding-12, ... - or use a SASS/SCSS foreach loop, like this:
#for $padding from 1 to 13 {
.padding-#{$padding} {
padding: $padding + px;
}
}

I'm not sure if this is what you're looking for, however, using :root, you can add parameters as shown in the code below, hope this helps.
:root {
--main-bg-color: coral;
--padding: 5px;
}
#div1 {
background-color: var(--main-bg-color);
padding: var(--padding);
}

CSS grid layout changing column width with javascript

I try setting up a CSS grid layout as follows
.wrapper {
width: 800px;
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(5, 200px);
}
Is it possible to locate grid-template-columns in JS then re-size the columns? I came across a situation where I could find it (lost the code) but when I tried changing it, Chrome DevTools say the value is computed and cannot be changed.
Any help pointing me in the right direction (or other ways to do it, but use of grid is a must) is highly appreciated.
Thanks.

#MikeC, if you're not opposed to using jQuery, you can change the column width using jQuery's .css() function, which
Get the value of a computed style property for the first element in
the set of matched elements or set one or more CSS properties for
every matched element.
You can read more on it in jQuery's documentation for the function here.
Also, just so you can see it in action, I put together a codeply project that you can see it in action. If you click anywhere on the grid, it will resize (only once though). It's a primitive example.
Here's the jQuery code it uses.
$( "#grid" ).one( "click", function() {
$( this ).css( "grid-template-columns", "repeat(2, 400px)" );
});

#MikeC You didn't tell anybody how you got it to work.
Assuming you have a button or some event that calls a toolExpandToggle() and assume that your class name for your grid CSS definition is called "canvas" then you can do something like this.
In the CSS I have:
#media only screen and (min-width: 768px) {
.canvas {
grid-gap: .0em;
grid-template-columns: 50px auto; /* the values are the toolbar, content */
grid-template-rows: 50px auto 25px; /* The values are o365Nav (O365 stardard), content, statusbar. Note: o365Nav heigth is the padding value used by the modal menu. */
grid-template-areas:
"o365Nav o365Nav"
"tool content"
"statusbar statusbar";
}
}
In the HTML I have a button. Notice that I have my widths defined as data items where 50 matches the CSS. In any case these values will replace the CSS when used.
<div class="tool" id="pl-tool" data-collasped="50"; data-expanded="200";>
<div class="spacer"></div>
<button class="tool-ms-button"><span class="ms-Icon ms-Icon--GlobalNavButton tool-ms-icon" aria-hidden="true" onclick="toolExpandToggle('pl-tool')"></span></button>
<!-- now the tool bar buttons -->
<div><button class="tool-button">item-a</button></div>
<div><button class="tool-button">item-a</button></div>
</div>
Then I have a javascript function:
function toolExpandToggle(target) {
let id = document.getElementById(target);
let c = id.dataset.collasped;
let e = id.dataset.expanded;
let w = document.getElementsByClassName('tool')[0].offsetWidth;
if(w < e) {
document.getElementsByClassName('canvas')[0].style.gridTemplateColumns = e + 'px auto';
}
else {
document.getElementsByClassName('canvas')[0].style.gridTemplateColumns = c + 'px auto';
}
}
In my case I only had two columns.
When I click a button I call the toggle method and change it to the data value.
I hope this gets someone else a little further down the track.

select2 not responsive, width larger than container

I have a problem with the width of a select2 dropdown in my ASP.NET page. When I try to view the page with the Chrome emulator of devices screen, the select2 is larger than the containing div, and on the right it goes out of the screen. I saw with code inspection that it adds automatically a style attribute style="width: 498px;" in the <span class="select2 select2-container select2-container--bootstrap select2-container--below"> element that I did not set anywhere. The only operation that I did is to set $("#ContentPlaceHolderContent_mySelect").select2(); in the document.ready function(). My select2 dropdown is contained in a block:
<div class="form-group">
<label class="control-label col-md-3">Select structure</label>
<div class="col-lg-5 col-md-9">
<select class="form-control" id="mySelect" runat="server"></select>
</div>
</div>
How can I remove that style="width" option?

Select2 adds class .select2. You can override what script does using css.
Here I'm set select2 to have 100% width, using !important. If I would not do that select2 would have 24px width.
You can further customize other classes that select2 generates using some principle.
$(document).ready(function(){
$("#mySelect").select2();
});
.select2 {
width:100%!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<div class="form-group">
<label class="control-label col-md-3">Select structure</label>
<div class="col-lg-5 col-md-9">
<select class="form-control" id="mySelect" runat="server"></select>
</div>
</div>

This works for me:
$('select').select2({
width: '100%'
});
and add CSS:
.select2-selection { overflow: hidden; }
.select2-selection__rendered { white-space: normal; word-break: break-all; }
Add to CSS "!important" if you need.

Getting Overflow? Do it with JS also
Using CSS width:100% sometimes get scrolling issue if some elements have overflow property. I would recommend using js also.
Add below js
$('select').select2({
width: '100%'
});
Add below CSS
.select2-selection { overflow: hidden; }
.select2-selection__rendered { white-space: normal; word-break: break-all; }
/*Copied from already given :) */

if you are using bootstrap ,use the below style
.form-group > .select2-container {
width: 100% !important;
}

try use dropdownParent
$('#mySelect2').select2({
dropdownParent: $('#myModal')
});
https://select2.org/dropdown#dropdown-placement

You don't need to use !important, you just can override it with max-width like:
.select2{
max-width: 100%;
}

The <span> with the .select2 class is created by the Select2 plugin just after creation a new select2 on a given <select>.
To make this span.select2 element responsive, we may have some possibilities, such as:
Use a % width (either on the original before creating the select2 element, or in the select2 width configuration option).
Override via CSS (for example when we use #media() queries). Note that this may affect the plugin's functionality or display.
For the 2nd one, we can use the adjacent sibling combinator (+) with the !important on the width value to style our select2's <span>, since normally the select2's span is created and inserted right after our <select>.
An example below:
#media (max-width: 400px) {
select.my-x-select + span.select2 {
width: 200px !important;
}
}
Note: select and span element selectors aren't needed, #media as an example use case.

First of all add Select2 class .select2 in select tag and used these CSS
.select2-container{
width: 100% !important;
}
.control-label {
width: 100%;
}

How to Center Text in a JavaScript Function?

I have a JavaScript function that displays text based on input in a text field. When a value is entered into the text field, my program will check to see if the value is correct. If it is correct, my program displays, "You are correct!" and if it is incorrect, my program displays, "Try again!"
The text field and button are both centered horizontally on the page, but I cannot figure out how to center the "You are correct!" and "Try again!"
I feel like I have tried everything, but obviously I haven't, considering I can't get it to work.
Here is the code for my JavaScript function:
<center><p>Can you remember how many books I listed at the bottom of the page?</p></center>
<center><input id="numb"></center>
<center><button type="button" onclick="myFunction()">Submit</button></center>
<p id="demo"></p>
<div class="jsFunction">
<script>
function myFunction()
{
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than five or greater than five
if (isNaN(x) || x < 5 || x > 5)
{
text = "Try again!";
}
else
{
text = "You are correct!";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</div>
Here is the CSS code for the function:
.jsFunction
{
margin-left: auto;
margin-right: auto;
}
This specific CSS code is only one of many, many attempts I have made at centering the text in the function.
Here is a link to a picture that will show you the problem I am having:
http://i.stack.imgur.com/Hb01j.png
Please help!

Try setting a class on the p tag that contains text-align: center;
Edit
Nesting your script in a div is meaningless as script tags don't get rendered
You can either target #demo in your css (for the text alignment) or add a class align-center that contains the correct style.
I would recommend the latter as the becomes more reusable, whereas you can't reuse an id on the same page

The fact that you are using JavaScript isn't important to this question. I mention it because of the title "How to Center Text in a JavaScript Function" and your attempt to center the actual script element containing your JavaScript code.
You want to center the contents of an element that happens to be controlled by JavaScript, but the answer is CSS-only.
As Ryuu's answer mentions, text-align: center will do the job for (you guessed it) text and other inline-level content.
You should not use the deprecated center tag.
Your attempt to use margins will center something if you apply it to the correct element and the element has a width. That "something" is the element, however, not the contents of the element.
In other words, margin can be used to align the box, not the stuff within the box.
Example 1: centers the element, but the text is still left-aligned.
Example 2: centers the element and its inline-level contents.
.margin-example1 {
width: 200px;
background-color: #ddd;
/* shorthand for margin: 0 auto 0 auto, which is shorthand for specifying each side individually */
margin: 0 auto;
}
.margin-example2 {
width: 200px;
background-color: #aaccee;
margin: 0 auto;
/* we still need this to get the desired behavior */
text-align: center;
}
<div class="margin-example1">Example 1</div>
<div class="margin-example2">Example 2</div>
So how about a text input? Browsers usually style inputs as display:inline-block. This means we can center something inside them (Examples 1 & 2), but to center them within their container we need to change to display:block (Example 3) or because they are inline-like elements themselves, we can set text-align on the parent container (Example 4), see also.
.example1 {
width: 100%;
text-align: center;
}
.example2 {
width: 200px;
text-align: center;
}
.example3 {
display: block;
width: 200px;
text-align: center;
margin: 0 auto;
}
.example4 {
width: 200px;
text-align: center;
}
.example4-parent {
text-align: center;
}
<div>
<input type="text" value="Example 1" class="example1">
</div>
<div>
<input type="text" value="Example 2" class="example2">
</div>
<div>
<input type="text" value="Example 3" class="example3">
</div>
<div class="example4-parent">
<input type="text" value="Example 4" class="example4">
</div>
Layout in CSS can be complicated, but the basics aren't hard.
Note that I have over-simplified my explanation/definitions a bit (you can read all about the formatting model when you are ready).