I am trying to make the front end for a very simple chat box using javascript, css, and html.
I have a element overflow issue when user resizes the window, if the chat is greater than 12 messages, the messages overflow from the container.
I made a jsfiddle so you guys can try for yourself: https://jsfiddle.net/fb72uwwq/6/
In the fiddle, click the chat button and spam messages, resize your browser and you can see they overflow.
I tried some stack overflow answers but overflow: hidden; did not work. How can I solve this?
css
#chat{
height: 100% !important;
overflow-y: hidden;
/* if you want to scroll on overflow, you can use overflow-y: scroll; or overflow-y: auto; */
}
Setting height to 100% should resolve the issue.
c.style.height = "100%";
overflow: hidden will not work because you're not placing the messages inside the container at all. Instead, you're stacking them with absolute positioning and calculated bottom-margin as its sibling. With your current markup, there's no way to cut off the messages at top, unless you also want to calculate that by hand.
Also, your question is not very clear: do you want to stop adding messages once it's outside the container or you just want to crop them off the screen (but they'd still be visible in the DOM).
Either way, your current structure can be much improved if you create it the following way:
<div id=chat>
<input type=text id=chat-message>
<div class=message>First message</div>
<div class=message>Second message</div>
<div class=message>Third message</div>
</div>
This way, all you have to do to make them appear like you want it to use Flexbox:
#chat {
display: flex;
flex-direction: column-reverse; /* from bottom to top */
}
Your JavaScript will also be much simpler, since you'll just be creating a new element as the last child of #chat, meaning no additional calculations. (You can still remove the oldest messages after a certain amount of messages have appeared on the screen).
Related
I'm trying to synchronize the scrolling between two separate panels / divs.
One element has overflow: auto while the other has overflow: hidden (sort of trying to replicate a grid with frozen columns).
I can sync the scroll when the event happens within the element with overflow: auto but not the one with overflow: hidden (which is sort of normal if you ask me).
However, is there a workaround for this? I want to synchronize the scrolling both ways.
Here's a fiddle that will illustrate my issue (try scrolling in both panels): http://jsfiddle.net/0zzbkyqg/
Also, this thing seems to happen here already: http://demos.telerik.com/kendo-ui/grid/frozen-columns but I just can't understand how they're doing it.
Maybe you should make use of the wheel event which is triggered when you roll the mouse wheel, regardless of whether the section of the view has scrolled or not.
Demo
$("#panel-left > table").on('wheel', function (e) {
// your logic here
}
I'm thinking you don't need jQuery to do that.
Look here: http://jsfiddle.net/ty0jyr4y/
I've removed the position: absolute and overflow properties from the panels and added float: left to make them inline (could also use display: inline-block), and added height: 400px, width: 417px and overflow: auto to the container.
The container's width is set to 417px instead of 400px because the scroll bar takes 17 pixels of space (across all browsers according to here).
Works beautifully. Is this what you want?
I want to hide scrollbar to appear on a long div,but still able to scroll through mouse or keyboard arrow keys.I read another thread here about scrollable.Tried to use that..but could not implement that...could someone guide me how to implement that clearly or is there any other option with jquery or css?
Any help would be greatly appreciated.
Thanks
I'm not 100% sure on the browser compatibility of this, but you can have two div's - an outer div and a inner div. The inner div will have all your content. Your css could then look like this:
#outer {
width: 200px;
height: 200px;
overflow:hidden;
}
#inner {
height: 200px;
width: 225px;
overflow: scroll;
}
That is, the inner block would be wide enough to contain a scrollbar, but have it hidden from sight by the containing div. This worked for me in webkit. You might have to fiddle with the widths to make sure text doesn't get cut off.
That said, I would carefully think about WHY you're trying to do this. This could be a huge usability issue for your users, as they will not have any indication that there is more content within the div.
To do this is add the following css
.div::-webkit-scrollbar {
display: none;
}
This is saying that hey remove the display of the scroll bar but keep the functionality
I'm using a fixed width body and auto margins to center my content in the middle of the page. When the content exceeds the page's height and the browser adds a scrollbar, the auto margins force the content to jump half the width of the scrollbar left.
Is comparing outerHeight with window.innerHeight an appropriate way of solving this? Is there another way to solve this?
I think this should be enough info for the problem, but let me know if I can answer anything else.
Edit for clarification: I don't want to force the scrollbar to appear.
I'll just leave this link here because it seems an elegant solution to me:
https://aykevl.nl/2014/09/fix-jumping-scrollbar
What he does is add this css:
#media screen and (min-width: 960px) {
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
}
This will move the content to the left just the size of the scrollbar, so when it appears the content is already moved. This works for centered content with overflow: auto; applied to the html tag. The media query disables this for mobile phones, as its very obvious the difference in margin widths.
You can see an example here:
http://codepen.io/anon/pen/NPgbKP
I've run into this problem myself and I've found two ways to solve it:
Always force the scrollbar to be present:
body { overflow-y: scroll; } Setting it on the html doesn't work in all browsers or might give double scroll bars if the scrollbar does appear.
Add a class that adds ~30 pixels to the right margin of your page if there is no scrollbar.
I've chosen option 1 but I'm not sure if it works in all browsers (especially the older ones).
Facebook uses option 2.
Use this CSS:
body { overflow-y: scroll; }
You can force the scrollbar to always appear:
http://www.mediacollege.com/internet/css/scroll-always.html
The process is :
html {
overflow-y: scroll !important;
}
This will show the scrollbar even there no need any scroll bar.
Best possible way through CSS, It will show/hide Scrollbar accordingly, will
solve jump problem, works on every browser
html {
overflow: hidden;
}
body {
overflow-y: auto;
-webkit-overflow-scrolling:touch;
}
For me, the solution was to add this rule to the body:
body {
overflow-anchor: none;
}
This rule was added recently, and aims to reduce the variability of browsers having different default assumptions about how they should react to overflowing. Chrome, for example, has overflow anchoring enabled by default, whereas Firefox does not. Setting this property will force both browsers to behave the same way.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
I have two layout elements lets say one is 33%, the other 66%. They both use 100% of my screen size (So it is dependent on browser window). The smaller element also has a min-size property, so it cant fall below 250px;
Now if the layout is at least 757px large (so the size where the min property doesn't apply) everything looks fine. If the layout falls below the 757px the second element starts to overflow since it still takes the 66%, so the sum of both layouts exceeds the 100%.
I made some graphics to show the behavior:
Layout 1000px not overflowing:
Layout 500px overflowing
Is there a solution to prevent the overflow (not overflow: hidden) so the second element takes only the remaining space when the first element reaches it's min width.
Also JavaScript shouldn't be used excessive!
Regards, Stefan
Sure, this is actually pretty easy and requires a very minimal amount of code:
HTML:
<div class="sidebar">
...
</div>
<div class="content">
...
</div>
CSS:
.sidebar{
float: left;
width: 33%;
}
.content {
overflow: hidden; /* Ensures that your content will not overlap the sidebar */
}
You can view the live demo here: http://jsfiddle.net/7A4Tj/
Edit:
If you're trying to achieve a site layout that has equal-height background images for the sidebar and content, all you need to do is wrap both those elements in a containing div and use the Faux Columns technique.
Try using the following for the second widget:
position: fixed;
right: 0;
Here´s my five cents
min-width on both divs
and a wrapper that also has min-width, plus both of the divs having percentage width
JS fiddle code
PS seems to be working fine in IE8
PPS Also do check out #media queries if you want to have conditional CSS rules on different window sizes, might be helpful. Will run on browsers supporting CSS3: CSS Media queries at CSS Tricks
I have a set of divs like so:
<div id="textArea">
<div id="text"></div>
</div>
CSS properties:
#textArea {
height: auto !important;
min-height: 2em;
overflow: hidden;
}
#text{
display: none;
}
I'm filling in the div with the id of "text" with error messages coming back from a POST request using jQuery. The size of the data coming back is not static, but my problem is that the div is not adjusting.
I am basically trying to mimic the Ruby on Rails default flash message that will push divs further down the page with a dynamically adjusted div.
I think you are simply doing too much - A div should automatically expand to fit the text content inside it, unless you have a specific rule saying otherwise. Do you have a rule that specifies a height for all divs? Is that why you have the height: auto !important here? Are you using a reset stylesheet? Something external to these rules is affecting your divs.
Hope that this points you the right way.
Div's should update height and width automatically unless otherwise told to. What is your jQuery code to update the div? What are you using to reveal the div to the browser (since it's currently set to display:none)? Have you tried using firebug to inspect the elements?