Forum

Posted: **10 Feb 2023, 12:32**

If Coursesweb have better advice I will follow ?

I`ve decided to continue tinkering with Program O although it is quite outdated. Meight there are better tips to procede ?
I asking myself should I continue with Programma-O ?

I also briefly looked at AI programs on the internet. In addition, I still work with Php 5.40 ?

But first prepare the basic format before I continue.

I try to get the scroll-bar in <div> at the bottom, also after eatch new input, strange not one search on google gave an good example, I tried more things.

Code: Select all

<div class="centerthis">
<div id="chatlog"   ><p>&nbsp;<br>
<span class="botTitle">chatbot: Welcome to Molendijk information <br></span>Your conversation id: <?php echo $convo_id; ?>

In CSS code from those div I see this

Code: Select all

.centerthis {
width: 90%;
}

.botTitle {
color: rgb(610, 176, 23);
font-weight: bold;
}

#chatlog {
box-sizing: border-box;
height: 100px;
overflow: auto;
min-height: 300px;
max-height: 500px;
position: relative;
min-width: 700px;
max-width: 90%;
margin: 10px auto;
background-color: transparent;
overflow: auto;
border: 3px inset #C66;
border-radius: 9px;
padding: 12px;
}

I tried more options with div #chatlog but I can not get the scrollbar permantly at the bottom ?

if i put the code below in div then i get a different result where scrollbar stays below and puts everything above that. So that I still have to move the scroll bar up every time with a new message.

Code: Select all

overflow: auto;
display: flex;
flex-direction: column-reverse;

Hope coursesweb can help me out.

Posted: **10 Feb 2023, 14:01**

Hello,
I know nothing about Program-O.
If you want the scroll bar to be permanently at the bottom of the Div, try with Javascriupt.
Add in your code to execute the one of following functions everytime a new line is added into that Div:

Code: Select all

function scrlBottom(id){
  var obd = document.getElementById(id);
  obd.scrollTop = obd.scrollHeight;
}

Or:

Code: Select all

function scrlBottom(id){
  document.getElementById(id).scrollIntoView(false);
}

Or:

Code: Select all

function scrlBottom(id){
  var obd = document.getElementById(id);
  obd.scrollTop = obd.scrollHeight;
}

- Example:

Code: Select all

//When new line is added
scrlBottom('chatlog');

- Also, you can search on the net for:
Scrollbar permanently at the bottom in div

Posted: **10 Feb 2023, 18:02**

Marplo, thanks for the support, it is working now.