inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

챗봇 어플리케이션 만들기#5 Front End 부분 시작

Chatbot.js에 css 스타일을 똑같이 작성하였는데 input창의 width가 다릅니다

368

김재현

작성한 질문수 1

0

영상에 나온 style대로 똑같이 작성하였는데

유독 input창만 사진처럼 밖으로 빠져나옵니다

저는 크롬브라우저를 사용하고 있는데 파이어폭스에서 사용하여도 같은 증상이었습니다

혹시 개인적으로 css초기화를 하고 진행하신건가요?

어떻게 해결하면 될까요?
input에 widht:'100%'말고 다른 수치로 억지로 맞출순 있겠지만 이게 현명한 답은 아닌것 같아

질문드립니다! 해결방법좀 알려주세요!

nodejs react

답변 2

2

John Ahn

안녕하세요 김재현님 ! 

혹시 

<div style={{
height: 700, width: 700,
border: '3px solid black', borderRadius: '7px'
}}>
<div style={{ height: 644, width: '100%', overflow: 'auto' }}>


{renderMessage(messagesFromRedux)}


</div>
<input
style={{
margin: 0, width: '100%', height: 50,
borderRadius: '4px', padding: '5px', fontSize: '1rem'
}}
placeholder="Send a message..."
onKeyPress={keyPressHanlder}
type="text"
/>

</div>

이렇게 똑같이 작성해주셨나요?~ !!!  

혹시 다른 style.css나 index.css에 저 부분의 중복되는 부분이 있나요?! 

0

김재현

John Ahn님 시간내주셔서 감사합니다!!

{renderMessage(messagesFromRedux)}

이 부분을 제외 하고 똑같이 작성하였습니다. 

다만 깃레포를 포크했더니 브랜치에는 이미 어느정도 작성된 부분이라 헷갈려서

클론해서 이용하지 않고 pakage목록들만 베낀후 직접 영상을 보고 따라치며 진행중이었습니다.

혹시 미리 css설정 관련해서 설정하신 부분은 없으신건지요?

똑같이 되질않아서 reset.css를 적용해본것 이외에는 따로 css파일이 존재하진 않습니다

reset.css는 현재 삭제한 상태입니다

도움이 될까 싶어 깃레포 링크 첨부하겠습니다.

make/client 브랜치로 올렸습니다

도움 부탁드립니다ㅠ

https://github.com/kirk0201/chat-bot

import React from "react";

function Chatbot() {
  return (
  
    <div
      style={{
        height: 700,
        width: 700,
        border: "3px solid black",
        borderRadius: "7px",
      }}
    >
      <div
        style={{
          height: 644,
          width: "100%",
          overflow: "auto",
        }}
      ></div>
      <input
        style={{
            margin: 0,
          width: "100%",
          height: 50,
            borderRadius: "4px",
            padding: "5px",
            fontSize: "1rem",
        }}
        placeholder="Send a message"
        // onKeyPress
        type="text"
      />
    </div>
  );
}

export default Chatbot;

localhost:3000 ERR_CONNECTION_REFUSED

0

911

1

이벤트 쿼리문제입니다

0

122

1

npm install 이 안됩니다

0

1044

2

질문있어요

0

186

1

수정해보았는데 답장이 오지 않습니다.

0

273

1

postman 에 답이 오지 않습니다.(수정)

0

260

1

최신버전 부분

0

163

1

웹브라우저 실행이 안됩니다 .인스톨도 안되구요. 최신버전으로 해서 진행하고 자 하는데 어떻게 하면 될가요?

0

150

1

포스트맨에서 send를 하였을 때 오류가 납니다.

0

162

1

한국어 챗봇 만들기

0

312

1

Error: 16 UNAUTHENTICATED: Failed to retrieve auth metadata with error: invalid_grant: Invalid JWT Signature. 에러 발생

0

216

1

npm start 하고 throw e 이부분에서 에러가 뜨네요

0

299

1

dialogflow 줄바꿈

0

408

1

npm start 에러

0

529

1

npm run start 오류

0

792

2

Dialogflow ES에서 서비스 어카운트에 dialogflow client api설정 하는 법 질문

0

447

1

파이어베이스랑 연동은 어떻게 하나요?

0

539

1

npm install오류

0

627

1

invalid_grant: Invalid JWT Signature.

0

468

0

질문있어요!

0

304

0

에러

0

313

0

https://dialogflow.com/

0

337

1

Error: 7 PERMISSION_DENIED: IAM permission 오류

0

530

1

npm run start 시 cannot find module 에러

1

488

1