I'm trying to figure out which piece of CSS is making the text shrink by a very tiny but noticeable amount in the cells when you select one of them
Here's a code sandbox. Just click on one of the cells to focus it and you'll see what I mean:-
https://codesandbox.io/s/material-ui-table-virtualized-t2xkt
NOTE: when you select a cell, it replaces the plain div with a customised Material UI TextField
Which CSS property do I need to adjust to ensure that the text size and position stays uniform when the cell is focused or not focused?
You were right it was the padding. Solved it by remove a pixel from the padding-top in the div within the table cell when not focused
Related
I want to set up a component with a coloured background rectangle and a text, that is ready to be resized in width and also automatically resizes its height based on the length of the text.
For now I can only resize the height of the component manually, but would prefer if the component can do this automatically, like HTML does.
I added a constraints top, left&right to the text layer. And constraints top&bottom and left/right to the background layer.
Have a look at the component, the current and expected instance.
Does anyone have a helping hand on this?
Press F then click/drag to create your colored background rectangle.
Press T to create your text layer inside the frame and add constraints to it as follows: top & bottom and left & right.
Select Auto Height in the right-side panel under Text.
See detail.
Readjust the width of the text layer to your preferred size and center it inside the frame.
Select the frame layer (parent) which should contain the text layer inside of it (child).
Press Shift A to transform the selected frame into Auto Layout. Notice the icon changed.
Now, to resize, select the text layer and drag ‘n’ drop.
See result.
I have a QComboBox which I have populated with addItem() repeatedly, and then selected an item with setCurrentIndex(). The trouble is that some of the text is wider than the width of the box and it shows the text moved to the left so the right-hand-side is visible. I want the text in the edit box to be positioned the same as the text in the drop-down box (so the start of text is visible on the left-hand-side, and any oversized text unseen on the right).
Some suggested reasoning: I think it may be trying to ensure the cursor is visible, after leaving the cursor at the end. But I have tried using setCursorPosition(1) but there is no such function in QComboBox.
I have an ng-grid set up as a matrix with a text column and about 36 number columns. I'm trying to create a hover popup type menu that will allow the user to add a comment to a specific cell value. I've added a hidden div to the cell template for each cell which I can display on hover.
The issue I'm having is with the overflow of the hover menu. The "Edit..." text is clipped off by the edges of the cell so I only see "Ed".
I've tried adding 'overflow: visible' to the cell but this hasn't worked. Do I need to do this with javascript instead?
Yes I had to use JavaScript instead.
In particular I have a GWT project with a
TextArea element which I want to conform to a set width and expand as much as needed to the bottom.
ListBox element which I want to conform to a set width and expand vertically to show the entirety of the displayed list item.
Those are two widgets using replaced elements: <textarea> and <select> respectively.
for the TextArea, there's no way to make it really "resize automatically" other than listening to events and computing the new size (there's actually no need to compute the new size, you can just let the browser do it; see http://phaistonian.pblogs.gr/expanding-textareas-the-easy-and-clean-way.html)
for the ListBox, it's impossible to have the items' text wrap. See Word wrap options in a select list for a similar question in pure JS.
Set the width to whatever number and set height to auto.
I would like to achieve effect visible on the screenshot below that is content of the table cell (that blue cell with Michal Aniol...) should be fully visible but cell's width should stay the same.
How do I do that?
I am open for solutions requiring heavy use of javascript as the rest of the application and also table itself will be generated by dojo.
Having colspan > 1 is not an option because it will not work in other cases. I really want to use just single cells as this will help me with other functionality.
Screenshot http://uppix.net/4/d/9/8cfc6aba556405f910871598afa10.png
Markup and css: http://jsfiddle.net/sGkpq/
style.less http://pastebin.com/waXWDf4J
To make my question self-contained in case links die as #Sparky672 pointed:
I wanted to have table cells of same size and if content in a cell is bigger than the cell itself then content should still display and flow to the next cell. So text in a cell if longer than the cell then it should overflow to the next cell overlaying its content.
Just remove overflow-x: hidden from table.reservation-table td. The text will continue past the end of the cell.
Of course, if you want it to work when the name is longer than the cells behind it (eg, Michal only booked one day) that would be more complicated, but probably doable.