I have the following HTML:
<p style=""><span style="font-family: Arial;"><font style=""><span style="font-size: 16px; color: rgb(255, 0, 0);">This is red 3.</span> <strong style=""><span style="color: rgb(0, 176, 80);"><font size="7">And this is green 7</font></span></strong>.</font></span></p>\r\n<p style=""><span style="font-family: Arial;"><font style="" size="5"><strong style="">This is bolded 5</strong></font></span></p>\r\n<p style=""><span style="font-family: Arial;"><font style="" size="5"><strong style="font-size: 16px; color: blue;">BlueTEXT</strong></font></span></p>\r\nClick Me
For some reason, this isn't displaying correctly in Quilljs. It seems that the font elements aren't taking. I created a stackblitz to demonstrate this: https://stackblitz.com/edit/angular-ivy-c4feuv?file=src/app/app.component.ts
Font elements are no longer supported in HTML5, which would explain why Quilljs does not support them. The going wisdom is that they should be avoided because some browsers already don't support them.
https://www.w3schools.com/tags/tag_font.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font
In this case, the source of the font element should be changed to use style tags instead.
Related
Is there a way to find this element (in the picture) using css, preferably containing text Internal ID?
<td _ngcontent-ese-c273="" style="text-align: left; left: auto; cursor: auto;" data-x="0">
<case-header-cell _ngcontent-ese-c273="" _nghost-ese-c287="">Internal ID</case-header-cell></td>
Hi Need to select "New South Wales" using By.xpath() any suggestions please?
This is a reactjs page jedwatson.github.io/react-select
<div class="Select-control">
<span class="Select-multi-value-wrapper" id="react-select-2--value">
<div class="Select-value State-NSW">
<span class="Select-value-label" role="option" aria-selected="true" id="react-select-2--value-item">New South Wales</span>
</div>
<div class="Select-input" style="display: inline-block;">
<input role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-2--value" value="" style="width: 5px; box-sizing: content-box;">
<div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; letter-spacing: normal;"></div>
</div>
</span>
<span class="Select-clear-zone" title="Clear value" aria-label="Clear value">
<span class="Select-clear">×</span>
</span>
<span class="Select-arrow-zone">
<span class="Select-arrow"></span>
</span>
</div>
Tried with the below code without success
driver.findElement(By.xpath("//input[#role='combobox'][#value='New York"']")).click();;
Below exception was observed
org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"xpath","selector":"//input[#role='combobox'][#value='New York']"}
(Session info: chrome=59.0.3071.86)
Please follow the below step to select your desired element
Click on the down arrow of dropdown
Select the desired option
Here is the code for same :
driver.findElement(By.xpath("//h3[contains(text(),'States')]/..//span[#class='Select-arrow']")).click();
driver.findElement(By.id("react-select-2--option-1")).click();
Updated
Use the below method to select the value dynamically based on text :
public void selectCombo(String valueText)
{
driver.findElement(By.xpath("//h3[contains(text(),'States')]/..//span[#class='Select-arrow']")).click();
WebElement dropdownValue = driver.findElement(By.xpath("//div[contains(text(),'"+valueText+"')]"));
dropdownValue.click();
}
Call this method from your code and pass the value which you want to select
e.g.
new TestClass().selectCombo("Tasmania");
You can try with the xpath //*[#role="option" and text()='New South Wales']
i saw this in a angularJS App:
Maybe he's drawing borders?? Any ideas how i could do this properly?
The color should be changeable.
I made a plunker where you can change the color of the dot with ngStyle, please take a look at it.
Using ngStyle you can also change the background-color within a controller.
HTML code:
<body ng-app="">
<input type="button" value="change color to blue" ng-click="myStyle={'background-color':'blue'}">
<input type="button" value="change color to red" ng-click="myStyle={'background-color':'red'}">
<div class="circle" ng-style="myStyle"></div>
</body>
CSS code:
.circle {
height: 20px;
width: 20px;
background-color: red;
border-radius: 10px;
}
All ,
I am using ng-table for the Grid. I am using following code snippet to set the column .
<td data-title="'Access ID'" sortable="'accessID'" style="width:120px" class="text-center">{{people.accessID}}</td>
But I am not able to center align the Column Header but column data.
Here is the source code snippet for Access ID Header.
<th ng-repeat="column in $columns" ng-class="{ 'sortable': parse(column.sortable), 'sort-asc': params.sorting()[parse(column.sortable)]=='asc', 'sort-desc': params.sorting()[parse(column.sortable)]=='desc' }" ng-click="sortBy(column, $event)" ng-show="column.show(this)" ng-init="template=column.headerTemplateURL(this)" class="header sortable"> <!-- ngIf: !template --><div ng-if="!template" ng-show="!template" ng-bind="parse(column.title)" class="ng-binding ng-scope">Access ID</div><!-- end ngIf: !template --> <!-- ngIf: template --> </th>
Question is , How to center align the Header for a particular column in ng-table?
The answer submitted by #OpenUserX03 is almost perfect, except you have to wrap the class name in single quotes, like so:
<td data-title="'Access ID'" sortable="'accessID'" style="width:120px" class="text-center" header-class="'text-center'">{{people.accessID}}</td>
You can use the header-class attribute to set the class for - you guessed it - the header.
<td data-title="'Access ID'" sortable="'accessID'" style="width:120px" class="text-center" header-class="text-center">{{people.accessID}}</td>
i used to have the same issue how to align left my ng-table headers.
on the documentation of ng-table it does not say anything nor at the examples.
you have two ways to do this the fast and the more 'professional'
fast way:
open files ng-table/dist/ng-table.css and ng-table.min.css, according on which css file you use.
on the first line it manages the header,
.ng-table th {
text-align: center;/*just change that parameter to left/right*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
'professional' way: create a custom style and add it to your website css file ,like this :
.table thead th {
text-align: left;/*change that parameter to left/right*/
}
Hope helps, good luck.
To anyone who still has this issue, also OP, since he has not yet accepted an answer, this is how I do it. in your css (any .css)
table[ng-table] th {
text-align: left;
border-top: none;
}
Fix for ngTable
For those seeing this a year later. None of the above solutions worked for me. I added this to a custom css file:
.ng-table th {
text-align: center !important;
}
Which centered the content in the header (see images)
From this:
To this:
table .text-center {
text-align: center;
}
JSFiddle http://jsfiddle.net/BrTzg/411/
Is there a way to do that manually ? I was trying to use Ionic Framework, they had an attribute for that but is deprecated now.
By Facebook's/WhatsApp's search box I mean:
1 - Hidden at first sigh
2 - If you want to see it you have to pull down
3 - Once you focus on it, it extends up to the top of the screen and overlaps the header
4 - Has a button which is an X to delete the content of the search box and other button named "Cancel" to close the search box.
Pretty sure everyone has notice that behavior already.
So, what are the techniques to implement it ?
I am using Angular so I do not know if there is a way to do a Directive, or just with css ? what are your suggestions ?
something like this
it would be too time consuming for me to realize the all thing. but is not so difficoult if you are familiar with " transitions " in css3.
here is a "lite version"
var searchbox={
topPos_open:0, topPos_close:-50, isOpen:false,
open:function(){
var box=document.getElementById("searchbox");
box.style.top=this.topPos_open+"px";
document.getElementById("searchfield").focus();
this.isOpen=true;
},
close:function(){
var box=document.getElementById("searchbox");
box.style.top=this.topPos_close+"px";
this.isOpen=false;
},
pop:function(){
!this.isOpen?this.open():this.close();
},
clear:function(){
document.getElementById("searchfield").value="";
}
}
#searchbox{position:fixed; top:-50px; left:0px; width:100%; height:60px; background-color:rgba(135, 206, 235, 1); -webkit-transition:top 0.5s ease 0s; -moz-transition:top 0.5s ease 0s; transition:top 0.5s ease 0s;}
#searchbox input{border:0px none; margin:0px 10px 0px 10px; padding:0px; width:80%; font-size:20px;}
#searchbox #input{float:left; background-color:rgba(255, 255, 255, 1); border:1px solid #dddddd; border-radius:20px; margin:5px; padding:5px; width:70%; min-width:250px;}
#searchbox #close{float:right; padding:10px:}
#searchbox button{border:0px none; background-color:transparent; font-size:20px; cursor:pointer;}
#searchbox #dots{clear:both; text-align:center; font-size:25px; cursor:pointer;}
<div id="searchbox">
<div id="input">
<input type="text" id="searchfield" value="">
<button type="button" onclick="searchbox.clear()">
X
</button>
</div>
<div id="close">
<button type="button" onclick="searchbox.close()">
Cancel
</button></div>
<div id="dots" onclick="searchbox.pop()">
......
</div>
</div>
<br>
<br>
<br>
<br>
Click the dots