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.
Related
I've a wrapper that takes the 100% of the page, and within the wrapper a set of some images (now they are 5, but they'll eventually become 10 or more) which I'd like to randomly place and resize so to fit the wrapper.
<div id="wrapper">
<img src="images/body/cervello.png" id="image" class="brain" />
<img src="images/body/chiappe.png" id="image" class="booty" />
<img src="images/body/cuore.png" id="image" class="heart" />
<img src="images/body/denti.png" id="image" class="teeth" />
<img src="images/body/mano.png" id="image" class="hand" />
<img src="images/body/orecchio.png" id="image" class="ear" />
</div>
body, html {
height: 100%;
}
#wrapper {
height: 100%;
margin: 0px auto;
overflow: hidden;
}
I'm very much a newbie to coding, so not yet able to write my own JS..though I've found this code on a JSFiddle that supposedly does what I need to do (at least for the placement, not for the resizing).
The other problem is indeed trying to calculate the full size of the window and making sure that the resizing of all the images can be accordingly, so to not have them overlapping, getting too big/small etc..
This is pretty much what I'd like to achieve, but with images instead of bubbles..
I hope I've explained somehow what I'd like to achieve..I've tried to be as clear as possible so to help you with understanding my goal :)
Thanks very much in advance for your time!
How can I add md-icon elements next to inputs like in angular material 1 and this screenshot from google contacts:
Google contacts edit form
I know I can use mdPrefix but I like this style better.
Code example:
<md-input-container>
<md-icon mdPrefix>star</md-icon>
<input placeholder="Test" mdInput />
</md-input-container>
The icon inside the input field and I'd like it to be next to it:
Using some css tricks, I was able make something close to the the provided screenshot.
css to position icons:
/deep/ .mat-icon {
color: grey;
width: 24px;
margin: 20px 40px 0 0;
}
html:
<div style="display: flex">
<md-icon >email</md-icon>
<md-input-container >
<input mdInput placeholder="Email">
</md-input-container>
</div>
Code example
Can i use image sprites for my form submit button, tried a few things but nothing seems to work.
.button, .download, .OK, .file{
background: url(app/sprites.png) no-repeat;
}
.button{
background-position: -1px -212px ;
width: 170px;
height: 30px;
}
My form
<form action="add.php" method="post" value="Username">
<div style="float:left; margin-left:15px;"><input type="text" name="fbid" required></div>
<div style="float:left; margin-left:2px;"><input type="submit" value="Submit"></form>
Right now you are missing a class on the input.
<input type="submit" class="button" value="Submit">
With that it'll work.
I put it into a jsFiddle, using a different image because I don't have access to yours. You can play with the position, in incriments of 32px.
jsfiddle.net/CzWCv
Have you tried
<div class="button" style="float:left; margin-left:2px;"><input type="submit"
value="Submit"></form>
??
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">
I've got this form:
<form id="imageinputpopup" class=suggestionsubmit style="display: none">
<span>Add a thing!</span><br/>
<label>url: </label><input name="imageurl" type="url"><br/>
<label>file: </label><input name="imagefile" type="file"><br/>
<input type='hidden' name='schoolid' class="schoolid">
<input type="submit" value="Submit">
</form>
And this document.ready:
<script type="text/javascript">
$(document).ready(function() {
$('.schoolid').val(get_gmap_value('school_id'));
$(".allow-submission").live('click', function(){
if($(this).attr('inputtype')=="colorpicker"){
.....
} else if($(this).attr('inputtype')=="image"){
remove_hidden("#imageinputpopup");
add_fieldname($(this), $("#imageinputpopup"));
$("#imageinputpopup").dialog();
} else if($(this).attr('inputtype')=="text"){
....
} else {
//nothing
}
});
$(".suggestionsubmit").submit(function(){
event.preventDefault();
alert($(this).html());
$(this).ajaxSubmit({
url: '/save-school-suggestion/',
type: 'post',
success: function(response){
response = jQuery.parseJSON(response);
// Check for login redirect.
// if ( response.requireLogin ) {
// alert('Sign up or log in to save your answer');
// } else {
$('.suggestionsubmit').dialog('close');
// }
}
});
});
});
function add_fieldname(element, addto){
var elementname = document.createElement('input');
elementname.type = 'hidden';
elementname.name = 'fieldname';
elementname.value = element.attr('fieldname').replace(' ', '_');
$(elementname).addClass('fieldname');
addto.append(elementname);
}
function remove_hidden(element){
$(element+' .fieldname').remove();
}
But the file field isn't showing up server side.
Why?
I found this in the documentation:
Why aren't all my input values posted?
jQuery form serialization aheres closely to the HTML spec. Only successful controls are valid for submission.
But I don't understand why my file control would be invalid.
I have another submission form in a different place on my site that is almost identical and works perfectly...
EDIT: this is the other form that does work (it has some extra stuff in it, but the form tag just has an id, like the problem one, and the input tags are the same).
<form id="photos-submission-form6">
<input type="hidden" name="section" value="photos">
<input type="hidden" name="school" id="photos-submit-school6">
<div style="margin-bottom: .5em">
<p style="position: relative; width:80%; font-size: 14px; display: inline" id="photos-anonymity-header6">Post as: null</p>
<img id="helpicon6" src="/static/img/help-icon.png" style="float: right; cursor: pointer; padding-left:1em;">
<div id="explanation6" style="display: none; padding:1em; background-color:white; border:2px solid gray; position: absolute;z-index:30; right:5px; top:5px">For more posting options, <a id="profilelink6" href="/profile/">fill out your profile</a></div>
</div>
<div id="photos-anonymity-select6" style="margin-bottom: .75em; width:412px" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%; "></a></div>
<input type="hidden" id="photos-anonymity-level6" name="anonymity-level" value="username">
<span style="line-height: 40px;">
<label class="photouploadlabel">URL</label><input type="text" name="image-url" style="width: 335px"><br>
<label class="photouploadlabel">File</label><input type="file" name="image-file" style="width: 335px"><br>
<label class="photouploadlabel">Caption</label><input type="text" id="image-caption6" name="image-caption" style="width: 335px; color: rgb(128, 128, 128); ">
</span>
<div style="height: 30px; margin-top: 1em; width: 413px;">
<label id="photos-tagsbutton6" style="margin-right: .5em; cursor: pointer; vertical-align: bottom; float:left; line-height: 1.8em;">Tags</label>
<input id="photos-tagsinput6" style="display: none;" type="text" name="tags">
<button id="send-photos-suggestion6" disabled="" style="float:right; position: relative; bottom: 7px; right: -4px;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only" role="button" aria-disabled="true"><span class="ui-button-text">Post</span></button>
</div>
</form>
This is probably not the case but are sure there are no spelling mistake server side? like you would be using $_FILE instead of $_FILES? Could you post the relevant php also?
Also, definitely not an issue but it is recommended to close your input tags, now like this:
<input ... />
Add enctype="multipart/form-data" attribute to your form.
Try to change the type of the input imageurl from url to text:
FROM:
<label>url: </label><input name="imageurl" type="url"><br/>
TO:
<label>url: </label><input name="imageurl" type="text"><br/>
I am not sure, but maybe the jquery plugin fails serializing the form due to invalid type attribute of image_url.
Hey you just forgot to add ---> enctype="multipart/form-data" in the form tag. This will help you out.
I think you have a problem with the binding in javascript not recognising your file.
Try binding your submit trigger event with another live() function
i.e. change
$(".suggestionsubmit").submit(mooFar(e));
to
$(".suggestionsubmit").live('submit', mooFar(e));
...........I was looking in the wrong place in the request for the file.
Server side should have been:
if not s.url_field and 'imagefile' in request.FILES:
s.image_field = request.FILES['imagefile']
instead of
s.image_field = request.POST.get('imagefile', None)
Complete and utter fail on my part.
Make sure the files you're testing aren't outside the max file size, it would be worth setting this in your HTML.
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
Also, testing without the display:none might be worth while until you have the form working; which browser are you testing in?