I have a text box with the following html. The id is dynamic and I cannot use it.I fill some text in the text box.
<input type="text" id="117841" class="NEdit" title="MyText" maxlength="20" style="position: absolute; overflow: hidden; font-style: normal; font-weight: normal; font-family: arial; font-size: 12px; text-transform: uppercase; width: 184px; left: 28px; top: 0px; height: 14px;">
There is a Add button and when I click that a New Tab is created. In the new tab, I will have a text box with the same properties above except that a new id is being created.
<input type="text" id="118355" class="NEdit" title="MyText" maxlength="20" style="position: absolute; overflow: hidden; font-style: normal; font-weight: normal; font-family: arial; font-size: 12px; text-transform: uppercase; width: 184px; left: 28px; top: 0px; height: 14px;">
Both the text boxes are on the same page but in different tabs with one being visible and the other not visible. The Tabs show as divs. There is no relationship between the tabs and the fields within them. The Tabs show as below:
<div id="117285" class="NTabTabs" style="position: absolute; overflow: visible; left: 0px; top: 0px; width: 1211px; height: 20px;"><div class="NTabTab" id="117285t0" style="cursor: pointer; position: absolute; overflow: hidden; white-space: pre; text-align: center; left: 2px; top: 2px; width: 101px; height: 16px; padding-top: 1px; border-top-width: 1px; border-top-style: solid; border-left-width: 1px; border-left-style: solid; border-right-width: 1px; border-right-style: solid;">Tab#1</div><div class="NTabActiveTab" id="117285t1" style="cursor: pointer; position: absolute; overflow: visible; white-space: pre; text-align: center; left: 104px; top: 0px; width: 65px; height: 19px; padding-top: 1px; border-top-width: 1px; border-top-style: solid; border-left-width: 1px; border-left-style: solid; border-right-width: 1px; border-right-style: solid;">Tab#2</div></div>
How do I identify these text boxes based on their visibility?
Thank you!
I believe that the best approach is to find some distinguishing property between the two elements. For example, there must at least be something in the HTML that makes one visible and not the other.
However, if that is not an option, I think the only option left is to iterate through all of the possible text fields and take the one that is visible.
For example, in the following page there are two text fields with the first not being visible:
<html>
<body>
<div style="display:none;">
<input type="text" id="1">
</div>
<div>
<input type="text" id="2">
</div>
</body>
</html>
You could use a text field accessor that goes through the text field elements and picks the first visible one.
class MyPage
include PageObject
text_field(:field){ text_field_elements.find(&:visible?) }
end
When the page object is used, you will see that the field_element will be the second text field since it is the one that is visible:
page = MyPage.new(browser)
p page.field_element.attribute('id')
#=> "2"
Note that to keep the example simple, the accessor's block is iterating through all text fields. However, you can pass additional parameters to text_field_elements to be more specific about which text fields to check. For example, the following accessor would find the first visible text field with a specific title:
text_field(:text2){ text_field_elements(:title => 'MyText').find(&:visible) }
Related
i have the following button:-
<button type="submit" disabled style="
position: absolute;
height: 40px;
border: none;
color: #fff;
background: #4d9b84 ;
padding: 0 22px;
cursor: pointer;
border-radius: 30px;
top: 5px;
right: 5px;
font-size: 13px;
font-weight: 500;">
Get My Estimate
</button>
currently the button is disabled, but the button text is not grey out, as follow:-
so can anyone how i can grey out a disabled button?
You should put your CSS styles into a stylesheet rather than directly onto the HTML . Once it's set as a CSS style rule you can then use the :disabled flag to set styles for when that attribute is true.
You can not use the :disabled flag on inline styles.
Inline styles (style='...')will overwrite almost every other CSS style but can only be applied to the element (in this case a <button>) at the instance the element is created. It is not "dynamic" or re-active to events that occur once the page is loaded.
Overall, inline styles are to be avoided!
button.standard {
/* position: absolute;*/
height: 40px;
border: none;
color: #fff;
background: #4d9b84 ;
padding: 0 22px;
cursor: pointer;
border-radius: 30px;
/* top: 5px;
right: 5px;*/
font-size: 13px;
font-weight: 500;
}
button.standard:disabled {
color: #666;
}
<button type="submit" disabled class="standard">Get My Disabled Estimate</button>
<BR><BR>
<button type="submit" class="standard">Get My Live Estimate</button>
I want to represent a text like below image, how can i do this using CSS and HTML?
Custom Text Representation Image
Note: This is not text input field. I just want to display the text.
please try the below code.
<style>
.text-content{
position: relative;
border: 5px solid;
border-radius: 20px;
padding: 20px 0;
}
.text-content span{
position: absolute;
background: #fff;
left: 25px;
top: -18px;
padding: 0 10px;
font-size: 22px;
}
</style>
<h1 class="text-content">
<span>TV NAME</span>
ANDRIOD TV ROOM 1
</h1>
Try this one also. I think it's perfect for you.
fieldset {
width: 500px;
border-radius: 15px;
border: 5px solid #000000;
}
legend {
font-size: 18px;
font-weight: bold;
color: #000000;
}
span {
display: block;
text-align: center;
padding: 20px;
font-size: 22px;
font-weight: bold;
color: #000000;
}
<fieldset>
<legend>TV NAME</legend>
<span>ANDRIOD TV ROOM 1</span>
</fieldset>
You can use The HTML fieldset element:
<fieldset>
<legend>TV NAME</legend>
ANDRIOD TV ROOM 1
</fieldset>
Ok so I got the following:
What I want to do is to make the button which says "Elegir archivos" to be orange like the button that says "Finalizar" and make the text the file-input produces grey like the text which says "Formatos aceptados".
Here's what I tried:
<tr>
<td class="upload-pic"><input class="file-submit" type="file" name="fileUpload" size="50" multiple="multiple"/></td>
</tr>
CSS:
.file-submit {
height: 35px !important;
width: 300px !important;
padding: 5px !important;
font-size: 15px !important;
margin-right: 10px !important;
margin-top: 10px !important;
margin-bottom: 20px !important;
background-color:red;
}
input[type="file"] {
width: 80%;
color: white;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #FD8907;
margin-left: 10px;
float: right;
}
What I want: The button which says "Elegir archivos" has to be orange with its text in white. The text next to it which says "No se eligio archivo" has to be grey with the white background. For some reason everything ends up in a big orange box and the button still looks like the default one.
In order to achieve that, you can wrap the input button with "label", so that label becomes clickable. Then make your input button opacity 0 (transparent).
$('.file-submit').on('change', function(){
$(this).closest('.btn-wrapper').find('span')
.text('FOTOS Formatos aceptados: JPG');
})
.btn-wrapper {
font-family: 'Veranda', sans-serif;
}
.btn-file {
padding: 8px 15px;
background-color: #fd8907;
border-radius: 3px;
color: #fff;
margin-right: 8px;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
.btn-file span {
display: block;
color: #777;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<div class="btn-wrapper">
<label class="btn-file">
Elegir archivos
<input type="file" class="file-submit" name="fileUpload" accept=".jpg" multiple="multiple">
</label>
<span>No se eligio archivo</span>
</div>
</td>
But if you want to change the text after file is selected, you will need some help with javascript or jQuery.
Basically what the problem is, that the browser doesn't know that you want it to be orange. Because your file says that it is a button, it is applying the default HTML button style to it. To clear this, in the CSS, all you have to say is:
tr td input.file-submit {
text-decoration: none;
color: #ffffff;
}
Then, just change the color of the text to #848D95.
There you go. Done.
Hope this helps!!!
I have a text engine that generates HTML/CSS. Below is some text that it generated.
#text516 {
position: absolute;
left: 197px;
top: 168px;
width: 201px;
height: 81px;
visibility: hidden;
z-index: 1;
background-clip: padding-box;
border-style: solid;
border-width: 5px;
border-color: rgb(0, 120, 228);
outline-style: solid;
outline-width: thin;
outline-color: rgb(0, 120, 228);
}
span.text516Font1 {
font-size: 16px;
font-family: "Arial", sans-serif;
color: #010101;
}
<div id="text516" style="width: 201px; height: 81px;">
<a tabindex="1" id="text516anc" style="display:block;height:0px;width:0px;"></a>
<table style="border-collapse:collapse;top:0px;position:absolute; border-spacing:0; width:100%; height:100%">
<tbody>
<tr>
<td style="position: absolute;top:0px;left:0px;box-sizing:border-box;width:100%;vertical-align:top;height:100%;padding:5px">
<div style="height:100%;width:100%;overflow-y:hidden;overflow-x:hidden;">
<p style="margin-left:0px;text-indent:0px;line-height:1.350;margin-top:0px;margin-bottom:0px;text-align:left;" dbg_tag_42="" leglh="1.409" dbg_tag_34.1a="">
<span class="text516Font1" style="position:relative;top:-2px;" dbg_tag_95="">hi my name is matthew and I like pie.
</span></p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Also, here is a JSFiddle Link to see the problem ( Only in IE/Edge )
There are a few things I can do to fix this problem, such as removing the style attribute from the span encapsulating the text. I can also remove the table elements and leave just the p tag, but when left as it is above, the outline always shows regardless of the fact that the outer div is set to be hidden. Is this a bug with the browser, or is it some HTML functionality that I am missing?
I want to keep dollar symbol at beginning of text box. I am able to achieve this using the below code.
It works find in chrome and IE. The dollar symbol goes and sits next to label in firefox. How do i fix this problem? And for aligning the dollar symbol inline with text i use top 2px. Is there a way to better the css code.
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
left: 10px;
position: absolute;
top: 2px;
}
.input-symbol-dollar {
position: relative;
}
.abc-input {
border: 2px solid #c9c9c9;
box-shadow: none;
color: #6b6f72;
font-size: 0.9375rem;
text-transform: none;
width: 100%;
color: #37424a !important;
font-family: "Roboto Regular", sans-serif;
font-size: 16px !important;
font-weight: 400;
height: 42px !important;
padding-left: 17px !important;
display: inline-block !important;
}
label {
color: #37424a;
display: inline-block;
font-family: "Roboto Bold", sans-serif;
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
}
<label for="abcInput" class="abc-label">lable filed </label>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.00"></span>
https://jsfiddle.net/8jdek3zt/5/
It looks like there's a lot of unnecessary code in your example.
Here's a simplified version that works on Chrome, Firefox and IE (not tested in Safari).
span {
display: inline-block;
position: relative;
}
input {
border: 2px solid #c9c9c9;
box-shadow: none;
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
height: 42px;
padding-left: 20px;
}
span::before {
content: "$";
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
<span>
<input placeholder="0.00">
</span>
Here's an explanation of the vertical centering method for the pseudo-element:
Element will not stay centered, especially when re-sizing screen
The reason why this is happening is because the span is an inline element, so it's positioning isn't calculated as you are expecting it to be. The easiest solution would be to set display: block on the <span class="input-symbol-dollar">
As for positioning it in a cleaner way, you could consider making the symbol display block as well, with a height 100% of the input and set the line-height equal to the input height. I've updated your fiddle but the relevant code is below:
https://jsfiddle.net/chzk1qgm/1/
.input-symbol-dollar {
position: relative;
display: block;
}
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
position: absolute;
display: block;
height: 100%;
top: 0;
left: 10px;
line-height: 46px; // height of input + 4px for input border
}
Alternatively, you could just change the span to a div, as a div is a block level element by default. The rest of the styles would remain the same though.
try putting span in div.
<label for="abcInput" class="abc-label">lable filed </label>
<div>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.000">
</span>
</div>
.custom-text{
border: 2px solid #DDD;
width: 100%;
padding: 5px;
}
<div class="custom-text">
<span>$</span>
<input style="border: none;"/>
</div>