I have done a inline form using bootstrap. It don't work responsive if I try to minimize or shrink the width of browser. Not sure but are boot strap inline forms not responsive ? Controls just jumbled with each other. I cant change design of page. Kindly guide how I can correct this to work not jumbled and responsive in a clean and clear way.
Form in full width when it is ok:
Form in minimize browser or when screen width is reduced:
Here is my Markup:
<div class="row">
<div class="col-md-4">
<div class="col-md-3">
Round:
</div>
<div class="col-md-1">
<input class="form-control" type="text" id="roundNumber" value="<%= Model.Round %>" />
</div>
</div>
<div class="col-md-4">
<input type="button" class="btn btn-green" onclick="displayRound()" value="Display">
</div>
<div class="col-md-4">
<input type="button" class="btn btn-green" onclick="exportHistory()" value="Export history"></div>
</div>
You may wish to use the class prefix .col-xs- instead of md Grid Options:
<div class="row">
<div class="col-xs-4">
<div class="col-xs-3">Round:</div>
<div class="col-xs-1">
<input class="form-control" type="text" id="roundNumber" value="<%= Model.Round %>">
</div>
</div>
<div class="col-xs-4">
<input type="button" class="btn btn-green" onclick="displayRound()" value="Display">
</div>
<div class="col-xs-4">
<input type="button" class="btn btn-green" onclick="exportHistory()" value="Export history">
</div>
</div>
Related
I'm new to bootstrap and search a lot on this forum but couldn't find an answer to my question
I have the following code for 2 forms on my page
<div class="row justify-content-md-center">
<div class="col-sm-6">
<form method="POST">
<h3 align="center">Join a group</h3>
<div class="form-group">
<input
type="input"
class="form-control"
id="groupCode"
name="groupCode"
placeholder="Fill in the group code"
/>
</div>
<button
type="submit"
id="form-submit-join"
name="form-submit-join"
class="btn btn-primary"
>
Join
</button>
</form>
</div>
<div class="col-sm-6">
<form method="POST">
<h3 align="center">Create a new group long text</h3>
<div class="form-group">
<input
type="input"
class="form-control"
id="groupName"
name="groupName"
placeholder="Fill in the groupname"
/>
</div>
<button
type="submit"
id="form-submit-create-family"
name="form-submit-create-family"
class="btn btn-primary"
>
Create
</button>
</form>
</div>
</div>
</div>
This looks like this
2 columns that looks the same
when I make the window smaller so that the long text of the second column becomes 2 lines, the layout is wrong.
wrong layout
I would like it to be the same, so the input box of the first one should be on the same height as the second one
You can use flex for that!
I've added the flex classes to the form and an extra div as wrapper around everything but the headline to let 'justify-content-between' do its magic and push the headline and the div apart.
<form method="POST" class="h-100 d-flex flex-column justify-content-between">
<h3 align="center">Join a group</h3>
<div>
<div class="form-group mt-auto">
<input
type="input"
class="form-control"
id="groupCode"
name="groupCode"
placeholder="Fill in the group code"
/>
</div>
<button
type="submit"
id="form-submit-join"
name="form-submit-join"
class="btn btn-primary"
>
Join
</button>
</div>
</form>
https://jsfiddle.net/1jzgohs4/
In my current ASP.Net core I am trying to do the boot strap styling for search component on the page. I want the UI to look like
where the label/input box and the Search button to appear in the middle of the screen and the Create New To show in the same row but to appear right side of the screen
I have tried like below
<div class="center">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row mb-3">
<div class="col-lg-4 col-md-2 form-check-inline mr-0">
<label class="col-auto" for="holiday"> Find by Holiday </label>
<input type="text" class="form-control" name="SearchString" value="#ViewData["CurrentFilter"]" />
</div>
<div class="col-lg-4 col-md-2 form-check-inline mr-0">
<input type="submit" value="Search" class="btn btn-info" />
<a class="btn btn-link" asp-action="Index">Back to Full List</a>
</div>
<div class="col-lg-4 col-md-2 form-check-inline mr-0" style="text-align:right">
<a class="btn btn-info" asp-action="Create">Create New</a>
</div>
</div>
</div>
</div>
</form>
</div>
And the UI shows up like below
Can anyone help say what is that I am missing why all the things appear so close, I tried adding the style="text-align:right" so the Create new will appear towards the right
***** EDIT *****
You could try this way to implement accordingly as per your
expectations like below:
Asp.net Submit Form With CSS
<div class="center">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-md-12">
<div class="col-md-2">
<label class="col-auto" for="holiday" style="margin-top:10px;"> Find by Holiday </label>
</div>
<div class="col-md-3" style="margin-left: -50px;" >
<input type="text" class="form-control" name="SearchString" value="#ViewData["CurrentFilter"]" />
</div>
<div class="col-md-1">
<input type="submit" value="Search" class="btn btn-info" />
</div>
<div class="col-md-3">
<a class="btn btn-link" asp-action="Index">Back to Full List</a>
</div>
<div class="col-md-2">
<a class="btn btn-info" asp-action="Create">Create New</a>
</div>
<div class="col-md-1"></div>
</div>
</div>
</form>
</div>
Output
Note: You could set your CSS in different class file. I have shown you how could you achieve that using inline CSS snippet. You
could use separate file as well. But this is the right and convenient
way to do what you are trying to.
My first guess is caused by your class 'col-md-2'. You can change all of 'col-md-2' to 'col-md-4' to test.
try adding ml-auto on the 'Create New' button
<div class="row padding5px">
<div class="col-md-2">
<span class="login-block-header" id="lblAccountHeading">Account Number</span>
</div>
<div class="col-md-4">
<select id="ddlAccountNo" class="form-control">
<option>Select</option>
</select>
</div>
<div class="col-md-4">
<button id="btnReport" type="button" class="btn btn-primary">Show Report</button>
</div>
</div>
I have issue in bootstrap. I have added classes to control the widths, and they display in one row on a normal screen but re-sizing on a mobile doesn't display correctly.
You should use the correct bootstrap column size tags, col-xs- for mobile devices, along with the ones for a larger screen. So you can say class="col-md-2 col-xs-3" for example.
So your HTML might look like this;
<div class="row padding5px">
<div class="col-md-2 col-xs-2">
<span class="login-block-header" id="lblAccountHeading">Account Number</span>
</div>
<div class="col-md-4 col-xs-5">
<select id="ddlAccountNo" class="form-control">
<option>Select</option>
</select>
</div>
<div class="col-md-4 col-xs-5">
<button id="btnReport" type="button" class="btn btn-primary">Show Report</button>
</div>
</div>
For some reason.. the button in the input-group keeps wrapping to the 2nd line.. the only way I can force it to stay on the 1st line is to use CSS to make the width 80% for example. But then the spacing seems off between the 4 elements..
Is there a cleaner way of doing this? I dont even know why it's wrapping to the 2nd line.. maybe because I'm using this in a Modal?
EDIT: how it looks like http://imgur.com/sfWqATl
<!--3rd row-->
<div class="row form-group">
<div class="col-md-2">
stuff...
</div>
<div class="col-md-4">
<div class="input-group">
<small>Logo 1 ID / File Path</small>
<br />
<div>
<input type="file" data-file="headline.contents.logo1path" id="logoPath1" class="hidden" />
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-folder-open" type="button"></button>
</span>
</div>
</div>
</div>
<div class="col-md-4">
stuff...
</div>
<div class="col-md-2">
stuff...
</div>
</div>
I think you may have gotten a little mixed up in setting up the classes and elements to chain correctly based on the documentation. I re-wrote some of the code to model it from the bootstrap website, and it appears to work fine:
<div class="col-md-4">
<small>Logo 1 ID / File Path</small>
<input type="file" data-file="headline.contents.logo1path" id="logoPath1" class="hidden" />
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-folder-open"></i></button>
</span>
</div>
</div>
You can see the example here: http://www.bootply.com/EHvB2rn9YW
I have this problem with all the labels/inputs in my code. When my browser is in full screen it works fine, but when I minimize it even a bit, the input field steps over the label.
How do I avoid this?
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-1 control-label" for="input-username">Username:</label>
<div class="col-xs-4">
<input id="input-username" class="form-control" type="text" placeholder="Username.." />
</div>
</div>
Here's a jsfiddle for an example http://jsfiddle.net/2MdFf/
PS: Same goes for buttons: http://jsfiddle.net/9q949/
<div id="user-edit-buttons" class="form-group">
<div class="col-xs-1">
<button type="button" class="btn btn-danger" onclick="cancelUserEdit()">Avbryt</button>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-success" onclick="saveUser()">Lagre</button>
</div>
</div>
This is precisely why Bootstrap offers col sizing for multiple screens widths. Your column contents are overflowing their containers due to the sizing of those elements.
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-2 col-lg-1 control-label" for="input-username">Username:</label>
<div class="col-xs-4">
<input id="input-username" class="form-control" type="text" placeholder="Username.." />
</div>
</div>
They expect you to use different column sizes to make your elements work well in the different screen sizes.