Currently when I have my window at full width my items appear like so:
When I make the window smaller the Submit button moves up.
How would I be able to set it to stay evenly centered?
Here is my code:
<form>
<div className="row">
<div className="col-sm-3">
<label>
Name:
<input type="text" name="name" />
</label>
</div>
<div className="col-sm-3">
<label>
Phone:
<input type="text" name="name" />
</label>
</div>
<div className="col-sm-3">
<label>
Email:
<input type="text" name="name" />
</label>
</div>
<div className="col-sm-3">
<input type="submit" value="Submit" />
</div>
</div>
</form>
This is in a react component that is why it's className.
either...
Flex Box and justify-content: space-between;
Css grids and grid-template-columns: repeat(4, 1fr);
Related
<div class="modal" id="myModal" style="width:50%; top:15%;" role="dialog" >
<div class="">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-bodys" style="padding:20px 8px 20px 20px">
<a style="background: #EAEAEA;" class="wt-closebtn close closeButtonJoinNOw" aria-label="Close"><i class="fa fa-times" data-dismiss="modal"></i></a>
<form id="wt-single-joinnow-form" class="row">
<h2 class="col-sm-12"> Join Us Now </h2>
<div class="form-group col-sm-6" >
<label for="usrname"> First Name</label>
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="Enter your first name">
</div>
<div class="form-group col-sm-6">
<label for="usrname"> Last Name</label>
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="Enter your last name">
</div>
<div class="form-group col-sm-12" >
<label for="usrname"> Email Address</label>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your email">
</div>
<div class="form-group col-sm-12">
<label for="psw"> Password</label>
<input type="password" class="form-control" minlength="8" maxlength="16" id="password" name="password" placeholder="Enter your password">
<span id="password_strength"></span>
</div>
<div class="form-group col-sm-12">
<label for="psw"> Re-type Password</label>
<input type="password" class="form-control" minlength="8" maxlength="16" id="pass2" placeholder="Re-type your password" onkeyup="checkPass(); return false;">
<span id="confirmMessage" class="confirmMessage"></span>
</div>
<div class="formRadio123" id="customrediobtnmsgid">
<label>I want to start as:</label>
</div>
<div class="formRadio" id="customrediobtnid">
<input checked="checked" type="radio" class="" id="userTyp" name="user_type" value="freelancer">
<label for="Freelancer">Freelancer</label>
<input type="radio" id="userType" name="user_type" value="Client">
<label for="Client">Client</label>
<!-- <input style="visiblity:hidden !important; display: none;" type="radio" class="intersmodalclassclick" id="userType" name="user_type" value="Intern">
<label for="Intern">Intern</label> -->
</div>
<div class="problemSignUpError" id="problemSignUpError"></div>
<button class="btn btn-success btn-block" id="myBtn1" aria-hidden="true"> Join Now</button>
</form>
</div>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
I want to make this form responsive it is responsive for some sites but not responsive for the other so need to make it responsive . if anyone can guide me what to change in this code to make it responsive .I can share the css code for it as well as well as the form but I need to make it responsive on all mobiles devices . it works well on some but not on all .
Not responsive
Responsive
You can use #media rule and different css for different device
#media (min-width: 576px) {
//your css
}
You can change min and max-width according to ur device
you can use this css property to specify the width to your form. as soon the width of device will go down from 570(which is most of the cell phones) it will change
#media only screen and (max-width: 570px) {
/*
write the width and height of your form by using form property or class containing
the form
*/
}
<div class="container-full">
<div class="jumbotron text-center" style="background-color:#fff" ng-show="registrationForm">
<p class="genericText">Fill out the following information to create your profile.</p>
<!-- FORM -->
<!-- pass in the variable if our form is valid or invalid -->
<form name="goalsForm" ng-submit="submitForm(goalsForm.$valid)">
<div style='width: 100%; display: inline-block;'>
<div class="form-group col-xs-4">
<label for="exampleInputEmail1">Create Password</label>
<input type="Text" class="form-control" id="inputGoal" placeholder="Enter a password" ng-model="goal">
</div>
<div class="form-group col-xs-4">
<label for="exampleInputEmail1">Confirm Password</label>
<input type="Text" class="form-control" id="inputGoal" placeholder="Confirm your password" ng-model="goal">
</div>
</div>
<button type="submit" class="btn btn-default">Complete</button>
</form>
</div>
</div> <!-- /container full -->
The above is my code for my form, I am using the full width bootstrap layout within Angular.js. Here is a screen of the output.
The two input boxes are within a parent div that is 100% wide, I am trying to center the two input boxes so that it does not lose it's responsiveness when resized.
I have tried
.text-center
margin: auto
without any success.
How can I do this?
Thanks.
I want to add a Textfield input-group-addon. The problem is that when I use this class with a glyphicon the icon is not positioned right next to textfield see the image below.
Maybe someone has some hints for me - why is that?
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name2"></label>
<div class="col-md-4">
<input id="name2" name="name2" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geschlecht</label>
<div class="col-md-4">
<label class="radio-inline" for="gender-0">
<input type="radio" name="gender" id="gender-0" value="1" checked="checked">
männlich
</label>
<label class="radio-inline" for="gender-1">
<input type="radio" name="gender" id="gender-1" value="2">
weiblich
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geburtsdatum</label>
<div class="col-md-4">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'de'
});
});
</script>
</div>
</div>
Your code works fine with Bootstrap only (see this fiddle http://jsfiddle.net/WNAB8/1/)
The problem is in your own css. Use developer tools (F12) to find out what gives margin-right for the input or margin-left for the addon. Or optionally paste in your custom css so we can help you.
Update:
It definitely is because of given max-width for inputs. If for some reason you want to use max-width anyway, one solution is to give the max-width to .input-group:
.input-group {
max-width: 280px;
}
Demo: http://jsfiddle.net/WNAB8/5/
In your fiddle you are overriding bootstrap's textarea maxwidth option. Remove this from CSS:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Working example
If you want to change the width of your text areas, change it using the form layout. From your layout you should look at the horizontal form and width can be changed by placing the input into a div controlled with the col-*:
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
I am trying to use affix of bootstrap 3.
Its working fine but i need to do the button affix right to container not to window.
The problem i am facing is when i Ctrl-- to reduce screen size button get stick on right of window.(facing problem on large screen)
How can i stick button to right of container.so when screen size get large it display right to container.
Here is link: Fiddle link
.save-btn .affix {
top: 100px;
right: 0px;
}
.container {
border: 1px solid #ccc;
}
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<div class="save-btn">
<button name="submit" type="submit" value="Save" class="btn btn-orange btn-lg affix" data-spy="affix" data-offset-top="0">Save </button>
</div>
</form>
</div>
</div>
</div>
The jsfiddle is using BS 2.x, but your markup is for Bootstrap 3.
I created a Bootply (which includes BS 3 automatically): http://www.bootply.com/95296
I think you want to use pull-right and not affix to pull the button to the right.
I try currently to beautify my sources a little bit. For this I want to change the width of buttons and radio buttons to 80% and change the alignment to center. For the buttons I made css settings that works quite fine, but I am not able to center the radio button group.
HTML:
<div data-role="page" id="testPage" data-theme="e">
<fieldset data-role="controlgroup">
<legend id="SettingsDifficulty"></legend>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-1" value="3" />
<label for="radio-choice-1" id="label1" class="activeOnce">Radio 1</label>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-2" value="4" />
<label for="radio-choice-2" id="label2" class="activeOnce">Radio 2</label>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-3" value="5" />
<label for="radio-choice-3" id="label3" class="activeOnce">Radio 3</label>
</fieldset>
</br>
<hr>
</br>
Button
</div>
CSS:
.ui-btn.activeOnce
{
width:80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
The single button at the end is now at 80% width and perfect centered. The radio buttons are also at 80% width but still left aligned. At the web I found some solutions for horizontal radio button groups, but this solutions does not work with data-type="vertical". Is there a way to center this, too?
Thank you very much for helping me :-).
JSFIDDLE: http://jsfiddle.net/7eKZb
Use jQuery Mobile grid system, ui-grid-b and 3 blocks ui-block-a, ui-block-b and ui-block-c.
Demo
<div class="ui-grid-b">
<div class="ui-block-left ui-block-a"><!-- Placeholder --></div>
<div class="ui-block-center ui-block-b">
<fieldset data-role="controlgroup">
<!-- Buttons go here -->
</fieldset>
</div>
<div class="ui-block-right ui-block-c"><!-- Placeholder --></div>
</div>
And override width of blocks a, b and c. I used extra custom classes in order not to override other blocks.
.ui-block-left, .ui-block-right {
width: 10% !important;
}
.ui-block-center {
width: 80% !important;
}
See this fiddle http://jsfiddle.net/bB2vM/
i wrapped your radio button group in a div and it worked see the fiddle
<div data-role="page" id="testPage" data-theme="e">
<fieldset data-role="controlgroup">
<legend id="SettingsDifficulty"></legend>
<div id="centregroup">
<input class="rbgroup1" type="radio" name="test" id="radio-choice-1" value="3" />
<label for="radio-choice-1" id="label1" class="activeOnce">Radio 1</label>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-2" value="4" />
<label for="radio-choice-2" id="label2" class="activeOnce">Radio 2</label>
<input class="rbgroup1" type="radio" name="test" id="radio-choice-3" value="5" />
<label for="radio-choice-3" id="label3" class="activeOnce">Radio 3</label>
</div>
</fieldset>
</br>
<hr>
</br>
Button
and here is the css
.ui-btn.activeOnce
{
width:80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#centregroup
{
text-align:center;
}
See screeshot.
U can group your radio buttons inside a div with fixed width and height:
<fieldset data-role="controlgroup" data-type="vertical" style="text-align: center">
<div class="centerRadio">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">A</label>
<input data-theme="e" type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">B</label>
</div>
</fieldset>
CSS:
.centerRadio
{
width: 80%; margin: 0 auto;
}
DEMO