I recently used DoodleNerd's CSS Textbox Generator (http://doodlenerd.com/html-control/css-textbox-generator) to make a really sleek looking textbox for my website. I'm familiar with extracting text from forms; I've done it in two main forms:
document.getElementById('field').value
or
driver.findElement(By.id("field")).getCssValue("value")
For some reason, when I use DoodleNerd's textboxes, the values in the box aren't extracted... it's really odd.. I'll include my css and html for reference:
#field {
position: absolute;
left: 33px;
top: 170px;
overflow: visible;
width: 129px;
white-space: nowrap;
text-align: left;
font-family: Comic Sans MS;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(249,249,249);
}
.field {
padding: 0px;
font-size: 15px;
border-width: 5px;
border-color: #CCCCCC;
background-color: #ba6fc5;
color: #f9f9f9;
border-style: inset;
border-radius: 5px;
box-shadow: 4px 2px 5px rgba(66,66,66,.75);
text-shadow: 49px -11px 5px rgba(177,37,37,.0);
}
.field:focus {
outline:none;
}
<div id="field">
<input type="text" value="e.g. '999'" class="field" />
</div>
Thanks a million!
It appears like the value you want is: e.g '999' correct? If so, this should be your JavaScript:
var fieldValue = document.querySelector('.field').value;
It appears like the value you want has the class of field, not the id of field.
If you must use document.getElementById(), you could also do this:
var field = document.getElementById('field');
var value = field.firstElementChild.value;
But I think the first way is probably better.
Related
I have the code which is in this fiddle
.numberCircle {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
display: table;
padding: 10px;
margin-top: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<div class="numberCircle">368585760</div>
Thanks to the one who had this fiddle, I updated it with my changes:, now without adding additional html elements, is it possible to design every single number inside the box to look like this
http://prntscr.com/gi26iz
I was trying to use the css3 first child, 2nd child etc etc but I am not sure what to do.
If you can't change the markup, you can try this with jquery - replacing the contents of the div with each digit wrapped into a span.
See a demo to get you started:
var html = $('.numberCircle')
.text()
.split('').map(function(e){
return "<span>" + e + "</span>";
}).join('');
$('.numberCircle').html(html);
.numberCircle span {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
/*display: table;*/
display: inline-block; /* CHANGED */
padding: 10px;
margin: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numberCircle">368585760</div>
I think the only way to do is use javascript to add styling to each elements. There is no css like :nth-letter
I am trying to write a custom class for angular material button, but there is one issue with that, when I click on the button and move away(minimize or activate another window) from the browser, it fades out or makes it white and when I click on the browser window then it turns to proper shape/color, don't know the reason but how to control this does any one have any idea.
My Css Class:
.DeleteBtn.md-raised {
color: #fff;
background-color: #CC090F;
text-transform: initial;
min-width: 88px;
margin: 6px 0px;
max-width: 8px;
font-size: 12px;
}
.DeleteBtn.md-raised:not([disabled]):hover {
color: #fff;
background-color: #7F0509;
max-width: 10px;
font-size: 12px;
}
<md-button class="md-raised DeleteBtn">Delete</md-button>
You are missing base CSS class for all components .md-button. Here is a working CSS snippet:
.md-button.DeleteBtn.md-raised:not([disabled]).md-focused,.md-button.DeleteBtn.md-raised {
color: #fff;
background-color: #CC090F;
text-transform: initial;
min-width: 88px;
margin: 6px 0px;
max-width: 8px;
font-size: 12px;
}
.md-button.DeleteBtn.md-raised:not([disabled]):hover {
color: #fff;
background-color: #7F0509;
max-width: 10px;
font-size: 12px;
}
I would recommend to read more about <md-button> CSS and follow best practices. Also here is a working example for you:
https://codepen.io/anon/pen/ybdzZJ
Hope that will help you. Good luck :)
I am trying to build a custom input text list. I have an image I would like to use as arrow, so that I can click and show the list of values.
I am also using AngularJS.
The following code does not work as expected. My issue is: I see a black arrow on the left of the yellow arrow when passing over or clicking (otherwise no arrow)
Here's a link to try it (no yellow arrow is shown, but there is some white space on the right of the undesired black arrow): http://jsfiddle.net/wbo3pt9u/
Here's the code.
<input type="text" list="typeL" ng-model="tipo" class="list" placeholder="Type">
<datalist id="typeL">
<option ng-repeat="objectType in objectTypes"
value="{{objectType.typeWorkOfArt}}" } />
</datalist>
</input>
CSS:
.list {
background: url('../images/arrow.png') no-repeat top right;
border-radius: 20px;
width: 160px;
height: 33px;
-webkit-appearance: none;
border: 2px solid #c1c4c6;
line-height: 29px;
cursor: pointer;
font-weight: normal !important;
font-style: italic;
font-size: 1.250em;
padding:0 30px 0 10px !important;
color: #58585A;
overflow: hidden;
margin: 10px;
}
.input {
border-radius: 20px;
width: 160px;
height: 33px;
-webkit-appearance: none;
border: 2px solid #c1c4c6;
line-height: 29px;
cursor: pointer;
font-weight: normal !important;
font-style: italic;
font-size: 1.250em;
padding: 0 1em;
color: #58585A;
margin: 10px;
}
I also tried to use a , which worked correctly: no black arrow and single click. Now that I switched to this element, it does not work. How can I fix it?
Solved by introducing this CSS lines:
input::-webkit-calendar-picker-indicator {
display: none;
}
I want to display tooltip on click of textbox.
What i did is:
CSS:
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
float:right;
text-align:left;
font-size:12px;
position:absolute;
z-index: 1;
}
.input1 {
background: none repeat scroll 0 0 #F8F8F8;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 2px #DFDFDF inset;
clear: left;
min-height: 45px;
position: relative;
}
.textfield {
background: none repeat scroll 0 0 transparent;
border: medium none;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
height: 100%;
line-height: 1em;
margin: 0;
padding: 15px;
width: 100%;
}
.label {
float: left;
line-height: 15px;
margin: 0;
padding: 15px 0;
text-align: right;
width: 26%;
}
JS:
$(function () {
$("#help_form :input").tooltip({
position: "center right",
offset: [-2, 10],
effect: "fade",
opacity: 0.7
});
});
HTML:
<div id="help">
<form id="help_form" class="help_form" action="/me/problem" method="post">
<div class="input1">
<label class="label" for="issuetitle">Title</label>
<input class="textfield" type="text" name="issuetitle" title="must be 100 characters long" />
</div>
</form>
</div>
Actually by setting width of textfield = 30%. We can able to see tooltip. But because of some restriction i don't want want to do it. Is there any other way to do it by using it tooltip comes over textbox.
Thanks in advance.
you can also use jquery for tooltip, like this,
$(function() {
$( document ).tooltip();
});
</script>
And if you want to know more about it then refer this link,
http://jqueryui.com/tooltip/
First you need to have a correct html : put a <style>after your head.
Then you need to load the tooltip plugin you want to call with .tooltip().
Then check for your console and javascript errors.
But maybe you have stripped down your code to post here.
If it's the case, try with a display: block on your .tooltip declaration and check if you can see it.
I'm quite new to angular and I'm trying to get the text from the input field to wrap in the circular div so that the text does not go outside the border. Any help would be greatly appreciated here is my code - thanks!
HTML:
<div ng-app>
Add Information <textarea ng-model ="input" maxlength = "120" class = "textinput" </textarea>
<div class="textcircle">
<span id="text">{{input}}</span>
</div>
</div>
CSS:
.textinput{
height: 15%;
width: 40%;
margin-left: 5px;
}
.textcircle{
width:200px;
height: 200px;
border-radius: 1000px;
border: 1px solid #888080;
box-shadow: 1px 1px 1px 1px;
text-align: center;
font-size: 18px;
font-family: Museo-Sans;
font-weight: 300;
}
#text{
padding: 1em;
text-align: center;
margin-left: 10px;
margin-right: 10px;
display: block;
}
UPDATE - I have changed the HTML/CSS and gotten the text to wrap well around the circle, but if a word is too long it moves outside the circle. Is there a way to limit the length of a word inside the div?
See an example with this fiddle:
http://jsfiddle.net/Gj7tL/16/
This should work!
http://jsfiddle.net/D2TL3/
Basically needed to change <span> to a <div> for text wrapping purposes. Created an inner circle for #text to wrap with.
Good Luck!
this has nothing to do with angular itself, it can be done by css:
.textcircle{
width:200px;
height: 200px;
border-radius: 1000px;
border: 1px solid #888080;
box-shadow: 1px 1px 1px 1px;
text-align: center;
font-size: 18px;
font-family: Museo-Sans;
font-weight: 300;
overflow: hidden;
}
I´ve just added the "overflow: hidden" in your css class.
http://jsfiddle.net/gztR6/
Not really an angular question (as that part seems to be working fine), more about CSS.
try this:
#text {
display: block;
padding: 0 30px
}
Filling text in a circular area with CSS is definitely an inexact science.