I am currently working on my first SAPUI5 mobile application. I found the options for horizontal layout positioning, but my labels are shown "too high". For display I am using Google Chrome.
My page theme is sap_bluecrystal and the content structure is as follows:
sap.ui.layout.form.SimpleForm (Max Container Cols: 2)
--> sap.m.Label (Text: Name, LabelFor: "Name")
--> sap.m.Input (Id: "Name")
There are some more fields following the same structure. The result is:
Has someone an idea how to solve this problem?
Thank you in advance,
Best Regards, Jonathan
You can use the editable property like this:
<f:SimpleForm id="form"
editable="true">
<f:content>
<Label
text="Name"
labelFor="Name" />
<Input id="Name"
value="DJ" />
</f:content>
</f:SimpleForm>
That should do what you need.
Here's an example (switch the switch to turn this on and off to see the effect).
Related
I'm using the
U.S. Web Design System (USWDS)
in a project I'm working on, and I'm struggling with something that seems superficially like it should be quite simple: How can I align form labels so they appear to the left of their corresponding inputs, instead of above them?
Some other CSS libraries call this a horizontal form but I've also seen it referred to as "inline" fields.
According to this answer it's possible to achieve the result I want using modern CSS Grid layout, but so far I haven't figured out how to make that play nicely with the USWDS styling, which does not use CSS Grid.
Can anyone help me to either:
Create a horizontal form using some combination of USWDS components and utility classes, or if that's impractical...
Produce a horizontal form by overriding the USWDS styling with custom CSS, but without causing too much conflict or breaking with the standard?
Below is a simplified snippet of my HTML:
<link href="https://cdn.jsdelivr.net/npm/uswds#2.8.0/dist/css/uswds.min.css" rel="stylesheet" />
<form class="usa-form">
<div class="usa-form-group">
<label class="usa-label" for="somefield1">Sample label</label>
<input class="usa-input" type="number" name="somefield1" value=0 />
</div>
<div class="usa-form-group">
<label class="usa-label" for="somefield2">Another label</label>
<input class="usa-input" type="number" name="somefield2" value=0 />
</div>
</form>
You can use flex on the usa-form-group to get them positioned next to each other as shown in this Code Sandbox, with some other minor touchups to the element margins https://codesandbox.io/s/nostalgic-moon-q7i7f?file=/styles.css
Making a form with Material-ui + react. Is there a way to layout the labels to the side of input fields? It's much more readable.
so like this:
name [input]
title [input]
rather than
name
[input]
title
[input]
I can only find fields that have the label and input area mashed together in one.
I could build my own component or a grid, but it seems this is an obvious layout that should exist.
docs page
https://material-ui.com/components/text-fields/
I got the same issue, the only way I've found to solve the problem was by using "sx" which allows you to override the CSS.
<InputLabel htmlFor="login" sx={{display: 'inline'}}>Login :</InputLabel>
<Input id="login" type="text" value={login} onInput={ e=>setLogin(e.target.value)} />
I am trying to implement the type ahead and all seems to be working. The only problem is something with the styling is wrong, it displays the dropdown like it is going to autocomplete but it is all blank.. the values are there and in fact if you hit enter they work.. but aren't being displayed
I should mention that I am using AngularJS with Ionic...
I'll paste my code here just in case.. any help would be great!
HTML:
<!-- UI BootStrap style sheet and js -->
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class='container-fluid' >
<pre>Model: {{Selected| json}}</pre>
<!-- <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"> -->
<input type="text" ng-model="Selected" typeahead="Unidade.Codigo as Unidade.Nome for Unidade in Unidades | filter:$viewValue | limitTo:8" class="form-control" />
</div>
and the Javascript.. I doubt this is the problem but can't hurt
$scope.Selected = undefined;
$scope.Unidades = [{
"Nome": "laskjdhflksjfg",
"Codigo": "11106600"
},
{
"Nome": "wertwertwertwer",
"Codigo": "11106601"
},
{
"Nome": "wertwertwertwer",
"Codigo": "11106602"
}];
I actually copied this example from here: http://plnkr.co/edit/1Sm17103S73nJbpb2PmK?p=preview
So I know it works....
Thanks Guys!
Do you really need Bootstrap together with Ionic?
There are some post on Ionic forum relating the question, for example https://forum.ionicframework.com/t/ionic-twitters-bootstrap-css-framework-again/8269/6
CSS classes of Bootstrap could interfere with Ionic ones.
Why not using Ionic Autocomplete or other similar components?
Can you confirm If the values are coming onto the DOM using Inspect Element or such and send the screenshots. Because this usually happens when there is an empty string. Like in this screenshot.
Your code according to your screenshot seems to behave the same. Also can you please elaborate when you say - when I hit enter it works. What do you see as the Model: value when you hit enter ?
I want to resize jquery mobile form elements that I am using Phonegap in mobile App. Now I want to resize and give more height to form elements based on some number or percentage which will depend upon screen size. I know jquery Mobile handle width by itself but I want to give height via JS so that all form elements' height increase by that specific ratio/percentage.
I know that JQuery Mobile CSS can be changed but I want to change height using JS on runtime not setting CSS once. So what is best way to do this?
I actually want to get screen size and give size to all elements according to some percentage. While if I see at jQuery Mobile CSS then there are a lot of thing that I need to set, and still not sure if it will be set. So is there some way to do that without modifying or rewrite whole CSS? Or I just need to write custom CSS and form elements ?
Any suggestion and effort will be appreciated.
Here is a fiddle demonstrating this with input elements: http://jsfiddle.net/ezanker/akgEa/
In this example I have 3 inputs of type text and a button which doubles their height each time you click it. The button iterates through each input, gets its current height and then sets the height to 2 times current.
<div data-role="fieldcontain">
<label for="textinput-fc1">Text Input:</label>
<input type="text" name="textinput-fc1" id="textinput-fc1" placeholder="Text input" value="" />
</div>
<div data-role="fieldcontain">
<label for="textinput-fc2">Text Input:</label>
<input type="text" name="textinput-fc2" id="textinput-fc2" placeholder="Text input" value="" />
</div>
<div data-role="fieldcontain">
<label for="textinput-fc3">Text Input:</label>
<input type="text" name="textinput-fc3" id="textinput-fc3" placeholder="Text input" value="" />
</div>
<input id="btnSet" type="button" value="Set Heights" data-theme="a" />
$('#btnSet').on("click", function(e){
$("[type='text']").each(function( index ) {
var curH = $(this).height();
$(this).height(curH * 2);
});
});
NOTE: depending what type of form elements you are using, setting height will not work for all of them. I suggest you look in the inspector at the generated code for your form and see what is the best way o set the height for each element type.
Hi all I have been looking around as I am fed up with the lack of compatibility for styling submit buttons.
I was looking at no other than facebook themselves source.
They do something like this:
<label class="uiButton uiButtonLarge Post">
<input type="submit" value="Post" />
</label>
They set the css display for the label as an inline-block and then set padding etc..
Is this the best way to do it?
Or is there an even better way?
Thanks!
http://www.tripwiremagazine.com/2010/03/35-essential-submit-button-enhancements.html
This tutorials should be fine, sure they're not identical with FB but there are crossbrowser stylings to pure css. Hope that helps.