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
Related
I want to change the color of an accordion depending on status on the current item in the list.
I want to use something like ng-class="{status: item.status}" (where I have testClass: true)
The problem now is that I can't set the color of the whole accordion heading.
<accordion>
<accordion-group ng-repeat="item in items" class="animate-repeat" is-open="status.open">
<accordion-heading>
<div ng-class="{testClass: true}">
<p>Test</p>
</div>
</accordion-heading>
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="text-content font-size-14">{{item.text}}</div>
</div>
</div>
</div>
</accordion-group>
</accordion>
CSS
.testClass {
background-color: burlywood;
}
Any idea how to solve this?
I found similar problem here, but the solution didn't work for me
https://github.com/angular-ui/bootstrap/issues/3038
fiddle:
http://jsfiddle.net/f8ce1b0w/2/
Apply the class to the 'accordion-group' and then style with css.
HTML
<accordion-group ng-controller='MyAccordionGroupController' class="test" is-open="isopen">
CSS
.panel {
&.test {
& > .panel-heading {
background-color: red;
}
}
}
http://jsfiddle.net/BramG/f8ce1b0w/8/
You'll want to move the applied class higher in the hierarchy:
http://jsfiddle.net/f8ce1b0w/7/
Then your css will look like :
.panel-warning .panel-heading {
//customize your css here
}
The problem is you are placing the test-item inside an item with padding. Instead, place the test-item-class higher up, and then use css to target the items.
If your states will match to Bootstrap states, then you may want the validation class names from here: https://getbootstrap.com/docs/4.0/migration/#panels
(panel-success, panel-info, panel-warning, panel-danger)
These class names are already in your Bootstrap css.
This is the solution to your problem
.test{
background-color: red;
}
.test-parent.panel-default > .panel-heading {
background-color:red;
}
<accordion-group ng-controller='MyAccordionGroupController' is-open="isopen" class="test-parent">
<accordion-heading>
<div class="test">
I can have markup, too!
</div>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
white button
I was trying to make a vertical navbar with a background image. But as I clicked the button, they turned to white. What steps can I take to make them stay white? Like, I've tried primary-outline stuff I searched, but it doesn't work out.
Have you tried to define pseudo classes for your button, link?
/* unvisited link */
a:link {
background-color: #ffffff;
}
/* visited link */
a:visited {
background-color: #ffffff;
}
/* mouse over link */
a:hover {
background-color: #ffffff;
}
/* selected link */
a:active {
background-color: #ffffff;
}
I have solved this myself. It was because there was a fault in my markup. I added inside . But I still don't know why this is wrong. Here's the codepen:
<div class="paintallblack">
<div class="row">
<!--let's row this. Like, 1 md for vertical navbar, 5 md each for the rest -->
<div class="col-md-1 verticalnav">
<div class="nav nav-pills nav-stacked">
<a class="btn" href="#mypic">
A<br>b<br>o<br>u<br>t</a>
<a class="btn" href="#">
P<br>o<br>r<br>t<br>f<br>o<br>l<br>i<br>o</a>
<a class="btn" href="#"> C<br>o<br>n<br>t<br>a<br>c<br>t</a>
</div>
</div>
<div class="col-md-5 col-md-offset-1 leftcontent">
<!--LEFT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
<img id="mypic" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-9/15940460_161286387692018_3963016562080030457_n.jpg?oh=6e79da88fff3df387121a5ac66a7de32&oe=59212A06" alt="mystupidface">
</div>
<div class="col-md-5 rightcontent">
<!--RIGHT PART CONTENTS FOR ABOUT, PORT, AND CONTACT-->
<p>Here I am, struggling to learn web development in order to build my own online magazine one day. Who am I? What do I do? In clear weather, I run. I can write stories, poetries, book reviews, compose musics, draw pictures. But nowadays my priorities
are: run for my health, learn to code, and try to read and write science-fiction as frequent as I can.</p>
</div>
</div>
http://codepen.io/Hertzsprung/pen/JEKxwN.
Bootstrap default style is
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: transparent;
}
Override the style btn-link border-color:#fff; not transparent
Here is
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
border-color: #fff;
}
I want to style the following CSS classes; is there any short styling technique for this?
.test-0 { }
.test-2 { }
.test-3 { }
/* etc. */
I am looking for something like:
.test-%d% { }
I want to dynamically create many test-* classes with different numbers and common styles.
Update
here is my actual situation
<input type="button" value="click" class="button_class" />
<h1 class="ui-widget-header">Question - 1 </h1>
<div class="ui-widget-content">
<div id="form_container-0">
<div class="placeholder">Add your form fields here</div>
<div style="clear: both;"></div>
</div>
</div>
When user click the above button then same structure will clone and append to the end of the form
so the form will be as
<h1 class="ui-widget-header">Question - 1 </h1>
<div class="ui-widget-content">
<div id="form_container-0">
<div class="placeholder">Add your form fields here</div>
</div>
<div id="form_container-1">
<div class="placeholder">Add your form fields here</div>
</div>
</div>
the css class form_container-[%d] will be created dynamically by jquery.
so i want to add style to this class.
also it would be great if you share optimised code for cloning the structure with
different ID.
Please do let me know if you still have doubt.
thanks
You can use an attribute selector.
div[class*='test-'] {...}
I think #Ed W have the right solution BUT I have an extra idea while is not straight forward is shorter than what you have. And will help to make different testing that is waht I think you want... fiddel http://jsfiddle.net/ncubica/2sj9W/
css
.test-1,
.test-2,
.test-3,
.test-4,
.test-5{
color:#F60;
display:block;
}
.test-5{
color:blue
}
html
<span class="test-1">One</span>
<span class="test-2">Two</span>
<span class="test-3">Three</span>
<span class="test-4">Four</span>
<span class="test-5">Five</span>
span five will be in blue color... so you can override the class you want to test and play with it.
Also you can use selectors like
HTML
<div>
<span>I'm pink</span>
<span>I'm pink</span>
<span>I'm pink</span>
<span>I'm pink</span>
<span class="test-1">I'm red</span>
</div>
CSS
div > span{
color:pink;
display:block;
}
div > span.test-1{
color:red;
}
and the last span will be red. I hope this help.
My two cents...
my markup is something like this:
<li class="cont">
<a> Click Here</a>
<form> </form>
</li>
I want to change the background colour of the anchor tag if the form is applied a class for ex: ng-dirty. The form gets applied this class by the angularJs framkework, when that happens I would want to highlight the 'a' tag by changing its background colour.
How can I do this using pure Css(or sass)?
Thanks,
Chris.
There no specific CSS selector for this but you can achieve the desire effect with the combination HTML change & box-direction:reverse;. Write like this:
HTML
<div class="cont">
<form class="ng-dirty">
<input type="text" value="Hi"/>
</form>
<a> Click Here</a>
</div>
CSS
.cont{
display:-moz-box;
display:box;
display:-webkit-box;
box-direction: reverse;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;
}
.cont > *{
display:block;
}
.ng-dirty + a{
background:yellow;
}
Check this http://jsfiddle.net/8YnTw/ it's with pure css.
You could do this really simply with angular:
<a ng-class="{'dirty-class': myForm.$dirty}"> Click Here</a>
<form name="myForm">
</form>
http://jsfiddle.net/XYTcL/
Use the next css should work:
.ng-dirty a {
background-color: red;
}
I need to create inline element to control collapsible element. I've created the following:
<label class="control-label" for="surname">Surname</label>
<div class="controls">
<input type="text" class="input-xlarge" id="surname">
<p class="help-block">Input your surname. <a data-toggle="collapse" data-target="#surname-more">More...</a></p>
<div id="surname-more" class="help-block collapse in">Additional information about surname will be here.</div>
</div>
So, such element is a here. But it looks bad (blue link within grey text). Is there any standard Twitter Bootstrap class, which should be used in such scenario?
Applying the help-block style to the link makes the "More..." text gray, but the link still shows the dark blue color when you hovered over the link.
I would write your own custom style to handle this:
.help-block-link {
color: #999;
}
.help-block-link:hover {
color: #333;
text-decoration: none;
cursor: pointer;
}
<a data-toggle="collapse" data-target="#surname-more" class="help-block-link">More...</a>