quiet rivet
Hello - i have a scrunched text box that looks like the attached immage and can't figure out how to expand it across the screen so that it fills its container. The code is here
Css: https://playcode.io/1920433
Tsx: https://playcode.io/1920433
Thanks in advance for any feedback!
silent hearth
I don't think that demo works. I just get "Hi friend, try change my color!"
quiet rivet
are you able to see the code?
silent hearth
Normally you just do width: 100%, but it can be different e.g if it's a display: inline element, then you might use display: inline-block
I don't know if I see your code or something else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<h1>Hi friend, try change my color!</h1>
</body>
</html>
oh no
not my code
<div className={styles.askContainer}>
<DefaultButton
text="Generate All Sections"
onClick={onGenerateAllSections}
disabled={isLoading || !isContextNotesProvided || !isUnderstandingGenerated}
className={styles.generateAllButton}
/>
<CollapsibleSection title="Start here: Context notes and 'Understanding of your needs!!'">
<div className={styles.sideBySideContainer}>
<div className={styles.halfWidth}>
<TextField
label="Context Notes"
className={styles.contextNotesInput}
placeholder="Paste client conversation notes here, or describe the context of the project..."
multiline
rows={100}
onChange={onContextNotesChange}
value={contextNotes}
style={{ width: "100%", height: "100%" }} /* Ensure it takes full width and height */
/>
<DefaultButton text="Generate Understanding" onClick={onGenerateUnderstanding} disabled={isLoading} />
</div>
this is my code
and the css is here: .contextNotesInput {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start; /* Align items to the start (left) /
margin-right: auto; / Pushes the input box to the left /
background-color: #f9f9f9; / Light background for modern look /
border: 1px solid #ccc; / Light border /
border-radius: 8px; / Rounded corners /
padding: 20px; / Adds some padding inside the box /
box-sizing: border-box; / Ensures padding and border are included in the element's total width and height /
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); / Subtle shadow for depth /
flex-grow: 1; / Allow the TextField to grow and fill the space */
}
.contextNotesInput .ms-TextField {
width: 100% !important; /* Ensures the text field takes full width of the container /
margin-bottom: 10px; / Adds some space between the text field and the button */
}
.contextNotesInput .ms-TextField-wrapper {
width: 100%;
}
.contextNotesInput .ms-TextField-field {
width: 100% !important; /* Ensures the actual input and textarea take the full width /
height: 100% !important; / Ensures the actual input and textarea take the full height /
box-sizing: border-box; / Ensures padding and border are included in the element's total width and height */
resize: none;
}
.fullsizeTextArea .ms-TextField-fieldGroup {
width: 100%;
height: 100%;
}
.fullsizeTextArea textarea {
width: 100% !important;
height: 100% !important;
resize: none;
}
.sideBySideContainer {
display: flex;
width: 100%;
justify-content: space-around; /* Distributes space evenly /
box-sizing: border-box; / Ensures padding and border are included in the element's total width and height /
flex: 1; / Allow the container to grow and fill the space */
}
silent hearth
Which box wants to be wider?
quiet rivet
the one you write the next in , right under where it says "context notes"
silent hearth
TextField?
quiet rivet
silent hearth
You don't know which element that is?
quiet rivet
yes i think it's text field
silent hearth
It looks like the TextField
quiet rivet
but i did 100% width
silent hearth
But where does TextField come from? A React component library?
silent hearth
TextField is a synthetic component, not natural HTML, so we don't know exactly what it produces or how
quiet rivet
fluentui/react
silent hearth
still nothing
ah
quiet rivet
import { Checkbox, Panel, DefaultButton, Spinner, Slider, TextField, SpinButton, IDropdownOption, Dropdown } from "@fluentui/react";
i think this is where it's being imported
silent hearth
I guess you didn't try reading their docs?
quiet rivet
nope - asked chat gpt to help me with it
but now i think i see where the problem might be
silent hearth
Ah, well maybe chat-gpt can solve it then
quiet rivet
haha no chance , i've tried but it gets stuck
i'm not sure why it doesnt take style={{width: "100%" }}
silent hearth
There's a section on styling
with an export to codepen button
Seems that it wants a function for styles
Might not be the only way, but that's what they use in the demo
quiet rivet
it's so weird i dont see anything on width
silent hearth
the demo has width at line 26 in the JS
quiet rivet
where do you see it ?
silent hearth
The link I sent you -> "TextField subcomponent styling" -> export to CodePen
quiet rivet
ah i see
i think i found it
im trying it now
but if i set the width at a certain number, it won't resize, im assuming depending on screen size
silent hearth
you've gotta click out of the JS edit box to update it
and make sure there isn't a code error
width: '100%' is OK but width: 100% is a code error
^ works
silent hearth
Did you put it in quotes like I said?
pulsar egretBOT
sandiford#0
silent hearth
const c = 100% is not valid javascript
quiet rivet
yea, i try "100%" and reverts back to being small
silent hearth
🤷🏻♂️ It worked on the CodePen
