The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Make Code Box Wider

View previous topic View next topic Go down

Solved Make Code Box Wider

Post by URFTV on September 26th 2010, 6:03 am

Sometimes the coded words are too long and go down halfway and it looks pretty ugly, so how do i make the box a bit wider. Also, I want to make it so that you can scroll right in the box like you do to scroll up and down on a webpage, only right or left on the code box, how do I do these?

URFTV
Forumember

Male Posts : 237
Reputation : 0
Language : English
Location : Australia

Back to top Go down

Solved Re: Make Code Box Wider

Post by Vlajki on September 26th 2010, 9:52 am

For scrolling the code box find this in your CSS
Code:
.codebox dd {
And add there
Code:
max-height: 300px;
overflow-x: auto;
overflow-y: auto;

Vlajki
Forumember

Male Posts : 724
Reputation : 359
Language : Serbian & English
Location : Serbia

Back to top Go down

Solved Re: Make Code Box Wider

Post by URFTV on September 26th 2010, 12:14 pm

I can't do that, because my CSS is blank.

URFTV
Forumember

Male Posts : 237
Reputation : 0
Language : English
Location : Australia

Back to top Go down

Solved Re: Make Code Box Wider

Post by Vlajki on September 26th 2010, 12:38 pm

Click See your forum basic CSS
And Copy it to the CSS box
then do the change.

Vlajki
Forumember

Male Posts : 724
Reputation : 359
Language : Serbian & English
Location : Serbia

Back to top Go down

Solved Re: Make Code Box Wider

Post by URFTV on September 26th 2010, 12:54 pm

I'm using PhpBB2 btw. I can't find that anyhere, and i searched with Opera and Mozilla.



I want this!!

URFTV
Forumember

Male Posts : 237
Reputation : 0
Language : English
Location : Australia

Back to top Go down

Solved Re: Make Code Box Wider

Post by The Granny on September 26th 2010, 11:06 pm

possibly try and make the code in Microsoft Word and copy it in? worked for me Smile

The Granny
New Member

Posts : 2
Reputation : 0
Language : English

Back to top Go down

Solved Re: Make Code Box Wider

Post by URFTV on September 27th 2010, 2:31 am

BUMP


Last edited by URFTV on October 5th 2010, 10:55 am; edited 1 time in total

URFTV
Forumember

Male Posts : 237
Reputation : 0
Language : English
Location : Australia

Back to top Go down

Solved Re: Make Code Box Wider

Post by URFTV on September 28th 2010, 7:49 am

BUMP!

URFTV
Forumember

Male Posts : 237
Reputation : 0
Language : English
Location : Australia

Back to top Go down

Solved Re: Make Code Box Wider

Post by blindbat1457 on September 28th 2010, 8:28 am


Code:
.codebox dd {
  max-height: 300px !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}


Try that.

blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: Make Code Box Wider

Post by URFTV on September 28th 2010, 9:09 am

Thanks a lot, that looks cool, but is there one that scrolls sideways.

URFTV
Forumember

Male Posts : 237
Reputation : 0
Language : English
Location : Australia

Back to top Go down

Solved Re: Make Code Box Wider

Post by blindbat1457 on September 28th 2010, 9:18 am

@URFTV wrote:Thanks a lot, that looks cool, but is there one that scrolls sideways.

Yeah. I think you make the overflow-y none.

blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: Make Code Box Wider

Post by URFTV on September 28th 2010, 9:37 am

it isn't working all i get is this!

URFTV
Forumember

Male Posts : 237
Reputation : 0
Language : English
Location : Australia

Back to top Go down

Solved Re: Make Code Box Wider

Post by blindbat1457 on September 28th 2010, 6:40 pm

http://www.brunildo.org/test/Overflowxy2.html

Mess around with overflow-y & x.


blindbat1457
Forumember

Male Posts : 667
Reputation : 6
Language : English
Location : Santa Clarita, CA

Back to top Go down

Solved Re: Make Code Box Wider

Post by URFTV on October 5th 2010, 10:58 am

I've been messing around with this for days! It still won't scroll sideways -_-

URFTV
Forumember

Male Posts : 237
Reputation : 0
Language : English
Location : Australia

Back to top Go down

Solved Re: Make Code Box Wider

Post by Daniel. on October 5th 2010, 12:25 pm

make overflow-y:none;
and overflow-x:scroll;
your problem is that you have alot of code going down but not enough going across to make it scroll.

Daniel.
New Member

Male Posts : 21
Reputation : 0
Language : English, Binary, VB, C#, C++, Obj-C, HTML, JS, CSS
Location : The Land of Awesomeness, in the sea of tranquillity

http://lavaboxforum.forummotion.com

Back to top Go down

Solved Re: Make Code Box Wider

Post by ankillien on October 5th 2010, 1:48 pm

@URFTV wrote:I've been messing around with this for days! It still won't scroll sideways -_-

Hello,

Please try adding this code to your CSS.

Code:
.code , .cont_code {
width: 600px;
overflow: auto !important;
}

It will enable the horizontal scrollbar and remove the increasing width if a code line goes longer.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Make Code Box Wider

Post by URFTV on December 13th 2010, 3:38 am

Thanks! It worked!


Last edited by URFTV on December 13th 2010, 3:39 am; edited 1 time in total (Reason for editing : gramer)

URFTV
Forumember

Male Posts : 237
Reputation : 0
Language : English
Location : Australia

Back to top Go down

Solved Re: Make Code Box Wider

Post by ankillien on December 13th 2010, 6:10 am

Solved > Locked

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum