input field changes once i enter input - css

I have a form which uses tabs. Any time input is entered into the text input box the padding changes, I cannot work out what is causing this.
I tried setting margins and padding with !important to see if i could control it, but this was not successful.

Related

What CSS property is controlling this input highlighting?

The image below shows an input field with the text 'test' in it, immediately after clicking in the input to gain focus:
I'm trying to remove the green highlighting (the green is coming from the OS highlight color). Here is another image illustrating the desired behavior with a normal, unstyled input:
As you can see, the standard behavior is a cursor appearing where the user clicked, as opposed to highlighting the entire text with no cursor. What is causing this behavior?
The styling for this element is scattered all over the place, and inspecting the computed properties doesn't seem to reveal anything unusual to me. This behavior is present in Chrome and Firefox.
It appears something is selecting the text on focus. You could use javascript to collapse the selection on focus.
http://developer.mozilla.org/en-US/docs/Web/API/Selection/collapse

textinput box with inline image

Is there any way to create a textInput box for flex mobile with inline image without using textflow ?
Basically i need a text input component , so that user can just use it as normal text input box but to it images can also be entered inline with text. To enter images user can select the image from list and that image will get inserted at the current cursor position.
If you look at any platform, there is no user experience (as far as I've seen) that lets you add images in the text input box. It's always been straight text, except for android which replaces certain text with icons (like :-) becomes an android icon). I don't think your users would expect that behaviour. If you really do need it, I would recommend you create a custom skin for your textinput box and add that feature into it, but it won't be easy to do.

Prevent Chrome/Browsers from resizing/restyling form elements

Chrome has some cute features to make the selected form element (input ect) stand out like adding a border color and, more annoyingly, it slightly reduces the margins on some of my form elements after they've been selected, shifting the page slightly each time a text entry box is selected.
It's not the textarea draggable resize effect that chrome has, it's effecting input elements that should have a constant size, but they automatically change once selected.
Is there any CSS to disable this feature, or do I simply have to make sure my text box margins/padding are set up such that Chrome doesn't resize them?
Here it is
textarea { resize:none; }
I love working on other people's sites...the problem was javascript they were using to restyle form elements after click and I have no idea why. Solution was to remove that junk.

How to avoid the behavior of set htmlText in RichTextEditor?

I'm having this problem of adding an image to the textArea in RichTextEditor (RTE) on the fly and this image seems to "reset" the html properties of the textArea.
Better explained:
The user starts writing something in the TextArea (with Verdana in size:12 font settings). When he adds an image to the text area, the cursor right after the image gets very small and the font settings are reset to HUM777B in size:2.
How could I avoid this behavior?
It seems Flex adds additional HTML code before the image tag. If there was any way to avoid this I would be able to add my own settings to the tags.
Just before you programmatically add the image to the textArea, create a variable and store a reference to the textArea styling info. Set the styling info using this variable after you have added the image.

Keep A Constant Table Size?

I currently have a table that has a few hidden text boxes... The text boxes become visible when certain actions are performed.
The table though changes size according to when the textboxes are visible or now. Ex. When the textboxes are visible the table grows, and vice versa.
I would like to keep the table size at its max size ( size when the text boxes are visible) even when they are not.
Is this possible?
Thanks!
One way is to have something inside the td tags, like a This will cause the td to render.
Another way is to set the controls to "hidden" instead of "none". Hidden allows the controls to still be rendered to html, just not displayed. None will cause the controls to not be rendered at all.
I don't know if the "hidden" setting will still grab the space you want. You might still need the non-breaking space control.

Resources