Jump to content

Archived

This topic is now archived and is closed to further replies.

psiencesociety

Textbox Size Limit?

Recommended Posts

psiencesociety

Wordpress 3.8.1

DMS 1.1.8

 

On the page in question its simple, I have a text box in the center of the page, a mediabox image on the left and right of the textbox (3 column, sizes 2/12 - 8/12 - 2/12) and the length of the images are 770 specifically. 

 

The effect I am looking for is the page or textbox to be limited in size so that when you scroll down to read it, the text scrolls but the page and images remain, this way the text does not exceed the image and remains "Framed" by them.

 

Can anyone advise this newb how that can be done?

 

Thank you in advance.

 

 

Share this post


Link to post
Share on other sites
greenfly

Could you please provide a link to your site? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
James B

Hi there, so you want the image to be fixed on the page? Or the text box to have a scroll bar?

 

Have you got a site that has this effect on that we can see so we can advise how best to achieve this.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
psiencesociety

James B I am sorry, I wish I had a site to give as an example, I seen the effect before in the past, I just cannot say where. But simply speaking, the two images that frame the text should always do so. So essentially the textbox would scroll rather than the whole page, so as they read the text scrolls down leaving the images to always frame the text. 

 

I hope that makes sense. 

 

Thank you for your assistance. 

Share this post


Link to post
Share on other sites
psiencesociety

Can anyone give some advice on this? I am sure its a simple code that I just dont know.

Share this post


Link to post
Share on other sites
Simon

add a height to the textbox then use overflow: scroll

Share this post


Link to post
Share on other sites
psiencesociety

Simon_P how do I do that?

Share this post


Link to post
Share on other sites
Simon

Some css?

 

height: 100px;

overflow: scroll

Share this post


Link to post
Share on other sites
GetMeWebDesign
Either reference the section id
#textbox123456 {
  height: 300px;
  overflow: scroll;
}
 
or if you want all text boxes affected
 
.section-textbox .pl-section-pad .textbox-wrap {
height: 300px;
overflow: scroll;
}
 
 

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
psiencesociety

Thank you GetMeWebDesign I entered the following under custom:

 

#textbox5 {
  height: 300px;
  overflow: scroll;
}
 
Using 300, 200, and 100. Nothing changed in the box? I am clearly doing something wrong. Any tips? 
 

Share this post


Link to post
Share on other sites
GetMeWebDesign

First you need to go to WP admin > Pagelines PRO > Enable CSS Classes and check the box (as the first bit of code only works for webkit browsers, ie Chrome etc)

 

In your WP admin > Pagelines > DMS Fallbacks > Custom LESS > add this code

 

.scroller, .outer-container {
  height: 770px;
}

.outer-container {
  overflow: hidden;
}

.inner-container {
  overflow-x: hidden;
  overflow-y: scroll;
}

.inner-container::-webkit-scrollbar {
  display: none;
}

 

body.firefox .inner-container {

  padding-right: 30px;
  margin-right: -20px;
}
 
body.ie .inner-container {
  -ms-overflow-x: hidden;
  -ms-overflow-y: scroll;
  -ms-overflow-style: none;
}

 

Then in your MEDIABOX (not text box) > Standard Options > custom CSS Styling > reference: scroller

 

You may need to play with the height, but you will notice that your bars on either side are not horizontally aligned!

 

In the MEDIABOX Text and Embed HTML add:

 

<div class="outer-container">

 <div class="inner-container">
 <div class="scroller">
YOUR CONTENT TEXT<br>
Next paragraph <br>
The End
</div>
 </div>
 </div>
 
To work properly, your content needs to be bigger than the text content area. The "bars" you have at the side... you can work that out, I am sure LOL
 
Final note... works in Opera and safari

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Danny

Try the above suggestion, this that isn't to your taste try this:

 

#textboxu4they {
height: 400px !important;
max-height: 400px !important;
overflow: scroll;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
GetMeWebDesign

Hi Danny... was adding all that code to hide the scroll bars. Yes, that is much easier but I think he wanted the cleaner look?


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Danny

Yeah, but if the scrollbars are not visible, for me it would be hard to understand that you can scroll there to see more text.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
GetMeWebDesign

LOL


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
psiencesociety

To both GetMeWebDesign"] and @[member="Danny"] Thank you for helping this coding disabled person. I am sorry it took this long to reply but I got pulled away from this project for some time. I did try both, @[member="GetMeWebDesign was a bit confusing for a newb like me but it worked!! Thank you so very much!!!

 

Although I couldnt get the other method to work, I am sure it was something I was doing wrong.

With that in mind GetMeWebDesign, is there a way to add that scroll bar look so that the reader knows it continues on? I do like that clean look personally as well, but I do agree with Danny, I worry that people will not understand unless they see the scroll bar there.

 

Ever so greatful!

Matthew~ 

Share this post


Link to post
Share on other sites
GetMeWebDesign

psiencesociety To set up a custom class:

 

.myscroll {

  height: 300px;

  overflow-x: hidden;

  overflow-y: scroll;

}

 

Change height to suit. Then in the media box, under Custom CSS styling add myscroll (without the full stop/point)

 

