Loading...
 

Themes


URL In Infobox Causes Rows to Flyout

United States

Tiki 15.4 LTS
Theme Utopia (modified)

Thanks in advance for any help, the info box we are using in our tiki is from Gary Cunninghams infobox at http://demo.zukathemes.com/Tikipedia

The infobox’s Gary created are awesome. I love them. I am however experiencing an issue, when I insert a link or url into an infobox row, it causes the rest of the rows to flyout of the infobox constraints.

For en example please see this link at http://thepatriotwoodwiki.org/Easy+Wood+Tools
Now squeeze the screen down, the responsiveness is missing from the rows of the infobox.
The culprit is the url I installed in that particular infobox at the bottom. How I know, is I removed the content, and added it back in, one row at a time, everything is fine until I add in the url row, then the infobox has issues.

I also removed my Custom CSS over-ride in tiki-admin.php?page=look and it had no effect on the issue I am experiencing.

Gary, if you are out there, any help is greatly appreciated, or anyone? Thanks so much as always!

You can see “Source” for the page I linked too.
Thanks!

United States

Luci, thanks so much for the tip!
I did apply this within the infobox custom css at look and feel, and it had not effect or fix.
I am studying the guide you linked me to now, thanks so much for setting me on the path.


United States
Luci, I think I know what I need to do, I used Chrome and it works fine, so I am thinking I need to add the css for each browser correct?
United States
Thanks, I have been looking for a source to explain how I insert the other browsers into this command, and I have not found any, do you have a link Luci you could direct me too or can you please tell me the next step for fixing this in firefox and IE and others? Thanks
Japan

Hi,

Looking at the css-tricks.com info, I copied all of the CSS suggested there and pasted it as inline CSS for the infobox in your page, and it fixes the issue for me in Firefox. I didn’t test IE, but I think it should behave, based on what css-tricks said.

Try adding this CSS at your site:

.infobox {
overflow-wrap: break-word;
word-wrap: break-word;

-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;

/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}

You can remove the comments if you like (indicated by /* */) and the blank lines, to save a little overhead.

I’m just being a little more explicit about what luci answered, actually.

-- Gary

United States

Gary and Luci, thanks so much, I have added the above css and it appears to have no effect on the issue.

I removed all custom css to my site, and left just the info box in as:

.infobox {
overflow-wrap: break-word;
word-wrap: break-word;

-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;

/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
} 
.infobox { 
border: 3px solid #000000; 
border-spacing: 3px; 
background-color: #f9f9f9; 
color: black; 
margin: 0.5em 0 0.5em 1em; 
padding: 0.2em; 
font-size: 88%; 
line-height: 1.5em; 
}
.infobox img { 
margin-top: 6px; 
} 
.infobox h3, 
.infobox h4 { 
font-weight: bold; 
background-color: #000000; 
padding: 4px; 
text-align: center; 
font-family: sans-serif; 
margin: 0; 
} 
.infobox h3 { 
font-size: 120%; 
} 
.infobox h4 { 
font-size: 105%; 
}


But as you can see at http://thepatriotwoodwiki.org/Easy+Wood+Tools and if you reduce the screen, the url still causes the infobox to act as it does.

If you are able to provide another suggestion, or comment on my infobox code above, I’d sure appreciate it guys.


Japan

Hi,

To fix the slight overflow of the table rows beyond the right side of the infobox, try adding this rule, in addition to the others recommended:

.infobox .table > tbody > tr > th,
.infobox  .table > tbody > tr > td { padding-left: 0; padding-right: 0; }


It looks to me like the word-wrap rules are working ok, but there is still overflow that can be fixed if the left and right padding on the table cells is removed. (Since the table has only one cell in each row, there’s no visual problem of table cell text running together without white space separation. If there were more cells per row, then the CSS rule would have to target the left side of the first cell and the right side of the last cell.)

-- Gary


United States

Gary, thanks so much for the time and effort, I appreciate it greatly, I went ahead and applied the rule, and the issue still persist. I’ll try other themes, perhaps the theme has something to do with it?
Thanks again


United States

I don’t know what happened, but it works now. Go figure, perhaps cache had to be cleared, or in my case, time?
But hey, it works, thanks Gary! And thanks Luci!

the infobox works with this:

.infobox {
overflow-wrap: break-word;
word-wrap: break-word;

-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;

/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.infobox { 
border: 3px solid #000000; 
border-spacing: 3px; 
background-color: #f9f9f9; 
color: black; 
margin: 0.5em 0 0.5em 1em; 
padding: 0.2em; 
font-size: 88%; 
line-height: 1.5em; 
}
.infobox img { 
margin-top: 6px; 
} 
.infobox h3, 
.infobox h4 { 
font-weight: bold; 
background-color: #000000; 
padding: 4px; 
text-align: center; 
font-family: sans-serif; 
margin: 0; 
} 
.infobox h3 { 
font-size: 120%; 
} 
.infobox h4 { 
font-size: 105%; 
}
.infobox .table > tbody > tr > th,
.infobox  .table > tbody > tr > td { padding-left: 0; padding-right: 0; }
}

Page: 1/2  [Next]

Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.