Veerasundaravel's Ruby on Rails Weblog

September 7, 2010

Div height issue when adding more text in it

Filed under: HTML — Tags: , , , , , , , , , — Veerasundaravel @ 3:08 pm

I created one DIV with some dynamic content where some its inner divs will float in right or left. Some this like below:

<div id=”UserInfoContainer”>
<div style=”float:left”>
Heading:
</div>
<div style=”float:right”>
User Info will go here.
</div>
</div>

We can’t add fixed height for UserInfoContainer, because user information is a dynamic content. Duo to this, UserInfoContainer’s background color is not fully added to the whole DIV.

Solution:

If you cleared the floated elements, then you can fit those DIV elements into the parent container. Just you need to do some thing below.

<div id=”UserInfoContainer”>
<div style=”float:left”>
Heading:
</div>
<div style=”float:right”>
User Info will go here.
</div>
<div style=”clear:both”></div>
</div>

Reference:
http://stackoverflow.com/questions/1287190/css-problem-my-div-tag-is-not-resizing-when-i-put-text-in-it

Advertisements

August 3, 2010

Wrap a very long url

Some time we may need to display a long url in our web-page. On that case, it will break the design as we can’t display a string in multiple lines with there is no space between.

Yes obviously, a link can’t have any space in between them. We can add <br> tag in between url, but the problem is while you are copying the URL, you still need to modify the copied content before using it in browser address bar. So I tried the following solution.

<wbr> tag

Write a helper method as follows:


#This method is used to split the longer urls into few lines.
#We added the tag <wbr> on a regular interval of a string.

def custom_word_wrap(text, max_width=10)
return nil if text.blank?
(text.length < max_width) ?
text :
text.scan(/.{1,#{max_width}}/).join(“<wbr>”)
end

In your view file:

<%= custom_word_wrap(@url_to_display, 55) %>

Outputs:

<%= @url_to_display %>

http://localhost.com/sssssssssssssssssssssoooooooooooooooooommmmmmmmmmmmmmmmmmmmmeeeeeeeeeeeeeeeeeeeeeeeeeebbbbbbbbbbbbbbbbaaaaaaaaaaaaaaaaaaaaaaaadddddddddddddddduuuuuuuuuuuuuuuurrrrrrrrrrrrrrlllllllllllllllll

<%= custom_word_wrap(@url_to_display, 55) %>

http://localhost.com/sssssssssssssssssssssooooooo
ooooooooooommmmmmmmmmmmmmmmmmmmmeeeeeeeeeee
eeeeeeeeeeeeeeebbbbbbbbbbbbbbbbaaaaaaaaaaaaaaaaaaaa
aaaadddddddddddddddduuuuuuuuuuuuuuuurrrrrrrrrrrrrrlllllllllllllllll

%d bloggers like this: