I have a textfield and a button on the same row.
I would like the textfield to take up all available space, and the button to only take up space in relation to the text on the button.
Visually I can solve this by putting the button in column 12.
However this only works when the browser is in fullscreen, as resizing the browser shrinks the button.
Is there any way to stretch the textfield to fill all available space (as in picture 1) without putting the button in column 12, so that the button doesn't shrink when resizing the browser?
Yeah, you can do it, check the example
.wrapper
{
display: flex;
}
input {
flex: 1 1 auto;
}
<div class="wrapper">
<input />
<button>confirm</button>
</div>
While justify-content creates space between the elements, flex expands the elements so they take all the space. The flex: 1 1 auto is the great choice for the forms like here because it doesn't change the size of the button, but the input.
Here is deeper explanation if you need:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
and one more for even deeper understanding:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Related
I have a button with a flexible width. I would like to let the text wrap to 2 lines to keep the button's width as small as possible. Below are some examples.
Short words should still be wrapped to 2 lines to keep the button width small:
My
Button
A long description should wrap to the smallest resulting width:
My button with
very long text
A long word should just stay on one line, and the button will be larger:
Abcdefghijklmnopqrstuvwxyz
I've only managed to make the button wrap if I give it a width, but I want the width to be flexible. Is that possible?
My last resort would be to parse the text with js and add a <br> element, but if a more elegant CSS solution exists I would prefer that.
Yeah you can do it like this:
index.html:
<button>
Hello world!
</button>
style.css
button {
width: min-content;
padding: 1rem 2rem;
}
index.html:
<button>
Hello world! #######################
</button>
Give it a min-width if you don't want it to be too small.
How do I make element visible only inside letters and not around them?
I want to position absolutely an element over some text and only make the element visible inside letters.
Is there something like "overflow: hidden" for the text?
Text to set overflow : hidden on
#Edit: Maybe I did not express myself well enough, I want to put some div or image etc. over some text and make it so the div/image, only shows trough letters as if they were holes cut in the foreground element, but I also want to keep text color when there is nothing "covering" it;
I don't understand what you want but there is the text-flow, that can help you.: text-flow
Look at this code, can help as well :
width: 200px; //define a fixed width
white-space: nowrap; //it's like flex-wrap: nowrap, avoid the line breaks
overflow: auto; //or hidden in your case
In this codepen Vuetify demo, I'm using a two column layout. The first column has a <v-list> inside a green <v-alert>. If you click the "toggle text" button, the title of the first item in the list toggles between short and long.
When the text is long, it overflows the <v-alert> and runs into the adjacent column
How can I prevent this? I would ideally like the text to be truncated with ellipsis once it reaches the edge of the green <v-alert> or if that is not possible, for the text to wrap over multiple lines within the alert.
I've tried adding the following class to the text, but it doesn't prevent the overflow
.prevent-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
If you want the text to not over flow the green container, you need to set the overflow there.
<v-alert text color="success" class="prevent-overflow">
will be where you aim.
Just to be clear, overflow sets on the contained items, when you set an over flow to your div, what you mean is - I want whats inside of this div to act like this if it goes beyond it.
For the ellipsis you will need to set 2 things, 1 is on the title add text-over: ellipsis, no need in word wrap and all, it will just cause the text to go down, unless thats what you want.
Second thing is to set width to the div that holds the text directly.
In your case for a quick fix you can do for example:
.v-list-item__title {
width: 20px;
}
.prevent-overflow2 {
text-overflow: ellipsis;
}
I'm creating a basic web layout in CodePen to better understand how grid areas work with the CSS Grid module. It turns out that using the . notation doesn't actually "hide" the items, when applied to the grid-template-areas property.
Please see my code here: https://codepen.io/isaacasante/pen/KZmyKV
You can see that I'm leaving the grid cells below my menu empty, but the section element on which I've added grid-area: random still shows in the bottom right corner of my layout (below my footer).
Do you guys have any idea how I can get rid of it without removing the HTML? I want to use Grid Areas only, to hide it. I noticed that an easy solution is for me to set the padding on the section element to 0, but this isn't a good solution, because it won't work the next time I'm trying to "hide" an element that has content.
You could reset the grid-templates-rows to grid-template-rows: 70px 40px 0px 290px 50px;
https://codepen.io/anon/pen/JMNpaJ and set display:none to section.item. position:absolute;right:100vwworks to to lay it out of screen. https://codepen.io/anon/pen/vpmdzj But that is when you know it is empty or is to be hidden any times.
Instead you can use :empty and auto. https://codepen.io/anon/pen/NXjyLV so it is hidden only when empty.
In fine, the grid-gap remains visible. It can be reset to 0 and margin on .item might help along the :empty selector and auto value for this specific row:
https://codepen.io/anon/pen/NXjyLV
Use display: none:
section.item {
display: none;
}
JSFiddle
I'm trying to make a button span the width of a column.
e.g. here: http://davidnhutch.com. Notice how the light grey buttons are only as large as the text they contain? I'd like each button to span the width of that column, but can't for the life of me figure out how to do it. I've done quite a bit of looking around but am still kinda new to this.
Any ideas?
You will have to make them block elements to be able to set a width:
.button {
display: block;
width: 100%;
}
Generally, these buttons are so-called "inline element". The browser renderer has very complex algorithms of layouting these elements. It's like Typesetting but with objects on your screen instead.
CSS and HTML together influence how the algorithm works: determining the width and height, color, etc. of objects. Also their position and how text flows, or how long buttons are.
There is a limitation, however. You cannot use anything that's like a variable width for inline elements.
Adding width: 100%; display: block as others suggested makes some buttons perfect: but only when they start at the left or right of the containing box. If it's after a sentence, then it (should) display as:
<---width of container--->
Text
<----------button-------->
However, the button is not after "Text" anymore, but is put below it. This is because it's now a so-called "block element". It is like a full paragraph, instead of elements in a text line.
If this is what you want; fine and problem solved. If this is not what you want, and instead want:
<---width of container--->
Text <-------button------>
This is not possible. CCS4 would be cool if it adds inline-width: 100% or inline-height, and solve a lot of problems. However CSS4 does not exists yet.
Adding width:100% to .button seems to work for the center and right buttons at the bottom of the page.