on this page: https://www.bcidaho.com/mammography/
if you click "find a screening center" a table of information comes up...
how can i rotate the text in the last 5 cells?
obviously cross browser would help... this would allow the table to fit properly...
and do i have to set a height on the TDs to make it fit right?
Take a look at this page: https://www.udemy.com/blog/css-rotate-text/
in the section "Rotating Text with CSS Transform Property".
You have to create a class or id in your CSS file, and apply it to the text you want to rotate, not the div.
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'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
I was trying to style my form with Materialize CSS and there's something a little awkward with the data-success and data-error attributes: the words in the attribute appear to display in a vertical column, instead of displaying horizontally underneath the input field line. Here's a JS fiddle example: http://jsfiddle.net/8zgvyakn/1/. In a somewhat crowded form where such a lengthy error attribute may be necessary, the red text overlaps with other form fields. Is there any way around this, or is this a MaterializeCSS limitation?
The error text is an after of the label edit the width of the label to 100% and that should make the after 100% aswell.
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.
Working with GWT v2.5.1, I'm creating a DialogBox and filling it using HTML by calling dialog.setHTML(...) with this:
<h3>could not start.</h3>
<hr>
<p>These preferences must all be set before I can start</p>
I have no custom CSS. What appears on the screen is this:
You'll notice that there are big gaps in the left and right borders. Looking at the CSS for the dialogTopLeft and dialogTopRight classes, they extract the border from images/corner.png and the shown length of the border exactly matches the size of that image. In other words, the dialog is too big.
I tried removing the "no-repeat" directive on the background CSS attribute (using Chrome Inspector) but that repeats the entire border image, including the rounded corner at the top, and so does not appear contiguous.
I can't be the first person who's tried to put more than a single line into a DialogBox...
What's the trick to making the borders "repeat" and fill in the holes?
Wrap the HTML in HTMLPanel befor passing it to the DialogBox
DialogBox dialog = new DialogBox();
HTMLPanel panel = new HTMLPanel("<h3>could not start.</h3><hr><p>These preferences must all be set before I can start</p>");
dialog.add(panel);
dialog.center();
Thanks to #Moh for placing me on the right path.
The proper way to do this is to set only the dialog title using setHTML() and then create the body as a new panel and add it to the dialog.
DialogBox dialog = new DialogBox();
dialog.setHTML("<b>" + title + "</b>");
dialog.add(new HTMLPanel(message));
Adding buttons is left as an exercise for the reader...
GWT Dialoge box already have pre defined CSS.
you have to override or have to set your own style names using set Methods.
like..
dialogBox.setStyleName("yourcss");
Default css names starts with,
.gwt-DialogBox{}