I'm trying to style the input field of the select box that materialize css creates. I'm using the angular 2 materialize directive. This is what my html looks like:
<div class="input-field col s12">
<select id="property-selector" materialize="material_select" name="propertySelector">
<option class="property-option">Address 1, 1000AA Amsterdam, The Netherlands</option>
</select>
</div>
This is what the scss looks like:
#property-selector-card {
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-weight: 500;
color: #118073;
font-size: 17pt;
div.select-wrapper {
.select-wrapper input.select-dropdown {
border-bottom: none !important;
}
}
}
This generates the following html in the browser:
<div _ngcontent-kld-6="" class="card-panel row" id="property-selector-card">
<div _ngcontent-kld-6="" class="input-field col s12">
<div class="select-wrapper initialized"><span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-95a42e27-1c84-d800-0534-aaaaeb70c462" value="Address 1, 1000AA Amsterdam, The Netherlands"><ul id="select-options-95a42e27-1c84-d800-0534-aaaaeb70c462" class="dropdown-content select-dropdown "><li class=""><span>Address 1, 1000AA Amsterdam, The Netherlands</span></li></ul>
<select _ngcontent-kld-6="" id="property-selector" materialize="material_select" name="propertySelector" ng-reflect-materialize="material_select" class="initialized"
<option _ngcontent-kld-6="" class="property-option">Address 1, 1000AA Amsterdam, The Netherlands</option>
</select></div>
</div>
</div>
Now, I'm having issues overriding the border-bottom style (that I don't want). The selector that I use in scss does not seem to respond.
I've been able to adjust the font by setting it on a parent element, but I get stuck with the select-wrapper element that the materialize js generates and the css selector I use gets overriden as well it seems.
Any idea how to effectively style the input element?
I had the same issue. In my case, I was trying to add the style in the component.style.css file and it did not have any effect, then I tried by adding it to main style.css and it worked.
I think in your case, instead of using id, use class name to traverse through and set style.
.custom-select {
div.select-wrapper {
.select-wrapper input.select-dropdown {
border-bottom: none !important;
}
}
}
and give the classname to the outermost div of select element
<div class="input-field col s12 custom-select">
<select id="property-selector" materialize="material_select" name="propertySelector">
<option class="property-option">Address 1, 1000AA Amsterdam, The Netherlands</option>
</select>
</div>
Related
I'm using a date input with bootstrap-datepicker to show a calendar for the user to pick a date. I'm trying to change the background and head's color, and it is not working
Here is my HTML code:
<div class="row mb-1">
<label class="col-lg-4 col-form-label col-form-label-sm"
for="time">End Date</label>
<div class="col-lg-8 form-group">
<input id="endDate" type="text" placeholder="To" class="form-
control" bsDatepicker
[bsConfig]="{ adaptivePosition: true, dateInputFormat:'YYYY-MM-D
D' }" [(ngModel)]="selectedEndDate"
(ngModelChange)="updateMyEndDate($event)" [ngModelOptions]="
{standalone: true}">
</div>
</div>
I tried to change the color using those lines of code but didn't work:
.bs-datepicker-head,
.bs-datepicker-head, .bs-datepicker button:active,
.bs-datepicker-body table td span.selected,
.bs-datepicker-body table td.selected span,
.bs-datepicker-body table td span[class*="select-"]:after,
.bs-datepicker-body table td[class*="select-"] span:after,
.bs-datepicker-body table td.active-week span:hover
{
background-color: rgb(35, 87, 185) !important;
}
.bs-datepicker-body table td.week span
{
color: #6e8f88 !important;
}
Any tips to make it work ?
Component styles normally apply only to the HTML in the component's own template.
Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule.
If you do the datepicker styles in the style.css for example, I often have to use the /deep/, ::ng-deep or >>> modifiers. In your case that would be ::ng-deep .bs-datepicker-head,
You might also look at theming bootstrap
"Many of Bootstrap’s various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets."
I'm trying out an angular application where user can select themes from a dropdown and change the appearance of the application using this tutorial
I'm using :host-context
But the themes is not loading and i'm not sure what is wrong in it.
Below is the code
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div [ngClass]="theme">
<nav class="navbar fixed-top navbar-light justify-content-center headerColor">
<a class="navbar-brand" href="#">Socxo Themes</a>
</nav>
<div class="content">
<div class="row topClass">
<div class="col">
<select name="seletTheme" [(ngModel)]="theme" (change)="setTheme(theme)">
<option value="default">Default</option>
<option value="one">Theme 1</option>
<option value="two">Theme 2</option>
</select>
</div>
</div>
</div>
</div>
app.component.ts
export class AppComponent {
title = 'app';
theme = "default";
setTheme(themeName:string)
{
this.theme=themeName;
}
}
I'm first trying to themes the navbar
below is the app.component.css
#import "./app.component.1.css";
#import "./app.component.2.css";
#import "./app.component.3.css";
.content{
margin-top:55px;
text-align: center;
}
.topClass{
margin-top:70px;
}
.headerColor{
border:1px solid;
}
In ./app.component.1,2,3.css i have added the css for themes as below
:host-context(.one).headerColor{
background-color: chocolate;
}
:host-context(.two).headerColor{
background-color: chocolate;
}
:host-context(.default).headerColor{
background-color: chocolate;
}
on selecting a option from select the theme variable value changes but the corresponding class doesn't load
Can anybody guide me..
Use of :host-context() is to apply styles to outside host elements. According to the documentation:
:host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root
In your case you are trying to apply a style to an element inside the same component. You can do this by doing the following,
Create a nav component and move your nav bar code to that.
Put your theme styles of nav component inside that component's style sheet
`#import "../app.component.1.css";
#import "../app.component.1.css";
#import "../app.component.2.css";`
Change your appComponent.html like following,
<div [ngClass]="theme">
<nav-comp></nav-comp>
<div class="content">
<div class="row topClass">
<div class="col">
<select name="seletTheme" [(ngModel)]="theme" (change)="setTheme(theme)">
<option value="default">Default</option>
<option value="one">Theme 1</option>
<option value="two">Theme 2</option>
</select>
</div>
</div>
</div>
</div>
now your code will work with :host-context(), but remember the space after the function otherwise it won't work :host-context(.one) .headerColor. You don't have a space after your function in the above code.
If you only want to change the color of the nav bar by this, you can simply change all your theme style sheets like following,
.one .headerColor{
background-color: chocolate;
}
.two .headerColor{
background-color: chocolate;
}
.default .headerColor{
background-color: chocolate;
}
The solution to your problem is below:
Steps:
Add data member to the class:
classNames="default";
Add the host in the component decorator as below:
#Component({
//Here you need to add host after template property
host:{
'[class]' : 'classNames'
}
})
After that change your setTheme function to as below:
setTheme(themeName:string)
{
//here changing the host (classNames) dynamically
this.classNames=themeName;
this.theme=themeName;
}
Is there a way to change the default styles of AngularJs search box?
<div ng-controller="PersonListCtrl">
<div class="bar">Search:
<input ng-model="query">
</div>
<ul class="" ng-show="query">
<li ng-repeat="person in persons | filter:query">{{person.name}}</li>
</ul>
</div>
</div>
I would like to change the colour and size of the search box and perhaps change the text colour. I've messed around in the CSS but it doesn't seem to be effecting anything.
I've tried
#bar {
background-color: #d7d7d7;
color:#000000;
}
and
.bar{
background-color: #d7d7d7;
color:#000000;
}
AngularJS does not introduces any styles as far as I know. You need to assign the id or the class to the HTML element:
<input ng-model="query" id="bar">
or
<input ng-model="query" class="bar">
You're currently targeting the wrapper of the input, you could just use
.bar input {
instead
Im using Ruby on Rails 4 with twitter bootstrap to display a form_for (twitter bs form_horizontal). The styling below works correctly (label, input and hint display next to each other ) for normal fields (non error'd) when rails wraps elements in the field_with_errors div however the hint is dropped to the beneath the input element.
<div class="control-group required">
<div class="field_with_errors"><label class="control-label" for="lot_commonname_id">Common Name</label></div>
<div class="controls">
<div class="field_with_errors"><select id="lot_commonname_id" name="lot[commonname_id]"><option value="">Please select</option>
<option value="1">x</option>
<option value="2">y</option>
<option value="3">z</option>
</select>
</div>
<div class="hint">
<a href="#" rel="tooltip" data-original-title="xyz test.">
<i class="icon-info-sign"></i>
</a>
</div>
</div>
</div>
.field_with_errors {
#extend .control-group;
#extend .error;
}
.form-horizontal .field_with_errors
{
margin: 0;
}
.form-horizontal .field_with_errors:before, .form-horizontal .field_with_errors::after
{
display: block;
clear: none;
}
the following jsfiddle http://jsfiddle.net/a78B5/6/ demos the problem
Divs default to display:block so it will naturally drop down to be below your input. Add styling to use display:inline or display:inline-block and it will move back to being next to your text box.
Why do select option form elements change style when the form is submitted?
HTML:
<div ng-controller="TestController">
<form name="test" ng-submit="formSubmit()">
<select name="selectFormItem" ng-options="selectFormItemValue.value as selectFormItemValue.text for selectFormItemValue in selectFormItemValues" ng-required="true" ng-model="testModel" class="selectStyle">
<option value=""></option>
</select>
<button id="testSubmit" type="submit">Submit</button>
</form>
<br/><br/>
<span>{{selectFormItemValues}}</span>
<br/><br/>
</div>
JS:
function TestController($scope) {
$scope.selectFormItemValues = [{'value':0, 'text':'value0'}, {'value':1, 'text':'value1'}];
$scope.formSubmit = function formSubmit() {
alert("dummySubmit!");
}
}
CSS:
body {
font-family: Helvetica;
font-size: 14px;
}
.selectStyle {
padding: 5px;
width: 150px;
}
JSFiddle: http://jsfiddle.net/nEzpS/22/
I noticed it happens when "required" is set on select form member.
EDIT:
Tested in Chrome versions: 23.0.1271.97, 24.0.1312.52
This appears to be a bug with certain versions of Chrome, since the issue does not present in other browsers.