How to fix text overflow from a flex box [duplicate] - javascript

This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 2 years ago.
I am working with table. height of the row and width of column can be changed (configurable). every time If height/width changes , text within the cell should be vertically/horizontally centered every time .
I have a working code with css for a cell:
{
display: flex,
align-items: center // vertical alignment
justify-content: center // horizontal align
}
The problem here is ,for the cell value 90.45678423 now If i minimize column width. then its looking like that (pic)left part getting truncated
I don't want left part of the text truncate on column Resize..and even with minimun width it shouldleft part of value shpuld be there be like .
I have achive this behavior by using css with display block: but problem with this css is , I don't have line height access at this Js code and failed to achieve vertical alignment at middle if user change row height..
{
text-align : center // horizontal align
vertical-align : 'middle' // verical align
line-height : ?
}

If you want to center the text if it is smaller than the container and align it to the left and overflow it when the text is bigger than the container, you can use justify-content: safe center;
{
display : flex;
align-items : center;
justify-content : safe center;
}

Related

How to position the bottom-most container in a grid layout [duplicate]

This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 2 years ago.
Here's a quick demo of what I have:
https://codepen.io/brslv/pen/RwobvgP?editors=1100
So, there's a .container div, which is a grid with grid-template-rows: 100px auto auto.
I need to be able to:
the whole layout should be the height of the screen (100vh), and the middle div should be scrolling, if the content gets too high.
keep the top-most div fixed height
have the middle div span the whole height of the page minus those 100px for the top div and minus the bottom-most div (which should be "fluid" and expand, depending on the height of the contents in it)
as described above, have the bottom-most div expand, depending on the height of the contents in it (in this case an autosize-able text area), but always stay on the bottom of the grid as small as possible, with, let's say min-height: 100px.
So essentially:
|------------------------------------------
| Section A: 100px
|------------------------------------------
|
|
| Section B: 100% - A - C(variable height)
|
|
|------------------------------------------
| Section C: variable height, min: 100px
| (here is the autosizing text-area)
|------------------------------------------
In my demo It's working as expected (https://codepen.io/brslv/pen/RwobvgP?editors=1100). But, if there is only one or two items in the middle div, it breaks, because the middle div isn't high enough and the bottom most compensates it, which is what I want to avoid.
I want to do it css-only, but if it's not possible I'll have to write a small JS to resize the middle one "by hand"...
Any ideas how to approach the problem with css-only?
You can change your css code and make it:
.container {
height: 100vh;
display: grid;
grid-template-rows: 100px 1fr auto;
}
What do you want is the 1fr. In this way the middle div will fill all the available empty space. See here for details about the fr unit: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_fr_unit

Why does flex-direction: column and align-items: center; not position vertically? [duplicate]

This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 4 years ago.
I have a form that I want to move down using align-items:center property. This form is inside a parent wrapper div and has the id of left. As align items is used to position vertically, why does the left div stick to the top and not move down to the center?
To make it clear what I expect to happen, I have included an image
https://twitter.com/yama_code/status/1061751980400488449
The left div has the following properties
display:flex;
flex-direction:column;
flex:1;
align-items:center;
height:100vh;
The reason is because align-items affects the child elements, or the elements within the flex container.
Try instead putting the element you wish to be centre-aligned inside of a parent with #left's properties.

CSS: Transition of horizontal scroll menu is not smooth

I would like to make the transition of the menu to be smooth. The problem is when you click the arrows, the 2nd div will show on the bottom of the 1st div, making it not smooth to look at. pls see below for my code:
Pls see my code here:
http://www.codeply.com/go/mdMPOkmFVH
in your code you need to do some basic change in CSS, your CSS should be as follows
.btn-arrow {
display: inline-block;
text-align: center;
}
.effects-list {
text-align: center;
}
.col-xs-4 {
min-height:20px;
}
Here you need to set minimum height 20px for class .col-xs-4, The reason behind this is the jquery function needs to set sliding element to have position absolute, and you were setting it to relative by force. and if all child elements in divs are absolute elements, then absolute elements won't acquire it's space in parent div and that is why it will make parent div's acquired content will be empty. so it will treat it as empty div and set it's height as 0px, and won't show anything in the div... so here we are specifying it's minimum height to solve our issue.
Another thing that we could have done is adding white space to the parent div
e.g.
<div class="col-xs-4" id="effects_menu"> </div>

stack flex items to bottom of flex container

I am trying to align/stack 3 items to the bottom of a display:flex div. The only way I could manage it is by adding a 4th div on top & use javascript/jquery to adjust its height dynamically essentially to push those 3 items to the bottom.
Is there a pure CSS3 way to do this without resorting to javascript/jquery? Thanks
Here is fiddle. The 3 divs I want aligned/stacked to the bottom are .searchForm, .tweetForm and .myMsg. I'm currently resorting to putting a .fudgeBox on top to push them down to the bottom.
Add this:
.searchForm { margin-top: auto; }
You can scrap the spacer div and all the JS.
An alternative would be justify-content: flex-end on the flex container (.sideRight).
auto margins demo
justify-content demo
Learn more about justify-content and auto margins here: Methods for Aligning Flex Items
In your .sideRight css use justify-content instead of align-items. When you use flex-direction: column the flow direction changes to vertical so the usage of justify-... and align-... basically switch.

CSS - how to force text input fill remaining space of container

I have div and inside that div are floated child divs and one text input. I need force that text input to fill remaning horizontal space and stay on same line unless some min-width condition places that input to next line. Is it possible? I don't wanna use javascript for that.
here is example (write tag and hit enter)
EDIT EXAMPLE: I have div with 300px width. It contains 3 left floated divs with various width (for instance 30, 60, 100) and one text input. I want to have that text input on same vertical position like that floated divs, so it must automatically shrink to fit remaining space (300-(30+60+100) = 110px). That text input has some min-width, so it prevents it from getting to small and in that case it jumps to next line).
http://plnkr.co/edit/sulxnvR58LnQqyI7ddFK?p=preview
You could try adding something like this:
style="width: 100%; min-width=2000px;"
http://plnkr.co/edit/uuL91pnUBkBRHMziaGBs?p=preview
Can't you just use percentage width for the input and overflow hidden?
Add this CSS
div.tag-wrapper input[type=text] {
width: 100%;
}
div.tag-wrapper {
padding: 5%;
overflow: hidden;
}

Categories