Getting a resolution error on Chrome and Firefox for C9 app. Not sure how to resolve


Tags: javascript,jquery,html,css,screen-resolution

Problem :

Okay, I'm having an issue regrading screen size resolution and I have no idea how to go about it because I'm still not completely sure what the issue is. So, I am designing a Voting App that allows people to create a poll and then vote on it. The page where users cast a vote is where I am having an issue. The page looks like below at 1024 x 768 resolutionThis is the screenshot of the app at 1024 x 768

When the page is at the resolution mentioned above, I can't click on any of the radio buttons or the submit button. However, when I resize the window to 800 x 600, I can click on the radio buttons fine.

Also, when I submit my option, I create a chart based on the polls. The chart displays fine when the screen resolution is 800 x 600. Screenshot is below

Screenshot of app with graph

If I resize the above screenshot to anything above 800 x 600, to say 1024 x 600, the graph overlaps the radio buttons. Screenshot for that is below

Overlapping screenshot

Why is this happening? The app was working fine a few hours ago, and nothing was changed between then and now. I am using Bootstrap and CSS for styling my elements. I am including the CSS code below

.custom-div{
    display:none;
}
.col-md-10{
    height:auto;
    min-height:500px;
}
.ChartDiv{
    width:500px;
    height:400px;
    float:right;
    margin-top:-250px;
    position:relative;
}
#myChart{
    height:300px;
    width:400px;
    padding:0;
    margin:auto;
    display: block;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.submit-wrapper{
    clear:both;
    display:block;
    margin-top:20px;
}


Solution :

Instead of using class ChartDiv why don't you use bootstrap class col-sm-6 and put all the contents inside a div in it.


    CSS Howto..

    HTML CSS How to swap css attributes

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?

    how to fire a jquery child function at the start of parent animation

    How to create shaded divs like this with CSS

    What is the best CSS trick to reduce how much HTML you need?

    How to make stylish pageviews counter using html and css? [closed]

    How to create a 3 column layout in css?

    How can I vertically align the text in an anchor tag?

    How to make a text or html tag look like a button

    Footer Showing White Bar on only one page of website

    How to center a navigation bar properly? [closed]

    How to align div elements while using css tables

    How to prevent (bootstrap) fixed top navigation from zooming on mobile

    Django Allauth - How to add custom css class to fields?

    How to use a different stylesheet for iphone or android?

    How to fill vertical spaces between tiles in a grid system (Using CSS)

    How to set the universal CSS selector with JavaScript?

    How do I align something in a in the top-left corner - without aligning everything?

    How to embed a font in website

    How to change logo in php header when change the header js class and CSS

    How to fade multiple background colors after few seconds? [duplicate]

    How to apply CSS locally on any online page?

    How to use center-block and vertical align together using Bootstrap?

    How do I get the background image to not repeat and take up the entire section?

    jquery style sheet switcher - how to effect only theme css?

    How to preload large css and javascript files in vanilla javascript

    How to create the block with round corners, which consists of three parts: top, content, bottom?

    How can I force browsers to print background images in CSS?

    How to display a div over other containts of an html page?

    How can I make this HTML5 canvas progress bar fill from the bottom up instead of the top down?