This will add a scroll bar to the y axis, but not underneath (x axis)

 

Just add your text normally to any textbox or media box

 

Works in all up to date browsers. haven't checked older IE


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
psiencesociety

Thank you GetMeWebDesign but I must be not understanding. Under the mediabox, in custom CSS, I added what you wrote and no scroll bar is showing, the whole code reads as follows:

 

.scroller, .outer-container {
  height: 770px;
}
 
.outer-container {
  overflow: hidden;
}
 
.inner-container {
  overflow-x: hidden;
  overflow-y: scroll;
}
 
.inner-container::-webkit-scrollbar {
  display: none;
}
 
body.firefox .inner-container {
  padding-right: 30px;
  margin-right: -20px;
}
 
body.ie .inner-container {
  -ms-overflow-x: hidden;
  -ms-overflow-y: scroll;
  -ms-overflow-style: none;
}
.myscroll {
  height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
}
 
Where did I go wrong?

Share this post


Link to post
Share on other sites
GetMeWebDesign

Don't need all of that. Your media box entry [attachment=2191:Media box text html entry (FILEminimizer).png]

 

Your custom Styling Class entry [attachment=2189:Media box Custom Styling Classes (FILEminimizer).png]

 

In you Custom Class, either </> Custom or DMS Fall backs [attachment=2190:media box my scroll cusotm class (FILEminimizer).png]

 

:goodjob:

 

 


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
psiencesociety

 Ugh! Frustrating!

 

@GetMeWebDesignI did exactly what you have posted and nothing.

 

 http://enochiantemple.net/enochiantemple/?page_id=7

 

One thing I noticed different from what you pics showed, I do not have the three options you have. I only have one, "Styling Classes "

 

I do have Enable CSS Classes enabled. 

Share this post


Link to post
Share on other sites
GetMeWebDesign

Ok... First you dont need Enable CSS classes unless there is an issue with one browser ie FF, IE etc

 

So the text is entered correctly... check

 

Even if you only have Styling classes (which surpriese me as under Standard options for a media box you should always, at least, have Standard Title and I would have thought inline styling too - you may have a bug if not), it is being referenced properly by the mediabox... check

 

That leaves one remaining possibility. In your custom CSS (whether viewing in WP admin > Pagelines > DMS Fallback > Custom LESS or the "</> Custom" in DMS live editor) can you see the code :

 

.myscroll {

  height: 300px;

  overflow-x: hidden;

  overflow-y: scroll;

}

 

If you do, then I am guessing you may have a parse error in CSS code above that. Can you copy all you custom CSS that you have added for the site and run through http://jigsaw.w3.org/css-validator/#validate_by_input and check it is all ok


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
GetMeWebDesign

Actually, dont even need the overflow-y: scroll; either. watch this clip of your custom class working

 

http://screencast.com/t/2kStKbAjYOT

 

You will need to fiddle with the images left and right to get them to align properly with the scroll bar etc or the margin top of the media box: or something similar

 

.myscroll {
  height: 675px;
  overflow-x: hidden;
  margin-top: 29px;
}

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
psiencesociety

<<Bow down to you>>!!!! GetMeWebDesign

 

Thank you! Your the bestest! ;)

 

You hit it, it was my err (and now I know why I don't code, heh) I pasted this last code you posted and it work flawless. The one I pasted previously had a { before the .myscroll. I guess that one little thing changes everything huh? Thank you again for your patients and assistance.

 

P.S. Dev team....Can you add this feature for us simpletons who cannot code?

Share this post


Link to post
Share on other sites
GetMeWebDesign

psiencesociety No problem... glad I could help. If you are a little uncertain over CSS, then it is worth pasting into the validator... so easy to miss a parse error and that can nullify all code after that.


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites

  • Similar Content

    • mundocaco
      By mundocaco+
      Hello, inexplicably few signs have appeared at the beginning of each excerpts, removing the option these signs disappear, but appear when I activate it again. You know why happen this?.
       
      Yo can see online here: http://www.latitudestudio.eu/press-news/ 
       
       
    • dherries
      By dherries
      I am trying to add a widgetizer to my page/post and the system does not let it drag. The system creates  large Widgetizer logo and nothing will happen. What am I doing wrong?  I am using DSM 1.1.9.  Website is www.moveincache.com
    • mundocaco
      By mundocaco+
      Hello everyone. :)   Is possible set a selected Section Area to height of window browser with custom CSS, just like DMS2 presets? Someone knows some best practice?   I know how to set to fixed footer, but i think this case of study is different.   Thanks!
    • pazyluz
      By pazyluz+
      I have pages that display on phones and pages for desktops/laptops.  The ipad displays the mobile/phone pages but would look far better if they displayed the desktop version.  How/Can I display the desktop version on ipad?  If I cannot do that, can you advise me as to the best course of action?  Thank you.
       
      http://peggygreen.net
    • pazyluz
      By pazyluz+
      In between forum posts, I am getting the above response telling me to wait another 57 seconds before posting a second topic.  (WHAAAAT?) To continue with my post, I have to hit the back button only to find that you have erased everything I just wrote. Please explain and fix this immediately.  Thank you. 
×