I want to disable the blu border line in IonInput of IonicV2.
I try to add some CSS from the net but id doesn't work
<ionlist
id="list"
nolines
style="margin-top:150px;margin-bottom:15px"
visible
>
<ionitem
id="usernameItem"
detail="none"
wraptext="false"
sticky="false"
type="default"
style="display:flex;position:relative;top:0px;bottom:0px;border-top:1px none rgb(222, 222, 222);border-bottom:1px none rgb(0, 0, 0);height:68px"
>
<ioninput
id="username"
style="display:flex;border-bottom:1px solid rgb(225, 39, 39)"
label="Username"
labelposition="floating"
type="username"
></ioninput>
</ionitem>
<ionitem
id="passwordItem"
type="default"
style="border-top:1px none rgb(0, 0, 0);border-bottom:1px none rgb(222, 222, 222)"
detail="none"
wraptext="false"
sticky="false"
>
<ioninput
id="password"
style="display:flex;border-bottom:1px solid rgb(225, 39, 39)"
labelposition="floating"
label="Password"
type="password"
></ioninput>
</ionitem>
</ionlist>
Actually, the second ionInput field doesn't show the blue border line but I don't know why
I would try to remove the outline of the ioninput. Just add outline: none to the certain element (in this case ioninput).
Related
so this is the CSS:
.header-inner {
background: url(../images/inner_bg.png), linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat;
}
i want to inline it to make the background a dynamic value with the blade syntax later on, this is what i did but its not showing the image properly:
<div class="header-inner hi-about-us mb-0" style="background: url({{ asset('test-images/inner_bg.png') }}) linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat">
The correct code should be like this:
<div class="header-inner hi-about-us mb-0" style="background: url('{{ asset('test-images/inner_bg.png') }}') linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat">
The URL should be inside single quotes.
You can also try this:
#php
$bgUrl = asset('test-images/inner_bg.png');
#endphp
<div class="header-inner hi-about-us mb-0" style="background: url('{{ $bgUrl }}') linear-gradient(108deg, #001a30, rgba(0, 0, 0, 0)) no-repeat">
You can try this:
style="background: url('{{ asset('test-images/inner_bg.png') }}')
I have a navbar with 3 levels, second level has a color code that correspond to his respective third level
What I'm trying to achieve is when a level is clicked, the background color of the level change to it's left border color ( For example "Réseau" bg should be full blue ) but I can't make it work properly since the levels are rendered with an NgFor* and the color is a variable coming from a switch() function.
If someone could lead me on what I'm doing wrong there I'd really appreciate it. Been trying NgStyle and NgClass but no success yet.
navbar.html
<div class="w-100 text-nowrap">
<nav class="nav nav-tabs w-25 flex-column flex-sm-row reduceHeight40 mainNav">
<input type="submit"
[value]="label_name[first]"
checked
[style.borderColor]="getColors(first)"
class="flex-sm-fill border-top-0 border-right-0 text-nowrap border-left-0 text-sm-center nav-link alu hovAlu"
*ngFor="let first of firstLevel"
(click)="dynamicFilter1(first); ">
</nav>
<div class="container alu dpf navbar-light">
<div class="nav nav-tabs flex-column text-nowrap thirdColor flex-sm-row navbar-light" >
<input [value]="label_name[second]" type="submit"
*ngFor="let second of dynamicLevels1; let index2 = index"
(click)="dynamicFilter2(second);selectedItem = index2;selectedItem2 = null"
[style.borderLeftColor]="getColors(second)"
[ngClass]="{'active': selectedItem === index2}"
class="flex-sm-fill ml-2 reduceHeight25 wdt10 text-sm-center nav-link"
>
</div>
</div>
<div class="container alu dpf navbar-light" *ngIf="ShowImage === false">
<div class="w-100">
<nav *ngIf="ShowTemplate"
class="nav nav-tabs d-flex flex-column ml-1 level3 flex-sm-row navbar-light " >
<input type="button" [value]="label_name[(third)]"
[style.borderColor]="getColors(third)"
class="flex-sm-fill text-nowrap reduceHeight25 smallText border-top-0 border-right-0 borderless border-left-0 wdt10 text-sm-center nav-link"
(click)="dynamicFilter3(third);selectedItem2 = index3"
[ngClass]="{'active': selectedItem2 === index3}"
*ngFor="let third of dynamicLevels2;let index3 = index">
</nav>
</div>
</div>
</div>
switch function
colors: any;
getColors(color) {
this.colors = color;
switch (color) {
case(1):
return 'rgb(0, 118, 172)';
case(2):
case(3):
case(4):
return 'rgb(0, 118, 172)';
case(5):
case(6):
case(7):
return 'rgb(255,185,29)';
case(8):
return 'rgb(3,160,128)';
case(9):
case(10):
case(11):
case(12):
return 'rgb(169,169,169)';
}
}
If you need more code tell me and I'll add it.
Thank's in advance for the help !
I honestly would leave style properties to style sheets alone.
That has several advantages, just to mention some:
let's you easily include colors from defined style guides, which greater business projects usually have
could be reused with mixins
doesn't run into many function calls (https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496)
doesn't let you make syntax error, since your switch-case could return any invalid string
Have an example here:
scss:
$colors-map: (
'1': rgb(0, 118, 172),
'2': rgb(0, 118, 172),
'3': rgb(0, 118, 172),
'4': rgb(0, 118, 172),
'5': rgb(255, 185, 29),
'6': rgb(255, 185, 29),
'7': rgb(255, 185, 29),
'8': rgb(3, 160, 128),
'9': rgb(169, 169, 169),
'10': rgb(169, 169, 169),
'11': rgb(169, 169, 169),
'12': rgb(169, 169, 169)
);
#each $c in map-keys($colors-map) {
.color-#{$c} {
border-left: 5px solid map-get($colors-map, $c);
&.selected {
background-color: map-get($colors-map, $c);
}
}
}
html:
<ng-container *ngFor="let x of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">
<div class="color-{{x}}" [ngClass]="{selected: x === selectedX}" (click)="selectedX = x">
I am element {{ x }}!
</div>
</ng-container>
See stackblitz:
https://stackblitz.com/edit/angular-ivy-thypkb?file=src/app/app.component.ts
Below is my html where i have dropdowns and textboxes along with this in my webpage.The issue is when tabbing from one control to another control all the controls are getting tabbed and highlighted expect the below one.
<div class="cls" id="Col" onclick="Toggle(this);">Highlight me in border</div>
<input type="button" value="Add1" id="btnAdd1" onclick="Add1();" style="width: 120px;" class="newAddNew Tab" />
<input type="button" value="Add2" id="btnAdd2" onclick="Add2();" style="width: 120px;" class="newAddNew Tab" />
css
.Tab:focus{
outline: none;
box-shadow: 0px 0px 5px 2px #61C5FA !important;
}
Been trying to change the dropdown arrow in the topbar of Foundation 6 but no luck with this forum answer.
I do not see those classes in my Foundation 6, so what I did was:
.top-bar .is-dropdown-submenu-parent > a:after {
border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
But still has not change.
HTML (ruby):
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">
<%= image_tag('logo.png', size: '40x40') %>
</li>
<li>
Dashboard
</li>
<li>
Accounts
<ul class="menu vertical">
<li><%= link_to 'Sales', sales_path %></li>
<li><%= link_to 'Inventory', inventory_path %></li>
</ul>
</li>
<li><%= link_to 'Settings', settings_path %></li>
</ul>
</div>
</div>
Please use this:-
.top-bar .is-dropdown-submenu-parent > a:after {
border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)!important;
}
I see you use scss, so you can configure foundation variables to change components view. Here is the list of all available variables. Change $dropdownmenu-arrow-color to set new color to arrow.
It's due CSS Specificity. The "default" Foundaiton selector is
.dropdown.menu > li.is-dropdown-submenu-parent > a::after{}
Notice the first part of the selector, it uses two classes - .dropdown and .menu while your selector uses only .top-bar. And on the second part the li selector is also used. Compare those two CSS selectors with this CSS specificity calculator.
So, use that selector:
.dropdown.menu > li.is-dropdown-submenu-parent > a::after{
border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
Or you can use !important.
I want to find all occurrences of "color: " inside my html below. But problem is that I get one previous character as well selected.
Note: I dont want "background-color:"
Please help
Test link - http://regexr.com/?385gg
HTML
<div id="divSection">
<div class="section-topcurve" style="background-color: rgb(224, 99, 32);">
<div class="app-input" id="Div11" onclick="CellDoubleClick(this,50)" style="color: rgb(156, 117, 156); background-color: rgb(224, 99, 32);">Item 1</div>
"asd-color:rgb(156,2,3);
"color: rgb(156, 117, 156);
<span class="additem">
<a id="Section" href="" onclick="return AddnewItem(this.id);">add item</a>
</span>
</div>
<div class="section-nocurve" id="divSection1390991308640" style="background-color: rgb(189, 114, 73); color: rgb(51, 51, 51);">
<div class="app-input" id="cellSection1390991308640" style="background-color: rgb(189, 114, 73); color: rgb(143, 24, 143);">New Item</div>
</div>
<div class="section-btmcurve" id="divSection1390991552843" style="background-color: rgb(189, 114, 73); color: rgb(143, 24, 143);">
<div class="app-input" id="cellSection1390991552843" style="background-color: rgb(189, 114, 73);">New Item</div>
</div>
</div>
This should do the trick for you:
[\s"](color:\s{0,1}.*?\))
Debuggex Demo