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
Related
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>
I am designing a checkout form and really like how the Stripe checkout forms groups its inputs tightly together as seen here
I use bootstrap 3 and so far I have marked out the structure, but I havent been able to get the inputs and their borders to be aligned neatly like in the picture
My html
<div class="col-xs-12">
<div class="input-grouping">
<div class="top">
<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
</div>
<div class="bottom-left">
<input type="text" class="form-control" name="checkoutExpiration" id="checkoutExpiration" placeholder="MM/YY">
</div>
<div class="bottom-right">
<input type="text" class="form-control" id="checkoutCVC" placeholder="CVC">
</div>
</div>
</div>
Any advice?
If I was looking to replicate your example exactly, I would suggest suppressing the default presentation of the input fields (by removing the borders and background) and then wrapping them in divs which you can style as you choose.
I create design interface for web using Bootstrap 3. If it shown in large screen size, it looks like this:
but, if it shown in small screen size, it looks like this:
I've problem when it will be shown in small screen size. The script what I've done in
Bootply is not compatible in small size.
You need to place your label tags with your input tags inside the same columns.
DEMO
<div class="row">
<div class="col-md-3">
<label>Label1</label>
<input type="text" class="form-control" value="text1">
</div>
<div class="col-md-3">
<label>Label2</label>
<input type="text" class="form-control" value="text2">
</div>
<div class="col-md-3">
<label>Label3</label>
<input type="text" class="form-control" value="text3">
</div>
<div class="col-md-3">
<label>Label4</label>
<input type="text" class="form-control" value="text4">
</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.
Does anyone have any ideas of how to create a two panel modal. So for example one side would be a login form or something and the other side would be a list of what users get. Or one side would be a physical contact information div and the other side would be an email contact form. I tried to do two divs under the modal div tag and have one pull-left the other pull-right with each span5 or span6 but it didn't work. I ask because I have this issue. Also can anyone tell me why my contact form has so much space between the label and the input box? Go to scoopclassifieds.com (not trying to plug my site, can't post pics yet) and click contact us. I have placed the html mark up blow
<div class="modal hide fade" id="contactForm" aria-hidden="true">
<div class="modal-body">
<form action="" method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label">Email:</label>
<div class="controls">
<input type="text" name="email" id="email" class="input" />
</div>
</div>
<div class="control-group">
<label class="control-label">Subject:</label>
<div class="controls">
<input type="text" name="subject" id="subject" class="input" />
</div>
</div>
<div class="control-group">
<label class="control-label">Message:</label><br/><br/>
<div class="controls">
<textarea rows="5" class="input span4" name="message" id="message"></textarea>
</div>
</div>
<div class="control-group"><div class="controls"><input type="submit" name="contactUs" id="contactUs" class="btn" value="Contact Us" /></div></div>
</form>
</div>
</div>
Sorry if the code is so horribly formatted. I used cpanel text editor to develop it. I know its a bad idea but I had to do it as fast as possible to provide a live example.
Try putting a row-fluid inside the modal-body, and then 2 span6 inside that..
<div class="modal-body">
<div class="row-fluid">
<form class="span6">
</form>
<div class="span6">
</div>
</div>
</div>
You may also want to increase the default width of the modal..
.modal {
width:45%;
left:45%;
}
Demo on Bootply: http://bootply.com/69517