Win a copy of Svelte and Sapper in Action this week in the JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Filling a div

 
Ranch Hand
Posts: 202
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have a standard 4 panel webpage... Header, Footer, Menu (on left), main content. The content gets filled based on the selection of the menu bar but for some reason the the main content area does not fill all the way and I get scroll bars in the content.

I have tried everything I could think of and anything that is on the internet (CSS position, height (both % and vh), etc) but for some reason only a small area of the main content is filled.  Any suggestions on how to fix this?

jsp code for menu option:


jsp code for content div:


JavaScript Code


CSS Code:


Just not sure why the content is not filling the whole div.
 
John Morgan
Ranch Hand
Posts: 202
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This shows what I am talking about... should fill the whole area with the appropriate colors (grey for the menu, light blue for the content).

 
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
First a couple of questions:
  • Why are you creating elements in script rather than in the HTML? I assume there's a reason, but it is not stated here and may be important for context.
  • Is this a school project in which the technologies you are allowed to use is limited?
  • If not, why aren't you doing all this with jQuery?
  • You are using let which presupposes that this is limited to modern browsers. So why not use modern CSS techniques such as flex and grid?
  •  
    John Morgan
    Ranch Hand
    Posts: 202
    2
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator

    Bear Bibeault wrote:First a couple of questions:

  • Why are you creating elements in script rather than in the HTML? I assume there's a reason, but it is not stated here and may be important for context.

  • This is the only way I could find to pull a JSP page into a div. If there is a better way please let me know, I do not mind doing the research but I only know what I know.  

    Bear Bibeault wrote:

  • Is this a school project in which the technologies you are allowed to use is limited?

  • Yes, technologies are limited by the equipment and software in use. Must be compatible with IE9 (managed to dodge out of IE8)

    Bear Bibeault wrote:

  • If not, why aren't you doing all this with jQuery?

  • I am not familiar with using jQuery for just pulling text into a div. I will look into this more.

    Bear Bibeault wrote:

  • You are using let which presupposes that this is limited to modern browsers. So why not use modern CSS techniques such as flex and grid?

  • Again, this is code that I found on the internet and it seemed to work fine, except for the lack of the filling the div.
     
    Bear Bibeault
    Marshal
    Posts: 67451
    173
    Mac Mac OS X IntelliJ IDE jQuery Java
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator

    John Morgan wrote:This is the only way I could find to pull a JSP page into a div. If there is a better way please let me know, I do not mind doing the research but I only know what I know.  


    Well, you never want to pull in a full HTML page into another, so when you use the term "page" I assume you actually mean a fragment.

    There are at least two ways to include a JSP fragment into a page: the include directive, and the include action. The former is best used for static content, the latter for dynamic content. The difference is in when any JSP elements in the fragment are evaluated.

    You should not be using client-side JavaScript to replace a server-side mechanism.

    But there are many case where client-side rendering is appropriate. Is this one of them?

    Yes, technologies are limited by the equipment and software in use. Must be compatible with IE9 (managed to dodge out of IE8)


    So, yes, this is a school project?

    I am not familiar with using jQuery for just pulling text into a div. I will look into this more.


    jQuery is the most popular JavaScript library off all time. The only reason not to use it to simplify your client-side JavaScript is because you are already using another client-side library that fills its place, or using a framework (such as React, Angular, or VueJS) that's takes care of things for you.

    This is especially true when needing to support obsolete browsers such as IE.

    Again, this is code that I found on the internet and it seemed to work fine, except for the lack of the filling the div.


    "This car works fine except that it will not move forward"

    Learn how to open the developers console in whatever browser you are using (Chrome is often recommended for development use due to its hefty Dev Tools).
     
    Bear Bibeault
    Marshal
    Posts: 67451
    173
    Mac Mac OS X IntelliJ IDE jQuery Java
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    So, that all said, where in your CSS is the code that you think should be causing the div to stretch the height of the available space?
     
    John Morgan
    Ranch Hand
    Posts: 202
    2
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator

    Bear Bibeault wrote:So, that all said, where in your CSS is the code that you think should be causing the div to stretch the height of the available space?



    Sorry did not realize that it was not in the one I pasted (I had been trying different methods so I kept my base one aside so I would not lose what I had already done.
     
    John Morgan
    Ranch Hand
    Posts: 202
    2
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    To answer your other questions

    1) I will research putting fragments into a JSP. The last time I did anything like this I used frames to put content into the correct place.
    2) This is a work proof of concept that I am working on. Right now we have developers doing data entry and I want to get away from that and have developers actually develop software. At the same time I am teaching myself Java, HTML 5 and CSS.
    3) I will look more into some jQuery tutorials... It could be that I have been looking at the with the wrong way of developing it due to my lack of knowledge.
    4) Using the developer tools in FireFox and Chrome were ways that I actually got what I was looking for to this point, but some of it is still sanskrit to me. (I actually understand a very little bit of greek)

    Learning is not a path but a never ending journey - me
     
    Bear Bibeault
    Marshal
    Posts: 67451
    173
    Mac Mac OS X IntelliJ IDE jQuery Java
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Frames are not what I am talking about. See https://docs.oracle.com/javaee/5/tutorial/doc/bnajb.html
     
    John Morgan
    Ranch Hand
    Posts: 202
    2
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Bear, first and foremost I want to thank you. I had not gotten to the includes as part of my learning and it also solved a couple other problems I was trying to figure out.

    I am still unsure of the script I need to add the include into a specific div, but I am at least on the right track. Once I get that figured out I will post the code here so others can learn from it also.
     
    Being a smart alec beats the alternative. This tiny ad knows what I'm talking about:
    the value of filler advertising in 2020
    https://coderanch.com/t/730886/filler-advertising
      Bookmark Topic Watch Topic
    • New Topic