I want to have the view like above.
But i am getting something like below.
I was wondering how i can achieve it using bootstrap.
My html code.
<div class="controle-group">
<button type="submit" class="btn btn-primary" id="loginButton">
<fmt:message key="authentificate" />
</button>
<input id="_spring_security_remember_me"
name="_spring_security_remember_me" type="checkbox" />
<fmt:message key="remember.password.time" />
</div>
I think you want to do something more like..
<form class="form-inline">
<button type="submit" class="btn btn-primary" id="loginButton">
<fmt:message key="authentificate" />
</button>
<label class="checkbox">
<input id="_spring_security_remember_me" name="_spring_security_remember_me" type="checkbox" class="form-control">
<fmt:message key="remember.password.time" />
</label>
</form>
This assumes you're using Bootstrap 2.x
Demo: http://www.bootply.com/73070
Apart the fact you mispelled control in your class, it seems you inserted a screenshot from bootstrap3 but you're using bootstrap2.
Related
So I have this code:
<form action="{{ url_for('profile') }}" method="post" enctype=multipart/form-data>
<label for="files" class="btn btn-light btn-sm">Cambiar foto de perfil</label>
<input id="files" style="visibility:hidden;" name="photo" type="file" required>
<input type="file" accept="image/*">
<label for="submit" class="btn btn-light btn-sm">Actualizar</label>
<button style="visibility:hidden;" id="submit" type="submit"> Actualizar </button>
</form>
I would like to know how to eliminate the space between these labels. I have tried with Margin="0" and nothing happened.....Thanks in advance.
Are you referring to the space to the right of "Cambiar foto de perfil"? If so, that's due to the adjacent input being styled with visibility: hidden. If you want that input to be hidden AND not take up any space, you would need to set it to Display: none instead of the visibility property.
Not quite sure what you want to achieve - assuming you want to have a form with 3 lines of input widgets, 2 file uploaders and a submit button, you may want to start off with something along these lines:
<form action="{{ url_for('profile') }}" method="post" enctype=multipart/form-data>
<div>
<label for="files" class="btn btn-light btn-sm">Cambiar foto de perfil:</label>
<input id="files" style="visibility:visible;" name="photo" type="file" required>
</div>
<div>
<div>
<label for="images" class="btn btn-light btn-sm">Cambiar el fichero del fotos:</label>
<input id="images" type="file" accept="image/*">
</div>
<div>
<label for="submit" class="btn btn-light btn-sm">Actualizar:</label>
<button style="visibility:visible;" id="submit" type="submit"> Actualizar </button>
</div>
</form>
Modifications in above code snippet:
Wrap each widget and its label in a div element.
Make the widgets visible
Add a label for the image uploader
Further suggestions:
Add a full-fledged css layout (flex or grid) to align widgets and labels.
Add Css styles to the divs and toggle the display property to selectively add or remove widgets ( beware, usually considered bad user interface design ).
The MDN Web Docs (previously Mozilla Developer Network, MDN) is an excellent resource for learning about web technologies. You may want to hav a look at the CSS section, in particular the CSS layout tutorial.
I'm running into issues with modals and forms with Foundation.
I want to be able to fill out a form, open a modal, then have that modal be able to submit the form.
Normally, I'd have my form, and all of it's form fields, and put the modal inside the the form element, and that would be fine - but with foundation, I find that the reveal modal is moved to the bottom of the DOM.
What's the best way to accomplish what I'm after?
I've added a skeleton of what my normal structure might be like - any help would be greatly appreciated.
<form method="post" action="...">
<label for="title">Title</label>
<input type="text" name="title" id="title" placeholder="Enter campaign title here" required>
<label for="title">Description</label>
<textarea type="text" name="description" placeholder="Description of this campaign"></textarea>
<button type="button" class="button default-btn float-right" data-open="emailSendConfirmation">Publish campaign</button>
<div class="reveal" id="emailSendConfirmation" data-reveal>
<button data-close aria-label="Close modal" type="button" class="button">Cancel</button>
<button type="submit" class="button" name="status" value="Published">Publish</button>
</div>
</form>
Thanks,
Ollie
I use a bootstrap Template. I use bootstrap modal for register in my website.
for textboxes, I use form-control class but it does not work.
Can anyone help me?
...<div class="modal-body" dir="rtl" style="font-family:BYekan; text-align:center">
<center>
<div class="form-group">
<asp:TextBox ID="txtemail_reg" runat="server" CssClass="form-control" placeholder=" Email Address" Width="300px"></asp:TextBox>
</div> ....
Make sure that you placed class="form-group". For example
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="" placeholder="Amount">
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
I checked the css of template. the input tag has some css,I remove those and my problem fixed.
I am looking to obtain the same style for both #html.ActionLink & a input submot control (both buttons) on a form. I basically want the input control to look the same the ActionLink control.
<div class="btn btn-success">
#Html.ActionLink("RSVP Now", "RsvpForm")
</div>
<div class="btn btn-success">
<input type="submit" value="Update RSVP" />
</div>
I want the bottom button to look the above button
(btn btn-sucess is from the bootstrap library)
<div>
<input class="btn btn-success" type="submit" value="Update RSVP" />
</div>
Provide the class inside the HTML Attributes parameter of the Html.ActionLink Method.
<div>
#Html.ActionLink("RSVP Now", "RsvpForm", new{#class="btn btn-success"})
</div>
i have this btn-group:
<div class="control-group">
<label class="control-label">Sex</label>
<div class="controls">
<input id="filtro_sexo" type="hidden" />
<div class="btn-group" data-toggle-name="filter_sex" data-toggle="buttons-radio">
<button value="Male" type="button" class="btn">Male</button>
<button value="Female" type="button" class="btn">Female</button>
</div>
</div>
</div>
the problem is that I need the user to be able to select or deselect the option. the user should be able to select one option, or none.
but data-toggle = "buttons-radio" will not let me deselect the option selected.
I achieve this by using [data-toggle=buttons-checkbox], add a custom attribute [data-single-select], and write few lines of jQuery:
HTML:
<div class="btn-group" data-toggle="buttons-checkbox" data-single-select>
<button class="btn">...</button>
<button class="btn">...</button>
<button class="btn">...</button>
</div>
jQuery:
$("[data-toggle='buttons-checkbox'][data-single-select] .btn").live('click', function(evt){
$(this).siblings().removeClass('active');
});
#Rafael
using [input type="radio"] looks way too ugly. That's why we use Bootstrap.