Responsive with overflow?

HTML & CSS
, , ,
1

i can use html css and js to achieve the responsive here but i have to use the overflow.
i am using a jquery plugin inside a div and giving overflow:auto so when the screen size increasing it is really annoying so how to resolve this issue.

problem is :

when the screen size is bigger then this div is looking where small since i have given the fixed width and height to apply the overflow property.

http://codepen.io/saiphanid/pen/KrOQkw

2

Which issue? “It is really annoying” is not much of an indication for us to work with.

Do you have a link to the live page where this is happening? If not, can you set up a live example on CodePen or a similar site? Without the code, (and a clear description of the problem), it’s hard to offer any kind of suggestion.

3

problem is :

when the screen size is bigger then this div is looking where small since i have given the fixed width and height to apply the overflow property.

4

that is office work so i cant share the source code of it.

5

Can you create an example of your own that demonstrates the same behavior as the office work?

What does the jQuery plug-in do?

6

http://codepen.io/saiphanid/pen/KrOQkw

7

It looks like you just posted the same CodePen again. That wasn’t very helpful…

I will try again to get new information.

What does the jQuery plug-in do?

What is the name of the jQuery plug-in (so I can look it up on the internet)?

What goes inside #inner? Is that an image of hands on a table?

How big is #inner? There are no CSS styles for it so I must ask.

What is the purpose of #cnt? Is it fluid or does it have a fixed width?

Please help me help you by giving information, if you can.

The problem is probably easy to fix, but first we must understand what the problem is.

8

plugin is handsontable, css is just giving overflow to it and inner also comes from that plugin and that plugin has position as relative.

9

Next helper-bee, please.

1 Like
10

Seems to be this: https://handsontable.com/

However, without more code I’m unable to picture the problem or guess at the solution.

@phani: can you post a working version of the page with any sensitive information removed? Use nonsense data in the table if need be, to produce the same effect you’re seeing which you want fixed. The example in your CodePen doesn’t help, as it isn’t exhibiting the behaviour you describe.

11

I do not know if this is a typo in your CodePens or a carryover from your real code, but…

#plug-in {
    position:relative;
    height:500px;
    width:1295px;   /* WAS MISSPELLED: "with" */
    border:1px solid #ddd;
    resize:both;
}

FYI: the resize property is not well supported.
http://caniuse.com/#search=resize

Finally, unless #cnt has {overflow:hidden} or some other overflow value assigned elsewhere that needs to be overridden, {overflow:auto} is probably useless (it is the default).

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.