this is my current HTML for display a form field with bulma.
<body>
<div id="root">
<nav class="navbar is-primary is-navbar-sticky">
</nav>
<section class="section">
<div class="container">
<form>
<div class="field">
<label class="label is-medium">
"Title"
<div class="control">
<input type="text" class="input is-medium is-danger" placeholder="Put the title of item here" required="" value="">
<p class="help is-danger">title's length should be equal or greater than 10. Current: 0</p>
</div>
</label>
</div>
</form>
</div>
</section>
</div>
</body>
So far so good.
A problem is that the input will take full width on each breakpoint, it's too much for a desktop resolution.
How to make the input only takes full width for mobile breakpoint while it could take a certain width after the mobile breakpoint.
Is there a bulma way to do this? Rather than write my own css rule?
Your using bulma framework So assign grid system of bulma framework you can use class column in your input element and you can use how much column u you want to set width of input field
<div class="control">
<input type="text" class="input column-12 is-medium is-danger" placeholder="Put the title of item here" required="" value="">
<p class="help is-danger">title's length should be equal or greater than 10. Current: 0</p>
</div>
Related
Given:
Codepen
Code:
<form class="mt-lg-3" autocomplete="off">
<div class="form-group row">
<div class="col-sm-3 col-form-label text-sm-right pr-0">
<label for="id-form-field-1" class="mb-0">
Name
</label>
</div>
<div class="col-sm-9" style="background-color:yellow">
<input type="text" class="form-control w-auto" id="id-form-field-1"><i class="fa fa-cogs mr-5"></i>
</div>
</div>
</form>
Required:
Position cogs icon on the right of the input field
Auto-stretch input element width to use all the space available taking into consideration icon's width and margins
Do not use .form-inline class on parent form element
How can this be achieved without using floats?
Thanks!
we're using this lib : https://github.com/angular/flex-layout
so far, we have below code to achive the fxlayout, but it did not work in mobile device.
<div fxLayout="column" id="width">
<div class="table-cell" fxLayout="row">
<div fxLayout="column" class="columnlabel">
<label class="f_label margintop">width </label>
</div>
<div fxLayout="column leftpadding">
<input type="number" matInput
style="font-weight: bold;background: white;margin-top: 2px;" name="width">
</div>
</div>
</div>
what i am looking for is,
when it is mobile device want input control as underneath to label
when it is large device want textbox on right side
but in some case want input control on right side in mobile also, for example, tongle switch control.
please click on below link for sample representation, and can you please guide me what i am missing ?
sample
provided sample work on stack blitz as requested in comment. Thanks
https://flex-layout-angular-material-wqeqvc.stackblitz.io/
https://stackblitz.com/edit/flex-layout-angular-material-wqeqvc?file=app/app.component.html
What you want to achieve is probably something like that with their responsive API:
<div fxLayout="column" fxLayout.gt-xs="row">
<label class="f_label margintop">Sports </label>
<input type="number" matInput>
</div>
<div fxLayout="column" fxLayout.gt-xs="row">
<label class="f_label margintop">Country </label>
<input type="number" matInput>
</div>
By default with fxLayout, it will be in ROW and when the screen is bigger than xs, then it's in column with fxLayout.gt-xs
I am trying to create UI with different containers having different input type elements.
Below is code snippet to embed datetime picker in row with label on top and datetime picker below,but its not aligning properly as the datefrom and dateto in the same row.
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-md-5">
<div class="row justify-content-start">
<div class="input-group date col-sm-6 " data-provide="datepicker">
<label for="DateFrom" class="control-label">Date From</label>
<input type="text" class="form-control" id="DateFrom">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
<div class="input-group date col-sm-6" data-provide="datepicker">
<label for="DateTo" class="control-label">DateTo</label>
<input type="text" class="form-control" id="DateTo">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</div>
</div>
Please let me know how can align the fields in different containers on the screen horizontally inside big container.
What other css rules are effecting the label? it looks like DateTo either has an alignment rule or an offset also. I sugest using the inspect elemt tool and checking the computed style rules on both the label and its containing div. They have the same class so something must be different.
I am using the Bootstrap 4.0 (non-beta) validation and have a problem to display the invalid-feedback text.
<div class="form-row">
<label class="form-control-label">Name:</label>
<div class="col-4">
<input class="form-control is-invalid" min="0" type="number"/>
</div>
<div class="col-4">
<div class="invalid-feedback">
Invalid Feedback Text
</div>
</div>
</div>
In the above example the text "Invalid Feedback Text" is not displayed.
The reason for it is that the invalid-feedback div is not a direct sibling of the the input control.
This has been an issue with the alpha/beta versions however I was under the impression that this has been fixed in the 4.0 release. (At least the relevant ticket has been closed.)
So, how can I use the bootstrap validation if I can not have the feedback text as a direct sibling of the relevant input control? (It is simply not feasible in my application.)
Here is a fiddle:
https://jsfiddle.net/zygrsrox/
You're right, the intention is that the input is a sibling of the feedback message. The only way you can force the invalid-feeback to show is to use something like d-block (or some custom CSS selector). Perhaps you can add d-block programatically in your app during validation.
<div class="form-row">
<label class="form-control-label">Name:</label>
<div class="col-4">
<input class="form-control is-invalid" min="0" type="number"/>
</div>
<div class="col-4">
<div class="invalid-feedback d-block">
Invalid Feedback Text
</div>
</div>
</div>
I have some "col-md-12" divs on forms that appear to "cover" preceding inputs such that they are not clickable.
I have created a bootply with Bootstrap 3.0.0 to illustrate the issue. unclickable inputs
If I make the same bootply with bootstrap 3.0.3 then the input fields are now accessible clickable inputs
What I want to know is whether this is a bootstrap bug that has been fixed or whether my layout is breahing some rule or other?
you need to put your cols into a div with the row class
<form>
<div class="row"> // HERE
<div class="col-md-6">
<label class="control-label col-md-4">Home Phone:</label>
<div class="col-md-8">
<input id="contact_detail_home_phone" name="contact_detail[home_phone]" size="30" type="text" value="123 5668" class="form-control">
</div>
</div>
<div class="col-md-6">
<label class="control-label col-md-4">Work Phone:</label>
<div class="col-md-8">
<input id="contact_detail_work_phone" name="contact_detail[work_phone]" size="30" type="text" value="582 5135" class="form-control">
</div>
</div>
</div>
<div class="row"> // AND HERE
<div class="col-md-12">
<label class="control-label">Notes:</label>
<textarea cols="40" id="contact_detail_notes" name="contact_detail[notes]" rows="4" class="form-control"></textarea>
</div>
</div>
</form>
If you use medium size columns col-md- you can only have total 12 column units per each <div class=row>.
So, don't put more than total 12 units of col-md instead one row.
I assume this is limitation of doing layouts with columsn, floating divs and web page rendering legacy.