This question already has answers here:
Vuetify text field border missing
(2 answers)
Closed 4 years ago.
How to override a v-text-field?
Actually I am trying to make a text field that should initially have a thin line over which a label/placeholder will be displayed. When I click on it, the label must float up (like a superscript) and that line should become slightly thick along with change in color.
In Vuetifyjs such a text-field exists , but when I copy paste the component , nothing of that sort is happening. The colour isn't changing , infact when that text field is not selected , we cannot see any sort of line , just the label.
I tried using class="input-group--focused" but in that case , the label is already Floated up. The line is present but its opacity is high , ie its black instead of grey. Please help me , it would be great.
I looked at my dependencies , I am running the latest version of vuetifyjs: 1.0.10
Something like a GMail login Form
Ok I'll give it a go and presume you didn't wrap your app in v-app
From docs:
In order for your application to work properly, you must wrap it in a
v-app component. This component is used for dynamically managing your
content area and is the mounting point for many components.
<div id="app">
<v-app>
Put <v-text-field /> somewhere inside
</v-app>
</div>
And of course, check example layouts and see which one works for you.
If it doesn't work, see related question where OP included v-app.
Related
I want to have a page which has two main components. On the upper half a textarea on the lower half some input fields. The split should be 50:50. The problem I'm facing:
I cannot tell the textarea to fill the complete height when displayed. I know I can use some cdk..MinRows or ...MaxRows but therefore I need to know the whole height before. Additionally the underline looks also quite strange, e.g.
How to fix it? Does it work with Material or should I use plain HTML textarea? My project
I'm using the Inovua React Data Grid for a project, and we are trying to make some subtle changes to increase the amount of data we can see on a smaller grid. We only have limited space, so we're trying to remove unnecessary clutter. I have been struggling to find any answers to my questions on the API reference documentation, which in my opinion is quite lacking.
Trying to decrease the padding- I believe there is a default padding of 8px within the grid, but seemingly nowhere to change it. I want to trim it down a bit, so it appears more like an Excel sheet.
I want to remove the header ellipsis!! There literally is a page in their reference docs for this (columns.headerEllipsis), but it just doesn't work when I try it. Perhaps they're demo/example is just awful, but I try adding headerEllipsis: false as a column property and my terminal tells me it 'isn't a known property'.
This seems like bad design on their part, but when a column/data gets trimmed (with or without ellipsis) because the text is too long, hovering over it does not display the entire text. Is there no way to change this?
I have considered writing a custom header render function to specifically change the ellipsis style settings to solve (2) as well as to render the headers as a tooltip to solve (3), but this seems excessive. Is there a better way to do this?
Thanks!
Still unable to solve the padding issue (1), but I was able to easily resolve (2) and (3) by building that custom header render function after all. It wasn't difficult, here is what I did:
const getHeader = (name: string) => {
return (cellProps: CellProps) => {
cellProps.headerEllipsis = false; // disables ellipsis
return <div>
<Tooltip title={name}> {/* material-ui Tooltip: */}
<span>{name}</span> {/* displays text on hover */}
</Tooltip>
</div>
}
};
And then I just added this line where I defined columns:
name: e,
header: getHeader(e), // add this line
By defining the custom header render function, it also overwrites a lot of the default styles (i.e. headerEllipsis). This actually made it much easier to adjust the spacing and shrink the columns in the grid, so even though I couldn't find the solution to (1), this custom render function is definitely the way to go!
I'm trying to implement the replying input in React Native and I'd like to have a possibility to render the person name I want to reply to at the start of my reply text. I attached the example image. This Input will be multiline and it's important because I was thinking about adding some padding for my reply TextInput and just absolutely position the Person Name text at the padded space.
It looks like a possible solution but:
How to do it if we have multiline Text? if we add some padding for the TextInput it will affect all lines when I need only the first one
The person name text could have various width so the padding value shouldn't be hardcoded. I think it could be solved by just rendering the Person name text first, calculating its width, and the set the padding for the TextInput but even in this case we'll face the issue 1)
Is it possible to achieve this feature somehow?
Thanks for any help!
You could have a nested style.
<Text style={styles.username}>#Rosemary#9234<Text style={styles.body}>I agree with you!</Text></Text>
I'm trying to create a BIRT report. The code and query side of it works just fine, but the display is rather wonky.
There's one column whose text contents are rather long, and instead of showing some text and allowing scrolling of the text (which is the behavior I'd like there), it simply shows up as a very vertically long text block; kinda ruins the report a bit. I've also tried setting the width on the column, but no dice there either. Any ideas?
Also, as an aside, how do I get the table's columns to have grid lines? I can do that on the rows, but I can't seem to figure out how to do that for the columns. If anyone has insight into that issue, it'd be appreciated.
Here's a screenshot of the issue
Here's my BIRT report XML, without headers and footers in order reduce characters
I think there is no way to use a scrollable view element inside your report, because the output by the default html-emitter is completely static (I would like to see a different answer if this should be wrong).
To your second Question about how to add a border to a column. Click into the cell of your table, click on "Border" inside the "Properties Editor" and select the borders you like to use. This should be repreated for all cells where you want to use the borders, because this configuration is not applied for a whole column but just for one cell. If you want a border for the whole column you need to setup the border for every cell in the column.
If you have already a data cell inside your table cell, you can use the outline view to select the table cell instead of the data cell:
I'm trying to use a custom Text component to show a series of comments. I got
the original idea from:
http://www.eonflex.com/?p=40
I've got the base case working but I am stuck with 2 problems I cant seem to
figure out:
Since I am drawing around the text, the actual height of each bubble is
greater than that of the Text field, as a result, the last bubble is always
chopped off. I have tried explicitly overriding the height getter, and adding
some padding, but I cant seem to get it right. You can see an example here:
http://test.lambandtunafish.com/bubbles/CommentTest.swf
In my layout, I have 2 VBoxes (one nested inside the other). The first vbox
shows a form where the user can enter a comment, and the second box has all the
comments. In order to ensure that the scrollbars only show up on the second box,
I set minHeight="0" on the nested VBox, but then for some reason, some comments'
text is shifted to the right. You can see an example here (look at the first
comment): http://test.lambandtunafish.com/bubbles/CommentTest-minHeight.swf
Rather than posting the code here, I've provided some links:
Container: http://test.lambandtunafish.com/bubbles/CommentTest.mxml
Bubble: http://test.lambandtunafish.com/bubbles/CommentBubble.as
If anyone has any ideas, I would appreciate it.
Thanks!
Have you considered adding padding to you VBoxes?
<mx:VBox id="vBox" verticalGap = "100"/>
There is a nice example here