For angular material placeholder becomes a label when we enter value in the input control.
I am using my form for both view and edit mode. When in view mode I just disable the form so user can't edit it (based upon the user role and API takes care of it too)
However it looks pretty odd looking at control with placeholder text on it. Is there any CSS trick so that I can make placeholder value to be a label of that control and have the input shown as blank field (so it looks like no value is available for this control and placeholder actually becomes a label on the top)
Please advise
OK, I seems like my questions was not clear enough.
I found the solution and was pretty easy.
I used "floatLabel" attribute of mat-form-field and made is dynamic with form's disabled property.
if the form is disabled placeholder will be become label even if the input has not value available.
<mat-form-field appearance="fill" floatLabel="never">
<mat-label>Input</mat-label>
<input matInput>
</mat-form-field>
Related
This is one problem I can't understand. I'm using windows 10 and by default the form border should be displayed like this:
But for some reason or the other, my windows form app's form border is like this:
... despite the form border property is set to FixedSingle. I also tried the same with form border property Fixed3D but still it is of no use.
It would be great if someone could guide me about how this can be fixed and the reason my form's border is wired. Please download the images to get a clarity of what I'm asking.
NOTE
Fixed here means to get back the default form border.
I also use Bunifu Framework. However I don't know the relevance it has here
The image attached was taken during debugging
I have a typo3 server and using the mask extension. When an editor creates a new mask element, there isnt a title in the list view. Its always "no title":
I checked the database and found the titles in the db in the field: tt_content.header but no way to set them automatically oder manually by an editor. Anyone have an idea how the title can be set automatically? Oder manually by an editor?
ext:mask has the option to reuse existing fields of tt_content for new kinds of content elements (CEs). use it to get the bonus of better interoperability with TYPO3.
TYPO3 has a logic how to show records (content elements) in the backend. one of it is the usage of the fields header and description. if you reuse these fields your CEs will look like others automatically.
If you use other fields you need to declare your fields for usage AND in case you change the kind of a CE from your kind to e.g. TEXT with Media the header stays.
Especially header is handled in the layout/partial of FSC or CSC global for any kind of CE. if the handling/rendering is changed (e.g. special layout) in an installation your CEs need special effort if they have their own building of the header.
Try to use the same fields as existing CEs and your life can be easier.
I'm having the same issue, but I found a way around it for the meantime. I edit the mask element and chenge its type to something elseโlike Textโwhere I can set the title. After typing the title I save it, then change back to mask element and save again. This works by me without losing the content of the mask element. This way I can see the title in typo3 backend when I view as list or page or add content from another page. As I said, it doesn't solve the problem, but can help until there is a proper solution.
EDIT
I've just found another solution. You can add the title field to en existing mask element. To do it, go to ADMIN TOOLS > Mask, click your mask element to edit it. Add a new item by dragging the ๐ฆ๐๐ฟ๐ถ๐ป๐ด item (the one on top of the list of available items) to the right where your items are. Then in General under ๐๐ต๐ผ๐ผ๐๐ฒ ๐ณ๐ถ๐ฒ๐น๐ฑ dropdown choose an ๐๐
๐ถ๐๐๐ถ๐ป๐ด named:
๐๐ฒ๐ฎ๐ฑ๐ฒ๐ฟ: (๐ต๐ฒ๐ฎ๐ฑ๐ฒ๐ฟ)
Save, close, go to your page to add your title. This still doesn't add the title field automatically to all mask elements, but it is a step forward.
If anywhere, you should be able to set a static title automatically in your page tsconfig. You could to something like
mod.wizards.newContentElement.wizardItems.mask.elements.[title of your mask element].tt_content_defValues {
header = My Awesome title
}
Personally, I usually give every mask element a header field and ask content editors to fill it in.
See also this discussion on Mask elements and backend titles.
Hope, this helps.
I am working on a SAPUI5 app in which we do not want to add custom css to. Currently we are displaying text in a form which does not have the same height and styling as the inputs.
I'd prefer to change the text to an input with a pre-filled value so everything in the form has consistent styling but I need to differentiate that this should be treated as text.
The easiest way to do this is to remove the border but I cannot find away of doing this without creating custom css.
I tried borderDesign="None" but this does not affect inputs.
I'm using the Angular UI Bootstrap typeahead to display a customized list of suggestions as the user types into a text input form control. This form control exists inside a div using jQuery slimScroll in order to maintain a constant div size despite the size of its contents fluctuating. I really hoped the typeahead would display over everything like a regular html select dropdown, but unfortunately it does not, as can be seen in this plunker. I've tried futzing around with the z-index and adjusting the position and display properties; all fruitless endeavors.
Does anybody know how to get the typeahead popup to display over its parent border? If not, is there a way I could coerce the select tag to display HTML content so I can include glyphicons, emphasized text, etc. in the list of suggestions?
The problem is with the slim scroll - you are inside a div with relative position and overflow hidden (think of it as an iFrame). There is a small workaround...
You could, essentially set the position of the generated UL (.dropdown-menu) to fixed, set a height for it, then set an overflow:scroll...
It would work in some scenarios where the input field has a fixed position... otherwise you'd need to control where the input is and adjust the position of the auto-complete to follow, and a whole other bunch of nasty scripts.
Without looking at your application, I cannot understand why your have this particular architecture, but I can say that there must be cleaner options for handling autocomplete outside of slimscroll.
I just set typeahead-append-to-body="true" on the typeahead control and it worked. Not sure exactly why, but it's certainly a simple solution.
If I click a textbox for a webpage within a UIWebView is there a way to get the name of that textbox?
It seems like I should be able to use stringByEvaluatingJavaScriptFromString, but if I don't already know the name of the field or textbox, it won't be of much use will it?
I haven't tested it in the iOS webkit, but document.activeElement should give you the dom node of the currently focused element, if the user has selected an input field.
You can modify it's contents by setting the value attribute of the node.
If the user hasn't selected an input field, then the activeElement might be a DIV or BODY, or some such. You can check for this by examining the nodeName property of the node.
Depending on what kind of node it is, you may have to set the innerHtml attribute.