I have an input with an add-on which i have created a custom focus as i wanted the '%' add-on at the end of the field to also focus when i click in the field. All this is working fine but i have noticed a niggle where when the error is displayed when you click in/out the input is causes jumping.
I have created a fiddle here
I know the issue is with the height in the .input-group:focus-within CSS as if i remove it it stops but then the issue i then have is that if you remove the height when the error is displayed, the blue focus box is displayed around the error message also which i don't want.
Please view my fiddle for all code and remove the height to see what i mean when i mention the issue i have without it.
You need to rearrange your layout. Place the error outside of the input-group and show/hide it in respect to the input validation.
There is til some jumping, and it is because bootstrap adds and remove box-shadow and border from the input.
https://jsfiddle.net/jsrm1o0x/2/
Related
The Goal
I want to have a v-data-table that is editable and looks "nice".
The problem
Adding a v-text-field to make it editable also increases the row-height to a very eye unpleasing level
Original view:
With v-text-field inputs
The quesion
How can I decrease the row height to resemble the one without v-text-fields.
As a Bonus
Because I am quite new to this whole Front-End-Development-Kind-Of-Thing, how would I go about it identifying what is causing this "height issue"?
PS: I've tried to add a JSFiddle but I cant even seem to be unable to figure out how to display the v-data-table correctly...
The basic draft can be found here
Is it necessary for your table to be editable within the columns? How do you decide when to pass data back via request to your Backend? After the user left a field?
If it is not necessary to have the edit option within the table, I would just use the action buttons you already have in your table to trigger a modal in which you can edit the fields. This also allows you to have proper form control before a user can submit a request. There is also a Vuetify Codepen with an example how to do this Codepen
If it is necessary you should implement the v-data-table as v-data-iterator which is essentially the same functionality-wise, but allows for complete control over the look. https://vuetifyjs.com/en/components/data-iterators/
As to how to identify the problem with the v-text-field height you have to use your browser dev tools. You would then realise that the input has default paddings and margins but also a whole lot under the hood. It e.g. allocates space for error messages to pop up and for a label to go above the field.
And how to fix your JSfiddle you can read in the getting started section of the vuetify documentation under CDN https://vuetifyjs.com/en/getting-started/installation/#usage-with-cdn.
you can use the "dense" property for Lower height of v-data-table inputs
https://vuetifyjs.com/en/components/data-tables/#dense
I use a Hide/Show .js script that hides some checkboxes and on the right side there is the search field when I click to hide it I want to expand.
Ex.
Before hidding:
Before hidding Image
After hidding I want the search field to be expanded 100%
After hidding Image
I searched for 2 days something and can't find a way to make it expand I use the bTemplate engine to store the HTML code.
Did you try changing the CSS properties through the "setAttribute" method of the elements in question through Javascript? Basically, the code you used to "hide some of the checkboxes" in the first place is pretty much like how you'd write the code to do the other things you're looking to do.
In other words, When you want the checkboxes out of view and the text entry box centered, as in your second reference pic, you could have the Javascript code written through the "setAttribute" method so that when a particular event happens, the css "display" parameter for the check boxes could be set to "hidden", the size of the text entry box can be increased, and the css "position" parameter for the text entry box can be set to have it centered, etc.
That is, of course if I understand your issue correctly. Can you provide the code you are using? I'm sure me or someone else could clarify things more if we could see what you have written.
Hope that helps at least a little! :)
I'm trying to make a material design inspired Tab component, and I'm having a lot of trouble getting a bottom border to show up on the selected tab. I understand that the best way to do this is to override the Tab style in the theme, but there's no way to set just a bottom border there. I even went so far as to use an ActionListener to set the border when the tab is clicked, but then the border only flashes for a moment, as it seems the UIID gets reset immediately after being selected.
I'm looking for an effect similar to the Skype android app, where the current tab is 'underlined' at all times.
How can I make the border appear?
You can set a 9 piece border in the style that has a solid or transparent/translucent color and a line on the bottom.
No need to subclass.
I've got a search box, the submit button of which I would like to have inside the box (a bit like bing) I've got some code from a couple of places which I hoped would do the job but I can't make the submit button appear on top of the search box
I've put together a fiddle but coz the image is on my machine it obviously doesn't pick it up, the code is there tho
http://jsfiddle.net/5a3Tr/1/
Anyone any ideas? I thought the z-index thing would work :(
Just remove position: relative from input.rounded - DEMO
I am having a problem placing a border around a single TextBox. For some reason when I put a border around it, SSRS Applies the border to plenty of other TextBoxes in the same area.
I have a TextBox that is part of a Group That is part of Tablix. I am doing the following
Right clicking the TextBox
Clicking TextBox Properties
Clicking Border
Clicking the outline preset / manually clicking each border in the preview.
Clicking OK.
After I do this, the border style is applied to any TextBox this TextBox I right clicked on touches.
I thought it might have something to do with the TextBox being in the group, so as an experiment, I got rid of the borders and set just the back color. That worked as expected. - Just the single TextBox had the back color.
This doesn't make any sense. Why aren't borders being applied to the single TextBox?
Today, during my search I saw your question as I was having the same problem.
I solved this problem for myself and now I am submitting an answer here so that others can use it.
Follow these steps:
Click on TextBox to which you have to give boarder.
Then, go to the Property Sheet which is on the right side of your IDE window. It will show all properties of the selected textbox.
Change Border property value in the Property Sheet
Now, you will see that the Border value(s) you specified in the Property Sheet has been applied only to the selected textbox, not to other text boxes.
Hope it will work for others just like it worked for me.