www.webdeveloper.com
Results 1 to 11 of 11

Thread: Preventing a DIV from being stretched.

  1. #1
    Join Date
    Jan 2006
    Location
    Palmer Alaska
    Posts
    132

    Preventing a DIV from being stretched.

    I have developed a javascript module as an onclick handler in an input element
    which fills a div element with a calendar.
    Then handler also provides (auto-generates) some simple CSS rules which apply to elements in the
    div innerHTML, but not the div tag itself. These rules are also part of the div innerHTML. The css rules follow:
    Code:
    .tjp_nav {background-color:#1505a5;color:#fff;font-weight:bold;}
      A.tjp_navlink:link {color:#00ffff;background-color:transparent;text-decoration:none;}
      A.tjp_navlink:hover {color:#ff0;background-color:transparent;text-decoration:underline;}
      A.tjp_navlink:visited {color:#00ffff;background-color:transparent;text-decoration:none;}
      .tjp_header {background-color:#696969;color:#fff;font-weight:bold;}
      .tjp_date {background-color:#ffffff;color:#696969;font-weight:bold;}
      A.tjp_datelink:link {color:#1505a5;background-color:transparent;text-decoration:none;font-weight:bold;}
      A.tjp_datelink:hover {color:#aa0000;background-color:transparent;text-decoration:underline;}
      A.tjp_datelink:visited {color:inherit;background-color:transparent;text-decoration:none;}
    In the example that can be seen at http://www.tj49.com/images/demo/correct_size.png the calendar is being presented as I would want it to. However in another site, the calendar is being 'stretched'. See : http://www.tj49.com/images/demo/wrong_size.png
    In that instance, my client has CSS rules which are affecting my calendar. I am not a CSS guru. I would welcome advice on how to remedy that situation. I would suspect that an absolute height and width for the div tag would not be the answer, because that might restrict the element from acommodating all elements within it. URLs to other discussions on similar topics or documentation is welcomed.
    Thanks
    tim
    Programmer since 1987. Web developer since 1996.
    Python, C/C++, javascript, rebol, lisp.

  2. #2
    Join Date
    Jul 2012
    Location
    Vancouver
    Posts
    61
    Find the div that the calendar is "contained" in and set the width for it.

  3. #3
    Join Date
    Jan 2006
    Location
    Palmer Alaska
    Posts
    132

    Question

    Quote Originally Posted by mistin.ca View Post
    Find the div that the calendar is "contained" in and set the width for it.
    Thanks for the reply mistin.ca. Unfortunately,
    setting width="10%" or even width="1%" does not correct the problem.

    Please advise further.
    regards
    tim
    Programmer since 1987. Web developer since 1996.
    Python, C/C++, javascript, rebol, lisp.

  4. #4
    Join Date
    Jul 2012
    Location
    Vancouver
    Posts
    61
    Would have to see the code in its entirety

    the full calendar and any css related to it

  5. #5
    Join Date
    Jan 2006
    Location
    Palmer Alaska
    Posts
    132
    Quote Originally Posted by mistin.ca View Post
    Would have to see the code in its entirety

    the full calendar and any css related to it
    I will provide that. First of all, I have noticed that the composition
    of the content rendered by the javascript may be incorrect. I am going
    to examine that and rewrite if necessary. Time doesn't permit until a
    couple of hours have passed.
    thanks again
    tim
    Programmer since 1987. Web developer since 1996.
    Python, C/C++, javascript, rebol, lisp.

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    Quote Originally Posted by tim042849 View Post
    Thanks for the reply mistin.ca. Unfortunately,
    setting width="10%" or even width="1%" does not correct the problem.

    Please advise further.
    regards
    tim
    Since you used percents here, the div will still stretch in relation to the browser's viewport size and its contents. Try setting a fixed width/height and using overflow: auto; to control the scrollbars when content overflows the size of div you set.

  7. #7
    Join Date
    Jan 2006
    Location
    Palmer Alaska
    Posts
    132

    Thumbs up

    Quote Originally Posted by Major Payne View Post
    Since you used percents here, the div will still stretch in relation to the browser's viewport size and its contents. Try setting a fixed width/height and using overflow: auto; to control the scrollbars when content overflows the size of div you set.
    Looks like you nailed it!
    Thank you
    Programmer since 1987. Web developer since 1996.
    Python, C/C++, javascript, rebol, lisp.

  8. #8
    Join Date
    Jul 2012
    Location
    Vancouver
    Posts
    61
    Quote Originally Posted by Major Payne View Post
    Since you used percents here, the div will still stretch in relation to the browser's viewport size and its contents. Try setting a fixed width/height and using overflow: auto; to control the scrollbars when content overflows the size of div you set.
    The child div inherits the parent size, so 10% of whatever it's parent is..

    10% of 100, 1000, 10000 is still 10%..

    That's just dirty fix though it's not like I don't do that more than.. ocasionally

  9. #9
    Join Date
    Jan 2006
    Location
    Palmer Alaska
    Posts
    132
    Quote Originally Posted by mistin.ca View Post
    The child div inherits the parent size, so 10% of whatever it's parent is..

    10% of 100, 1000, 10000 is still 10%..

    That's just dirty fix though it's not like I don't do that more than.. ocasionally
    I use the pixel metric as opposed to the 'percent' metric.
    Code:
    style="width:200px;height:200px;"
    Comments?
    thanks
    Programmer since 1987. Web developer since 1996.
    Python, C/C++, javascript, rebol, lisp.

  10. #10
    Join Date
    Jul 2012
    Location
    Vancouver
    Posts
    61
    Quote Originally Posted by tim042849 View Post
    I use the pixel metric as opposed to the 'percent' metric.
    Code:
    style="width:200px;height:200px;"
    Comments?
    thanks
    It's fine to do that

    Don't mind meee the peanut gallery

  11. #11
    Join Date
    Jan 2006
    Location
    Palmer Alaska
    Posts
    132
    Quote Originally Posted by mistin.ca View Post
    It's fine to do that

    Don't mind meee the peanut gallery
    Okay - Dokay. Now I can charge the client for any further time on this.
    Thanks a bunch every body.
    tj
    Programmer since 1987. Web developer since 1996.
    Python, C/C++, javascript, rebol, lisp.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles