CODEWITHSUNDEEP
javascripthtmlcss
firashelou
firashelou

Reputation: 131

Styling problem with chrome but works fine with Firefox

I have a div which is hidden mainly, it is created with javascript. The problem is that a div is floating right in Firefox but not on chrome as the picture showenter image description here

here is are my codes: CSS:

.broken_image_name_div {
display: inline-block;
position: relative;
width: 510px;
margin-top: 10px;
background: red;

}

and the whole pop up created with javascript:

// Function that pops up report broken feature
function reportBrokenPopup(userFromId) {
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('reportBrokenFeatureBox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5) +"px";
dialogbox.style.top = "150px";
//dialogbox.style.display = "block";
document.getElementById('reportBrokenFeatureBoxhead').innerHTML = "Report a Problem";
document.getElementById('reportBrokenFeatureBoxbody').innerHTML = '<form method="post" action="" class="report_broken_form" id="report_broken_form"><div>Where is the problem?</div><select name="broken_feature_select" class="broken_feature_select" id="broken_feature_select"><option selected>Select a Product</option><option>Comments and suggestions</option><option>Contact Us</option><option>Friend Requests</option><option>Home</option><option>Login form</option><option>Messages or Chat</option><option>Notifications</option><option>Privacy</option><option>Profile</option><option>Search</option><option>Sign up form</option><option>Other</option></select><div class="broken_report_happened">What happened?</div><textarea rows="4" cols="52" name="broken_report_textarea" class="broken_report_textarea" id="broken_report_textarea" placeholder="Briefly explain what happened..."></textarea><div class="broken_detail_error"></div><div class="broken_optional_word">Upload a Screenshot (Optional)</div><div class="broken_upload_div" title="Choose a file to upload"><label for="broken_file_upload"><span class="broken_image_upload_icon"></span><span id="brokenImageUploadWord">Upload Screenshot</span></label><input type="file" name="broken_image" class="broken_file_input" id="broken_file_upload"/></div><div class="broken_image_name_div"></div></form>';
document.getElementById('reportBrokenFeatureBoxfoot').innerHTML = '<input type="submit" name="broken_submit_button" value="Send" class="report_broken_send_button"/><button id="report_broken_cancel_button">Cancel</button>';
$("body").css("overflow", "hidden");
$("#reportBrokenFeatureBox").fadeIn();

$("#broken_file_upload").on("change", function(e){
    var filename = e.target.value.split("\\").pop();
    $(".broken_image_name_div").text(filename);

});

$("#report_broken_cancel_button").on("click", function(){
    $("#reportBrokenFeatureBox").fadeOut();
    $("#dialogoverlay").fadeOut();
    setTimeout(function(){
        $("body").css("overflow", "scroll");
    }, 200);    
});

}

this is a fiddle, but it is not showing the file name after an image is selected ! https://jsfiddle.net/3wafLpto/2/

Upvotes: 0

Views: 55

Answers (1)

firashelou
firashelou

Reputation: 131

I solved it, after look back and force the problem was with the cache ! i had to clear the cache for the page to render well ! thanks for the help

Upvotes: 2

Related Questions