I'm putting a label and an input inside a div that is a flex container and flex-direction is set to column. The container naturally takes the width of the input and not the label. I'm trying to figure out why that is and if there is a way I can get the container to take the width of the label (or what the width of the label should be)
"Relationship to Patient" is the label/input in question.
What I want (on my my extra large screen):
What I'm getting (on my large screen):
HTML (using React and Nextjs):
<div className={styles.inputContainer}>
<label className={styles.label}>Relation to Patient</label>
<select className="form-field">
<option>Self</option>
<option>Child</option>
<option>Spouse</option>
<option>Parent</option>
<option>Other</option>
</select>
</div>
CSS:
:root {
--primary: #50657a;
--secondary: #7a5050;
--tertiary: #797a50;
--lightGray: #bababa;
--darkGray: #4d4d4d;
--extraLightGray: #ededed;
}
.inputContainer {
display: flex;
flex-direction: column;
justify-content: flex-end;
/* width: 200px */
height: 60px;
margin: 0 .5rem;
}
.label {
color: var(--secondary);
}
.formRow {
width: 100%;
display: flex;
margin: .5rem 0;
/* justify-content: space-around; */
}
.form-field {
border: 1px solid #bababa;
line-height: 1.5rem;
height: 2rem;
padding: 5px;
border-radius: 5px;
}
.form-field:focus {
outline: 0px;
-webkit-box-shadow: 0px 0px 3px 3px rgba(80,101,122,.5);
-moz-box-shadow: 0px 0px 3px 3px rgba(80,101,122,.5);
box-shadow: 0px 0px 3px 3px rgba(80,101,122,.25);
}
Parent element:
<div className={styles.formRow} style={{ marginTop: '0' }}>
/* A bunch of other code */
<div className={styles.inputContainer}>
<label className={styles.label}>Relation to Patient</label>
<select className="form-field">
<option>Self</option>
<option>Child</option>
<option>Spouse</option>
<option>Parent</option>
<option>Other</option>
</select>
</div>
</div>
So, reminder, I'm trying to figure out why the flex container chooses the width of the input and not the label and also how I can get the desired results.
I very much appreciate any/all help and answers!!
Related
My buttons keep expanding to container width. I want to make them normal, just wrapped around the text. The size depends on how long the text is.
Does anyone know what I'm doing wrong?
Thanks!
.btn {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
background: var(--orange-color);
color: white;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
Most probably you have a width: 100% on your button in some part of your CSS file.
Or the containing element is a flex-container with flex-direction: column. This also may cause the button to stretch to the width of the container. (caused by the default align-items: stretch)
.btn {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
background: var(--orange-color);
color: white;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
width: max-content; /* pushes the width to be the size of the content */
max-width: 100%; /* ensures the button doesn't overflow the container */
}
My button margin isn't fitting into my div. Here's the relevant HTML and CSS.
.card {
justify-content: flex-start;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
margin: 8px;
}
.card {
margin-bottom: 16px;
padding: 0px 8px;
float: left;
}
.button {
border: none;
padding: 8px;
color: white;
background-color: black;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
.title {
color: grey;
}
.container {
padding: 0px 16px;
}
.card > img {
width: 100%;
}
<div class="ccard">
<div class="card">
<img src="https://pbs.twimg.com/profile_images/1115280588322295808/N1mHLfHy_400x400.png" alt="Jane">
<div class="container">
<h2>Jane Doe</h2>
<p class="title">CEO & Founder</p>
<p>Jane has had 9 years of experience in the tech industry and knows it like the back of her hand. She's very warm and welcoming towards new customers.</p>
<p>janedoe#cabbagedude.com</p>
<p>
<button class="button">Contact</button>
</p>
</div>
</div>
</div>
It has always worked for me before, but it doesn't work now. I also haven't changed anything, except by adding the class ccard around card.
Here's what it looks like for me.
You need to add box-sizing: border-box; to all relevant elements in order to include borders and paddings (I suppose you mean those, since you don't have any margin on the button) in the given width, otherwise they are added to the width, which causes overflow if the width is 100%.
My project uses a 20 row by 20 column css grid layout (5% of screen for each cell). One of the pages has a button. Originally the page was contained within grid columns 5-8 and grid rows 6-9, and there was no problem with the button itself, but I need to center it within the grid area, so I used flexbox for centering within the css grid.
The button text is "Select file to upload" but problem is that the button is now only the width of a single word; I want the button to be as wide as all four words. Before I added a flex container for centering the button was as wide as all four words but now with the flex container it's not.
The flexbox arrangement works perfectly for all other elements on the page and two other pages, but this button has that problem (on Firefox 64). I may need to use a unique flex-item class for it, different from the flex-item class shown below.
Here are the css classes that apply to this button:
.center_text_grid {
display: grid;
grid-column: 5 / 12;
grid-row: 6 / 19;
display: block;
overflow: auto;
align-items: center;
justify-items: center;
}
.flex-item {
display: flex;
width: 70%;
flex-direction: row;
align-items: center;
justify-content: center;
}
.upload-btn-wrapper {
display: inline-block;
text-align:center;
border-radius: 15px;
}
.btn {
border: 1px solid rgb(117,163,126);
background-color: black;
width: 75%;
padding: 8px 20px;
border-radius: 15px;
font-size: 20px;
font-weight: bold;
font-family: CamphorW01-Thin, sans-serif;
font-size: 13pt;
color: rgb(117,163,126);
cursor: pointer;
}
Here is the html for this button:
<div class="center_text_grid flex-item">
<div class="upload-btn-wrapper">
<button class="btn" style="width: 100%">Select file to upload</button>
<input type="file" name="fileToUpload" />
</div></div><br><br>
I know this is not a complete reproducible example but as this is specific to button styling, I hoped it could be answered with the code above.
Thanks for any help.
Here's how I solved this:
<div class="upload-btn-wrapper center_text_grid flex-item">
<button class="btn">Select file to translate</button>
<input type="file" name="fileToUpload" />
</div><br><br>
As posted in my original question, this html code wrapped the button in two divs. I changed to a single div and added the upload-btn-wrapper class to the single div. I also changed width in the .btn class to 65%.
That leaves only one problem to resolve: the btn class has a hover selector, but the button text is not highlighted on hover:
.btn:hover{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.67);
box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.67);
color: rgb(175,222,162);
}
This is a file selection button so it's handled differently from other buttons, but I don't know how to do it yet. I'll post the answer to that one when I have it. If anyone else knows, please let us know.
Thanks to those who answered.
I copied your code to a jsfiddle and have it below. It works fine on Stack Overflow and jsfiddle. It could your browser not supporting a line of code, causing the code to not work properly. I suggest updating your browser, or switching to a different browser.
Hope this helps!
.center_text_grid {
display: grid;
grid-column: 5 / 12;
grid-row: 6 / 19;
display: block;
overflow: auto;
align-items: center;
justify-items: center;
}
.flex-item {
display: flex;
width: 70%;
flex-direction: row;
align-items: center;
justify-content: center;
}
.upload-btn-wrapper {
display: inline-block;
text-align: center;
border-radius: 15px;
}
.btn {
border: 1px solid rgb(117, 163, 126);
background-color: black;
width: 75%;
padding: 8px 20px;
border-radius: 15px;
font-size: 20px;
font-weight: bold;
font-family: CamphorW01-Thin, sans-serif;
font-size: 13pt;
color: rgb(117, 163, 126);
cursor: pointer;
}
<div class="center_text_grid flex-item">
<div class="upload-btn-wrapper">
<button class="btn" style="width: 100%">Select file to upload</button>
<input type="file" name="fileToUpload" />
</div>
</div><br><br>
Remove styles for both button and input
wrap them in a div.
Add the button css styles to the div.
Example button CSS -
.divButton {
background-color: cyan;
border: none;
color: white;
padding: 12px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
So I have this code:
<h1 id="result" style="color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">
text
</h1>
How can I make a border that if I put a longer text in, my border will keep its position and change its size, to make my text still in the border? Thanks!
Just adding border: 1px solid black (for example) to what you have works perfectly fine. The h1 element will grow and shrink to fit it's content and the border will do so as well:
const result = document.getElementById('result');
const sentence = "HELLO! IT LOOKS LIKE THIS IS WORKING FINE...";
let index = 0;
setInterval(() => {
index = (index % sentence.length) + 1;
result.innerHTML = sentence.slice(0, index);
}, 250);
#result {
position:absolute;
top: 10%;
left: 10%;
padding: 0 .5rem;
font-family: Sans-Serif;
font-size: 2rem;
line-height: 3rem;
color: black;
border: 3px solid black;
border-radius: 3px;
min-height: 3rem;
}
<h1 id="result"></h1>
Anyway, I suspect you may be referring to the border changing your element's dimension:
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
}
<div id="bar1"></div>
<div id="bar2"></div>
That's because by default, your element's width and height are actually a sum of the specified width and height properties, plus padding plus border, as you can see from the example above.
If that's the case, you have two options to keep the dimensions just as specified with width and height:
Using box-sizing: border-box. That will make padding and border included in the element's total width and height.
Using box-shadow instead of border. You can use the inset property to draw the shadow to the inside of the element instead of to the outside.
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
box-sizing: border-box;
}
#bar3 {
width: 50%;
height: 1rem;
background: yellow;
margin: .25rem;
box-shadow: inset 0 0 0 3px black;
}
#bar4 {
width: 50%;
height: 1rem;
background: lime;
margin: .25rem;
box-shadow: 0 0 0 3px black;
}
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
Note the 4th bar, the one with the outer box-shadow looks bigger, but if you inspect it, its dimensions are exactly the same as those in the other 3 bars.
Can you just add border: solid 1px black; to the style attribute, like this?
<h1 id="result" style="border: solid 1px black; color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">text</h1>
Fiddle: https://jsfiddle.net/myingling/LL57yd8j/
Here's some reading on CSS borders: https://www.w3schools.com/css/css_border.asp
I have 2 divs, one nested inside of the other. According to the page design, the nested div needs to appear normally inside its parent on a large screen, as in this image.
But on a small screen, the nested div needs to appear to be above the parent div, as in this image.
I don't want to position the child element absolutely, because it's a very poor and inflexible choice, especially for a responsive page.
HTML for divs / CSS for divs (on a large screen only):
.container-div {
background-size: 100% auto;
margin-bottom: 20px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.child-div {
position: absolute;
border: 3px solid white;
width: 400px;
height: 200px;
margin-bottom: 10px;
margin-right: 10px;
bottom: 0;
}
<div class="container-div">
<div class="child-div">
...
</div>
</div>
Use an inner-parent and flexbox.
.parent {
display: flex;
flex-flow: column-reverse;
}
.inner-parent {
background: red;
}
.child {
background: blue;
}
#media screen and (min-width: 640px) {
.parent {
flex-flow: column;
background: red;
}
}
/* Reset and basic styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
align-items: center;
width: 200px;
}
.inner-parent {
height: 50px;
width: 100%;
padding: 20px;
text-align: center;
}
.child {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
height: 50px;
width: 75%;
}
<div class="parent">
<div class="inner-parent">PARENT</div>
<div class="child">CHILD</div>
</div>
When smaller than 640px use .inner-parent as the lower div and use the real parent when larger than 640px by making it's background color match. To fix the order just switch from column-reverse to column or just use order to change the order of just one of the child divs.