We have an HTML5 application (<!DOCTYPE html>) with Twitter Bootstrap and various other JavaScript libraries (including jQuery) - all running on their current versions.
The page contains a text input with the autofocus attribute set.
<input type="text" autofocus="autofocus" />
The page contains more than one 'screen' of content, meaning there will always be a vertical scrollbar on the page. The text input is located within the first 'fold' of the page, approx. 250px from the top of the page.
On Chrome, Safari and Opera the page works as expected. When the page loads, the element is on screen and focused.
On FireFox (current version - 18.0.1) the element has focus, but the page has scrolled to 1533px (determined via window.pageYOffset). The same page with differing lengths of content will always scroll to the same position, and the element will be rendered offscreen.
There is definitely only one element with the autofocus attribute set ($("[autofocus]").length).
Removing the autofocus attribute from the element does not cause the page to scroll at all (i.e. the page remains scrolled to the top - as expected).
Can anyone offer any help or insight?
Things we've tried
The following test works correctly:
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div style="height: 200px">
<h1>Test</h1>
</div>
<div style="height: 2000px">
test
<br />
<input autofocus type="text" />
</div>
</body>
</html>
We've recently retried this with Firefox and can't replicate the issue.
Closing...
You need css code to say this:
.focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
}
Then the text input code to be this:
<input class="form-control focusedInput" type="text">
Related
I have an html fragment that looks like this:
<style>
.r {
display: flex;
}
.d-flex {
display: flex;
align-items: center;
}
</style>
<div class="r">
<input type="radio" disabled="disabled" value="1">
<div class="d-flex">
<span class="answernumber">1) </span>
<div class="answer"><p>One</p></div>
</div>
</div>
When I render this in a browser the radio button, the "1)" and the "One" are all aligned nicely. But when I render this html in a pdf the radio button is not aligned with the text. I have tried multiple alternative style definitions for the classes r, d-flex, answernumber and answer and also for the input[type="radio"] and every time it looks good in a browser, the result is no good in the pdf.
Interestingly, check boxes work just fine. Is there a way to get the html to render in the pdf aligned? Or is this something that needs to be fixed inside iText?
The html inside the div.answer may be much more complex and I have no control over it as it is delivered to me by an external system, so I am limited as to what I can do with the html. What I am in control over, is the style definitions and any configurations to be done to iText (perhaps some ConverterProperties).
I have a form in a div where I brought submit buttons out of the div to another part of the screen. This works nicely. However, I want to lock that div down to a specific size and relative position and use overflow:auto so when it grows too big (the form has elements that are unhidden with checkboxes) the entire screen doesn't scroll, just the div. The problem is, as soon as I add the overflow style, the submit boxes I moved off the div are hidden. I assume this is because with overflow all elements are locked into that div and scroll bars allow you to access them, but in this case the elements are moved left:-500px and it doesn't even give me a scroll bar to scroll left to see them. Basic code follows:
<div class="div1">
<div class="div2">
<form>
<input type="submit" class="sub1" />
</form>
</div>
</div>`
CSS would be:
div.div1 {
position:relative;
width:1000px;
margin: 0 auto;
}
div.div2 {
width:500px;
height:500px;
position:absolute;
top:125px;
left:500px;
}
input[type=submit].sub1 {
position:absolute;
left: -500px;
}
So this works, but as soon as I change the div2 css to:
div.div2 {
width:500px;
height:500px;
position:absolute;
top:125px;
left:500px;
overflow:auto;
}
The submit button disappears.
My question: is there any way to get the scrollbar and keep the div2 container to 500px high without losing the elements outside the div?
If I understand correctly, you can move div2 within the form and leave the submit button outside of div2. That way, the submit button will always be visible and div2 can have overflow.
<div class="div1">
<form>
<div class="div2">
<!-- form fields go here -->
</div>
<input type="submit" class="sub1" />
</form>
</div>
Note: You'll likely need to adjust styles on the button, but I'm not entirely sure about your end goal.
My html Code i have a button
<input class="search hidden" id="search_button" type="submit" value="Search" style="display: block;"></input>
when i clicked in Button many items is generated like this :
<div id="search_results" class="" style="display: block; left: 522.083px; top: 459.617px; width: 398px;">
<img alt="Load-circle" class="load-circle" src=".../123">
<div id="app_341446764" class="search-result"><img src=".../DictationIcon.png">abc</div>
<div id="app_561941526" class="search-result"><img src=".../Icon.png">def</div>
</div>
i have many div with class search-result i don't know how to click one of them(class="search-result") anyone suggest me a solution.
Ideally you would add a unique id as #juan-manuel-rodulfo-salcedo suggested. However, if you can't do that then you could find all the divs with class=search-result. Below is an example of how to click the second div on the page:
page.all('.search-result')[1].click
For more examples of how to select multiple elements, see this SO answer.
I am currently working with a page that has a few hidden divs, being called on to be displayed later.
This is the code I have on the page itself causing the problem.
<div align="center" id="check">
Block of plain text right here.<br />
Checking...<br />
<img src="http://sw6.us/template/images/loading.gif" /><br />
<?php
require("databasetest.php");
?>
echo "check_data shown";
</div>
This code here is what I have modifying the "check" div on a style page
.check {
padding-top: 25px;
padding-left: 0px;
color: white;
align: center;
display:none;
}
As you can see the div is instructed to be hidden on page load via the style code. Everything is hidden except for the picture.
I don't believe the PHP is the issue because I included an echo displaying text which is properly hidden along with the HTML before it. I also took out that require command and the image was still not hidden. The image being a .GIF is not the issue either, I have tried using a .png and got the same problem!
Thanks for the help! It is greatly appreciated!
I made some changes to one of my web pages (CSS and HTML) and now Firefox is not rendering this textarea properly. It has a sort of jitter effect happening in the middle of the top line. I'm not sure if it has anything to do with the changes I made, but what could be causing this?
<div id="CommentForm">
<form action="/posts/add-comment" method="post">
<input type="hidden" id="Table_Name" name="Table_Name" value="Posts" />
<input type="hidden" id="Table_ID" name="Table_ID" value="47" />
<input type="hidden" id="IsLiveBroadcast" name="IsLiveBroadcast" value="1" />
<textarea name="Comment_Body" id="Comment_Body" rows="1"></textarea>
<div id="error-messages"></div>
<input type="submit" class="floatRight" id="postComment" value="Post your response" />
</form>
<div class="clear"></div>
</div>
And the CSS being applied:
#live_broadcast_post #CommentForm {
margin: 0;
padding: 0;
width: 460px;
height: auto;
background: none;
}
#live_broadcast_post #CommentForm textarea {
font-family: "Lucida Grande",Verdana,"Bitstream Vera Sans",Arial,sans-serif;
font-size: 12px;
padding: 5px;
width: 98%;
}
The strange thing is that this wasn't happening before I made the changes, and now it only affects Firefox, not any other browser I have tested.
Update:
I noticed that when the page loads, it renders correctly. Only after an iframe (also on this page) is finished loading does the rendering change.
Seeing as even the text itself is affected, this looks rather like a OS / graphics card / rendering problem.
I would try it on a different machine first before questioning the markup.
I've been seeing this jitter in some websites, not with Firefox only.
Probably graphics rendering (cards) related.