how can I bind a style when I don't know what is it ? I've a model with a string variable that define a style, for example:
myStyle1:string="margin-left:10px";
myStyle2:string="margin-right:5px";
how can bind these two variable to a div ?
follow doesn't work:
<div [style]="myStyle1"></div> <div [style]="myStyle2"></div>
As per my knowledge you can do like this
HTML:
<div [ngStyle]="myStyle1"></div> <div [ngStyle]="myStyle2"></div>
Code:
myStyle1={'margin-left':'10px'};
myStyle2={'margin-right':'5px'};
That work, you need transform string to object and string must be json format.
<div [ngStyle]="myStyle1"></div> <div [ngStyle]="getStyle()"></div>
Style:string="{"margin-right":"10px"}";
getStyle(){
return (JSON.parse(this.Style));
}
Related
I need to provide fxLayoutGap value in variable instead of directly number. Below code for your reference:
ex: fivepix = '5px';
<div fxLayoutGap="5px"></div>
<div fxLayoutGap="fivepix"></div>
Like above can we declare it?
Yes, this is possible.
You must initialize a value in your component.ts:
ngOnInit() {
this.fivepix = "5px"
}
Then use Template Expressions in your component.html like this:
<div [fxLayoutGap]="fivepix"></div>
I've read around a little bit and have a good start to what I ultimately want. This was helpful, along with another article which I forgot the link to. However, everything I've read ADDS a CSS class or property to an element. I want to CHANGE a property of an existing CSS class, but I don't know how to target it.
I think I want to use ng-class in one of these use cases taken from the Angular documentation:
If the expression evaluates to a string, the string should be one or more space-delimited class names.
If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.
My existing code uses ng-class along with some controller logic.
HTML
<div ng-controller="ngToggle">
<div ng-class="{'inset-gray-border' : style}">
<div class="subcontainer" ng-click="toggleStyle()">{{item.name}}</div>
</div>
</div>
This currently adds the inset-gray-border class to the nested div, but I just want to change the border property in the subcontainer class.
Controller
angular.module('app').controller('ngToggle', ['$scope', function($scope) {
$scope.style = false;
$scope.toggleStyle = function() {
$scope.style = $scope.style === false ? true: false;
};
}]);
I considered using a directive, but I believe that would be overkill. I think this can be achieved in a controller.
EDIT: After further research I think jQLite can do the trick, but that would probably require a directive.
CHANGE a property of an existing CSS class
Add a css rule that does that using the new class you added using ng-class. The specificity will over ride the original rule
.subcontainer{
color : blue
}
.inset-gray-border .subcontainer{
color:red
}
Instead of a big toggleStyle function, you can write that stuff in UI side only.
Here is fiddle. As you want to change border property of .subcontainer, Overwrite that property by adding .insert-gray-border
<div ng-controller="ngToggle">
<div >
<div ng-class="{'subcontainer':true,'inset-gray-border' : style}" ng-click="style=!style">{{item.name}}</div>
</div>
</div>
The benifit of this is , it uses local scope instead of controller scope.
The best bet would be to have two CSS classes defined, one for the base (untoggled) case, another with all the properties that you want for when the property is toggled on.
In this case you may want something like:
.container .subcontainer {}
.container .subcontainer-bordered { border: solid 1px #123456}
Then your HTML code be updated to reflect this structure
<div ng-controller="ngToggle">
<div class="container">
<div class="subcontainer" ng-class="{'subcontainer-bordered': style}" ng-click="style = !style">{{item.name}}</div>
</div>
</div>
In my model I have a field type string called god_type.
Example:
Ice,Fire
Ranged,Cannon
Fire,Ranged
I'm going to be using Isotope to filter these models based on their god_type.
I need the output HTML to look like:
<div class="item Fire Ranged">
</div>
Here's what I've tried:
#gods-list.isotope-container
- for god in #gods
.item class='#{god.god_type.split(",").each { |c| c }}'
a href='#{god_path(god)}' class='god'
img src='#{god.thumbnail.url(:thumb)}'
h2= god.name
And the resulting HTML:
<div class="item ["Fire", "Ranged"]">
...
</div>
What am I doing wrong?
I'd suggest:
.item class='#{god.god_type.gsub(/\,/, " ")}'
You could also wrap it in a method, within a decorator, or directly in the model, or even an application helper. Here's a general idea:
class God
def god_type_classes
god_type.gsub(/\,/, " ").downcase
end
end
# your view
.item class='#{god.god_type_classes}'
Noticed I've used .downcase on the string. This is just to address standard CSS naming (should be item fire ranged).
I have all these divs with an identical ID name except for the fact that they all have a different number at the end.
I know I can use a class but it must be an ID.
<div id="myid1">text</div>
<div id="myid2">text</div>
<div id="myid3">text</div>
<div id="myid4">text</div>
<div id="test1">text</div>
<div id="test2">text</div>
My question is using css how can I select them all but shorter than this .
#myid1,#myid2,#myid3,#myid4{
color:red;
}
Does this type of thing exist and if so how do you write it?
myid1[*]{
color:red;
}
Just use the prefix attribute selector
[id^="myid"] {
}
This selector targets any element with an ID attribute that has the prefix "myid" - quotes around the value are optional. This selector works in IE7 & above as well.
you can use begins with this attr selector.
[id^=myid] {
color:red;
}
DEMO
CSS3 should help here:
div[id^="myid"]
AND
div[id^="test"]
Yes, there's a way
<div id="myid1" class="foo">text</div>
<div id="myid2" class="foo">text</div>
<div id="myid3" class="foo">text</div>
<div id="myid4" class="foo">text</div>
<div id="test1">text</div>
<div id="test2">text</div>
and css
.foo { color:red; }
UPDATE
If those have to be IDs, try with [id^=myid]
I think it would work a lot better for you to use classes as incremental ids goes against HTML and general programming principles. You could rewrite it like so:
<div class="myid" data-id="1">text</div>
<div class="myid" data-id="2">text</div>
However, if you must keep the ids as they are, you can use the attribute selector:
[id^=myid] {
color: red;
}
In your case this would do it:
[id=^"myid"] {
//your rules
}
That selects all elements whose id attribute begins with "myid".
You're not limited to the id attribute though. In fact, you could use any other html element's attribute.
Let's say you wanted to select all <a> tags whose "href" attribute begun with "http://stackoverflow.com". The following would do it:
a[href=^"http://stackoverflow.com"] {}
There's really a ton of options. Instead of pointing them out myself I'll you link to the w3 page where all of it is detailed: http://www.w3.org/TR/selectors/#attribute-selectors
use classes in addition to the ids (if you really need the ids):
<div class="mytext" id="myid1">text</div>
<div class="mytext" id="myid2">text</div>
<div class="mytext" id="myid3">text</div>
<div class="mytext" id="myid4">text</div>
<div id="test1">text</div>
<div id="test2">text</div>
then the CSS is simple:
div.mytext {
color: red;
}
I want to put an if condition, when id="prog_bg" or class="progress_box_bg" is present then execute the remaining code. DOM is as below,
<div id="wizard">
<div class="quote_header">
<div class="items">
<div id="top-line" style="display: block;">
<div class="back_box">
<div class="progress_box">
<div id="prog_bg" class="progress_box_bg" style="width: 75px;"></div>
</div>
</div>
<div id="service-div" class="page" style="padding-top:45px; >">
<div id="propertytype-div" class="page">
I tried with lots of option but it won't work . Guys let me know how do it?
if (var.equals(driver.findElement(By.tagName("body")).getText().contains("prog_bg")))
try { if (selenium.getHtmlSource().matches("^[\\s\\S]*prog_bg[\\s\\S]*$")) break; } catch (Exception e) {};
if(driver.getPageSource().matches("^[\\s\\S]*prog_bg[\\s\\S]*$"))
if(driver.findElement(By.id("prog_bg")).isDisplayed())
if (driver.findElement(By.className("progress_box_bg")).isDisplayed())
Thanks,
Sachin
You could also try something like this.
// Find element by id
boolean isElementPresent = driver.findElement(By.id("prog_id"));
// Find element by class
boolean isElementPresent = driver.findElement(By.className("progress_box_bg"));
//This writes out an errormessage if isElementPresent equals false, good for reports!
Assert.assertTrue("Could not find the element", isElementPresent);
Could you try something like this? You can replace Assert with if()
boolean ispresent= driver.findElement(By.cssSelector("BODY")).getText().matches("^[\\s\\S]*prog_bg:[\\s\\S]*$");//TODO: Make this dynamic
Assert.assertEquals(true, ispresent);
boolean ispresent= driver.findElement(By.id("prog_id"))
Assert.assertEquals(true, ispresent);
Numbers 4 and 5 are on the right track. However, you should not be calling isDisplayed() if you just want to check its presence in the DOM. isDisplayed() checks the element presence in the DOM and then checks to see if the element is visible to the user.
Instead, you should just try to find the element itself:
if(driver.findElement(By.id("prog_bg")) || driver.findElement(By.className("progress_box_bg")) {
/*Execute code here*/
}
Also, please note that element attributes do not appear in the text of the page's body, the only appear in the DOM. Any attempts to find these elements like you do in numbers 1, 2, and 3 are completely futile.