CODEWITHSUNDEEP
htmlcss
Peeps
Peeps

Reputation: 43

Text Jumping out of the Column

i have this script It's a script that allow me to edit database tables through the web. Everything works perfect except that if a column has large word without space between as u can see if u open the link of the script i posted, it's jumping on the column next to it... i been messing with the css and the whole codes of the script but couldn't get this thing fixed...

those are all my codes...

My css code :

body{
    margin-top: 0px;
    margin-left: 0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
}
.dgError{
    margin-top:10px;
    margin-left:10px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#000000;
    background-color:#EFEFEF;
    border:5px double #C0C0C0;
    padding:5px;
}
.dgMainDiv{
    width:98%;

}
.dgTable{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:95%;
    width:100%;
    background-color:#FFFFFF;
}
.dgTitles{
    font-size:105%;
    font-weight:bold;
    background-color:#DCDCDC;
    border:1px solid;
    border-left-color:#ffffff;
    border-right-color:#aca899;
    border-top-color:#ece9d8;
    border-top-width:2px;
    border-bottom-color:#ece9d8;
}
.dgTitles:hover{
    border-top-color:#ffc83c;
}
.dgImgLink{
    cursor:pointer;
    padding:2px;
}
.dgImgLink:hover{
    background-color:#CCCCCC;
}
.dgHeader{
    font-size:110%;
    font-weight:bold;
    background-color:#C0C0C0;
    border:solid 1px #A0A0A0;
    height:30px;
}
.dgFooter{
    font-size:9px;
    background-color:#EFEFEF;
    color:#000000;
}
.dgPagRow{
    background:#EFEFEF;
    border-top:solid 1px #bfcacd;
    font-size:9px;
}
.dgBold{
    font-weight:bold;
}
.dgLinks{
    cursor:pointer;
    text-decoration:underline;
    color:#0000FF;
}
.dgLinks:hover{
    color:#FF0000;
}
.dgSelectpage{
    color:#000000;
    font-size:9px;
    font-weight:bold;
}
.dgRownorm{
    font-size:100%;
    border:1px solid #bfcacd;
    border-left-color:#ffffff;
    border-bottom-style:none;
}
.dgRowalt{
    font-size:100%;
    border:1px solid #bfcacd;
    border-left-color:#ffffff;
    border-bottom-style:none;
}
.dgRowsnormTR, .dgspnormRow{
    height:20px;
    background-color:#ffffff;
    color:#000000;
}
.dgRowsnormTR:hover{
    background-color:#ffffe0;
}
.dgRowsaltTR, .dgspaltRow{
    height:20px;
    background-color:#e9eff2;
    color:#000000;
}
.dgRowsaltTR:hover{
    background-color:#ffffe0;
}
.dgspnormRow{
    font-weight:bold;
}
.dgspaltRow{
    font-weight:bold;
}
.dgAjax{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    background-color:#FFFFE1; 
    border-style: dotted; 
    border-width: 2px; 
    padding: 4px;
}
.dgArrows{
    width:5px; 
    height:15px;
}
.dgInput {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 10px; 
    border: 1px solid #6699FF; 
    padding-left: 4px; 
    padding-right: 4px; 
    padding-top: 1px; 
    padding-bottom: 1px;
}
.dgInput:focus{
    background-color: lightyellow;
}
.dgSearchDiv {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position: absolute; 
    width:300px; 
    height: 150px;
    background-color:#0a246a; 
    border:2px solid #0a246a;
    top:0; 
    z-index: 10000; 
    display:none; 
}
.dgInnerDiv {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    margin-top:20px;
    background-color:#d9d9d9;
    font-size:100%;
    height:130px;
}
.dgSearchTit {
    width:270px; 
    color:#FFFFFF;
    font-size:12px;
    font-weight:bold;
    padding-left:10px;
    cursor:move;
    float:left;
}
.dgCheck{
    width: 17px;
    border: 1px solid #6699FF; 
}
.dgTotRowsTR{
    height:25px;
    background-color:#ece9d8;
    color:#000000;
    font-weight:bold;
}
.dgRowsTot{
    border:1px solid #bfcacd;
    border-left-color:#ffffff;
}
.dgAddDiv{
    position:absolute; 
    top: 0px;
    left: 0px;

/* --- This options below produce an error in FF 3 --- */
/*
    opacity: .98; 
    -moz-opacity:0.98; 
*/
    color:#FFFFFF;
}
.dgAddTitle{
    background-color: #000099; 
    height:20px;
    font-weight:bold;
}
.dgAddNames{
    width: 200px;
    font-weight:bold;
}
.dgAddInputs{
    width: 180px;
}
.dgAddButons{
    height:30px;
    vertical-align:middle;
    background-color: #CCC; 
}

Main page code = http://pastebin.com/44qgpeti

PHP Script code = http://pastebin.com/LqavqHdx

I posted both my css and script in case the problem is not in the CSS file...

So I'm hoping someone could help me find this problem :)

Upvotes: 3

Views: 247

Answers (3)

Nishu Tayal
Nishu Tayal

Reputation: 20840

Use css word-wrap property.

set word-wrap: break-word; in th div css wherever you are facing out of the box text issue.

.dgRownorm{
    font-size:100%;
    border:1px solid #bfcacd;
    border-left-color:#ffffff;
    border-bottom-style:none;
    word-wrap: break-word;
}

Upvotes: 0

Zuul
Zuul

Reputation: 16269

You can use the CSS word-wrap to split those words that are extremely large:

.dgRownorm {
    border-style: solid solid none;
    font-size: 100%;
    word-wrap: break-word;
}

You can check the Browser compatibility table here at MDN.

Upvotes: 2

John Lawrence
John Lawrence

Reputation: 2923

You could try setting the overflow to hidden:

.dgRownorm{
    font-size:100%;
    border:1px solid #bfcacd;
    border-left-color:#ffffff;
    border-bottom-style:none;
    overflow: hidden;
}

This will cut off any extra text if the size of the cell is set. If you want the text to wrap instead, you could look at the PHP wordwrap function.

Upvotes: 1

Related Questions