I'm trying to hide a <br> using CSS alone:
br[some-label="1"] {
display: none!important;
}
<p>
Paragraph 1 with non-hidden
<br> br
</p>
<p>
Paragraph 2 with hidden
<br some-label="1"> br
</p>
I have also tried .p + br[some-label="1"]{...}.
Unfortunately, I only have limited control over the HTML and so can't add labels, id, classes etc to the elements to hide them.
Any suggestions on a way to hide the <br> element with a particular attribute value would be appreciated.
Related
I am currently editing my login page and I found that my bootstrap icon is not align as username.It supposed to be center but now it is slightly up in the username box field. how to edit to be center.
Secondly, how to set if the first time reload to the page, the icon not displayed until I start to type username.
<h3 class="form-title">Login to your account</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
</div>
<div class="form-group has-feedback" ng-class="loginForm.username.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="username">Username</label>
<input type="text" class="form-control" id="username" name="username"
ng-model="input.username" required>
<span class="glyphicon form-control-feedback"
ng-class="loginForm.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
my login page
for (I am currently editing my login page and I found that my bootstrap icon is not align as username.It supposed to be center but now it is slightly up in the username box field. how to edit to be center.)
you can set it just by padding-top or padding-bottom
for (Secondly, how to set if the first time reload to the page, the icon not displayed until I start to type username.)
you have to add JavaScript for Input on focus add css opacity 1. and by default add css opacity 0. refer below code.
CSS - .your-container-class .glyphicon { opacity: 0;}
JS - $("#username").focusin(function() {
$("#username").siblings(".glyphicon").css( "opacity", "1" );
});
You can use css to adjust element alignments (in this case the icons) by adjusting it's margin using:
.your-container-class .glyphicon {
margin-top: 15px;
}
Be sure to wrap your form to a div with a class or id to avoid all glyphicon being styled throughout your application :-)
My html:
<div id="contentDiv">
<div id="headerDiv" ><div id="titleDiv"> Queries</div></div>
<div id="valuesDiv" ><div id="yearDiv"> 2015</div></div>
<div id="graphDiv" ><div id="chartDiv">graph</div></div>
</div>
Like this div, I have another div but the content in the div is different.
How to add a new div horizontally when I click on hyperlink using angularjs?
How can I do this? please help me out regarding this
Looks like what you need is a two way binding with the ng-model directive. So the idea would be that you bind the new div to a variable in your scope which is initially in an empty or undefined state (for example, there are better ways). When the hyperlink is clicked it calls the function specified by an ng-click directive which will fill your bound object, which in turn will cause the new div to be rendered.
EDIT:
Based on your comments here is a simple example.
HTML page:
<div id="newDiv" ng-repeat="item in items">
<!-- Div content -->
<!-- example -->
<input type="text" ng-model="item.name">
</div>
<input type="button" ng-click="addItem()">
Controller:
$scope.items=[];
$scope.addItem = function() {
var newItem = {};
newItem.name = "new item name";
$scope.items.push(newItem);
}
What's happening here is the data for each div is stored in an array of objects. The ng-repeat directive will repeat the div for each object in the array. You can then fill the elements in the div using the object. Adding a new div is as simple as adding a new item to the array and angular will take care of the rest for you. Please note that I have not tested this example, but hopefully it's enough to point you in the right direction.
RE aligning the divs horizontally, this will be done with CSS, using the inline-block display mode. So you could give the div a class of, for example, "horizontalDiv" and add the following class to your CSS file:
.horizontalDiv {
display: inline-block;
}
I've been tinkering around a bit with AngularJS and the Ionic framework. Now I would like to display 12 buttons inside a popup. I have this all working, but I would like the buttons to switch appearance when they got pressed.
html
<label>
<p>Fill in catergory name</p>
<input type="text" placeholder="Rent">
</label>
<br />
<br />
<div class="row">
<div class="col col-25"><button class="button button-outline" id="button12in" ng-class="button12 ? 'button12in' : 'button12inpress'" ng-click="button12 = !button12">
</div>
</div>
As you can see I've been trying with button 12.
app.js
$scope.button12 = false;
css
#button12in {background-color: #51FF00;}
#button12inpress{border-style: solid; border-color: black; border-width: 4px;background-color: #51FF00;}
So the idea is that clicking on the button will change the state of $scope.button12. The result of this would be that via the ng-class the button will change style! but for some reason, this is not possible. It picks up the changed state of button12 but the ng-class isn't working in all kinds of syntax I've tried
I think it should be
ng-class="{'class': trueOrFalse}"
To apply different classes when different expressions evaluate to true:
<div ng-class="{class1 : expression1, class2 : expression2}">
Hello World!
</div>
To apply multiple classes when an expression holds true:
<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
Hello World!
</div>
or quite simply:
<div ng-class="{'class1 class2' : expression1}">
Hello World!
</div>
Notice the single quotes surrounding css classes.
or check this Adding multiple class using ng-class
Don't use your flag directly on $scope , but rather try setting the flag on an object on $scope
Example
Use $scope.flagContainer.button12 instead of $scope.button12
$scope.flagContainer = {
button12 : false
}
Now change it view accordingly
For every element in ng-repeat I need to display an icon with it.That is for each div a different icon should be displayed depending on the content.What is the right way to go about it?
Here is the code:
<div class="overview">
<i class="fa fa-{{}}"></i>
<div class="overflow-h padding-top" ng-repeat="attributes in places.attributes">
{{attributes.name}}
</div>
</div>
For every attribute a different icon should be displayed.
In this example, I've used FontAwesome icons and added a class based on the value of an object attribute.
<div ng-repeat='row in data'>
<i class='fa fa-{{row.icon}}'></i>
</div>
This will generate a div having the icon specified in the row.icon attribute. For the mapping between names and icons you can consult the FontAwesome site.
I am quite used to seeing
div.class1
and
#someId.class1
but what about
.class1.class2
? And I think it is identical to
.class2.class1
? Because there was an element with id someId but now we have two elements of this type showing on the page, so I want to add a class and use the class instead of id, therefore the .class1.class2 instead of #someId.class1
It will select items with both classes. So not items with either one.
<span class="class1 class2"></span>
Yes, it is both legal and common. In the element, you would have something like this:
<div class="class1 class2">Hello</div>
It's nice for syntactic styling. To give you an example, let's say you have the following html:
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
You can add a second (and third, forth, etc.) class that modifies "box". For example:
<div class="first odd box">
</div>
<div class="second even box">
</div>
<div class="third odd box">
</div>
<div class="fourth even box">
</div>
Then, in styling, to style different box groups, you can do the following:
.odd.box {
}
.first.box, .fourth.box {
}
.first.box, .even.box {
}
This will be interpreted by the browser if you give your element does two class:
.class1.class2{width:500px;height:300px;}
<div class="class1 class2"> </div>
If you do like this, it will not be interpreted, resulting on a div with no styles:
.class1.class2{width:500px;height:300px;}
<div class="class2"> </div>
This will be interpreted (resulting on an element with a dimension of 500px X 300px:
.class1 {width:500px;}
.class2 {height:300px;}
<div class="class1 class2"> </div>
The common use of css, is to tell the browser that a certain element with and ID or CLASS of a certain name will get a set of styles, or tell the browser that a certain ID or CLASS will get a set of Styles, like so:
Ex 1:
.class1 {width:500px;} -> elements
with this class will get 500px of
width.
Ex 2:
div.class1 {width:500px;}
-> only a
div element with this class will get
500px of width.
Ex 3:
div.class1, h1.class1 {width:500px;}
-> only a div and a h1 element with this class will get 500px of width.
You can read valid information about css at:
W3C CSS SYNTAX PAGE
Just wanted to confirm the answer given by Jouke van der Maas,
which is the right answer. I would like to quote the following
excerpt from the CSS 2.1 specification:
5.2 Selector syntax
A simple selector is either a type selector or universal selector
followed immediately by zero or more attribute selectors, ID
selectors, or pseudo-classes, in any order. The simple selector
matches if all of its components match. [snip]
Since the .classname selector is equivalent to the [class="classname"] selector,
it is an attribute selector. Note the "in any order" bit. Hence the selector
.class1.class2
is identical to the selector
.class1.class2
and matches both elements like
<span class="class1 class2">Hello World</span>
as well as
<span class="class2 class1">Hello World</span>
which is the same thing, as well as
<span class="class1 class2 class3">Hello World</span>
etc...
You can also get even more fancy.