[alex5252Participant]

I have styled a text box to have just the text in that box scroll on the homepage this website. fawnridgerealty.com
its the green and blue box boxes. if your browser width is about 1000px you’ll see it scroll.

I did it by coding it as follows

#sellersText {
height: set defined height;
overflow: scroll;
visibility: hidden;
}

#sellersText p {
visibility: visible;
}

On this site it works.

However on https://marckdesignconcepts.com/youronlinedesignpro/meet-the-designer/
the text under “Hello I’m Lori” doesn’t scroll unless the parent element is set to visible, but setting the parent element to visible means that the scrollbars are visible.

I don’t understand why this behaves differently between these two sites. The only thing I can think of is it has something to do with the stacks we chose, that somehow they behave differently, however I checked this too and they are both integrity.

[alex5252Participant]

This reply has been marked as private.

[RupokMember]

Hi there,

There is enough space to show all the text it should not scroll like that way. You can set a width/max-width and enable overflow scroll like this :

#helloTEXT p {
  overflow: scroll;
  width: 500px;
}

Hope this makes sense.

[alex5252Participant]

I don’t think you understood my question at all. Let me try to rephrase.

On https://marckdesignconcepts.com/youronlinedesignpro/meet-the-designer/ in need the text to scroll.
I need to scroll because the picture to the left of it needs to stay at a fixed height.
The picture needs to stay at a fixed height because as the browser resizes the text, having less horizontal space, will compensate by becoming taller.
However the picture, which must also go all the way from top to bottom, will respond to the increase in height by becoming wider. However this would only compound the issue of horizontal space with the text.

Therefore the text must be able to scroll.
However if you apply overflow: scroll; to an element it shows an ugly scroll bar.

On the homepage of fawnridgerealty.com there is a blue box and a green box.
They scroll but they don’t have a visible scroll bar.
I was able to achieve this by applying visibility: hidden; to the same element I applied overflow: scroll;
I was able to scroll without seeing the scroll bar.
Additionally I had to apply visibility: visible; on that element’s children so they didn’t inherit visibility: hidden;

However on https://marckdesignconcepts.com/youronlinedesignpro/meet-the-designer/ this is not working.
It only scrolls if visibility:hidden; IS NOT applied.

Therefore my question in its simplest form is Why do these stye yield the desired result on one website, but not the other.

they are both x-theme.
both integrity stack
both have defined heights.
I have either made the following the same or determined they make no difference.
-position
-display
-the hidden parent having only one child

With all of these similarities I find it difficult to explain why the scroll works on fawnridge.com but NOT on
https://marckdesignconcepts.com/youronlinedesignpro/meet-the-designer/.

I want to know if they’re some discrepancies in the theme JS files in their respective themes, or some other reason that is causing them to behave differently.

I hope this made more sense.

[RupokMember]

Hi there,

Thanks for explaining but I am still confused about the issue. You are saying it’s not working on https://marckdesignconcepts.com/youronlinedesignpro/meet-the-designer/ but I can see the scrolling working when screen size is reduced. Since the setup is not same as the other site and you are not applying same styling for the parent as you mentioned earlier; it’s technically not same. So kindly clarify your problem without comparing with other site. Let us know what you want to this particular site (https://marckdesignconcepts.com/youronlinedesignpro/meet-the-designer/) right now.

Thanks!

[alex5252Participant]

go to https://marckdesignconcepts.com/youronlinedesignpro/meet-the-designer/
go to inspect element
search for helloTEXT
it is the parent element with the styles i described
within helloTEXT you will find a <p> tag
it is the child element with the styles i described.

its not the page as as whole i want to scroll. just the smaller area with that text
I want the contents of #helloTEXT to scroll without seeing a scrollbar.
I know Chrome is experimenting with some vendor prefix rules that might work but no other browser is and I want a cross browser solution.

[Rue NelModerator]

Hello There,

Thanks for updating in! To resolve this issue, please update your css and use this instead:

#helloTEXT {
    height: 300px;
    overflow: scroll !important;
}

Please make sure that the height is enough for the scroll to appear. If the height is more than the height of the text, you won’t be able to show the scrollbars or scroll because all the contents were already displayed.

Hope this helps.

[alex5252Participant]

This does not help frankly. Let me try to explain again. In the past on another x-theme site, with integrity stack I used visibility: hidden; to hide the scrollbar but then applied visibility: visible; on its children so the content would still be visible. However it is not working anymore.

Let me in no uncertain terms describe that I want to be able to scroll while at the same time having the scroll bar be invisible.
I want to scroll through the text and not see the scroll bar on the side.
I have done this before successfully.
Why is it not working here.

I’m very frustrated with the responses I’ve been receiving.
It should not require four lengthy posts to describe this.
Literally a single search in inspect element and one click of a button would have shown you this code would not have produced the desired result.
You guys easily have the best theme out there but I’m souring on your support.

To reiterate I NEED the scrollbar to not be seen. The scrollbar must be invisible. Currently the scrolling only works if visibility: hidden; is NOT applied. In the past I have used this exact code and it worked. I applied visibility: hidden; and overflow: scroll; to the parent element and then visibility: visible; to the children and the parent element was able to scroll.

This is not a css issue. I have used this css before and it works. This code I have tried before resulted in the parent element being able to scroll while simultaneously not being able to see the scrollbar.

What I want to know is why this is occurring.

Is their some JS that overriding the scrolling?
I don’t know why the JS would be different between the site, but the issue doesn’t seem to be CSS.
If it is CSS the culprit is not visibility, height, overflow, position or display.
I’ve already checked these thoroughly.

Does this make sense?

[RadModerator]

Hi Alex,

My question is how did you do that before? As far as I know, it’s not possible by just overflow CSS, but still doable with the help of javascript or by multiple structures. And X theme doesn’t have that feature nor javascript that will allow you to scroll on hidden texts. All I know is X theme has icon blank sidebar where you can scroll without a scroll bar, and it uses a special library called NanoScroller library.

That’s why I’m wondering how do you do it without a javascript or library.

I made a sample here https://jsfiddle.net/zbrc9qsx/2/ (scroll, hidden, visible). And you can only scroll the first one and you can’t hide scroll bars. You’ll need structure customization, javascript, or library to achieve it. The question is, how are you doing that before?

On this site http://fawnridgerealty.com/, it has multiple structures and not just one, and not just CSS. How about copying it? Again, what you’re just doing on your site is just adding height and overflow which isn’t enough.

Thanks!

[alex5252Participant]

Nevermind we are going to try something else.

[RadModerator]

I see, sure and please let us know if you have other issues. Thanks!

[Author]

Posts