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.
Related
This is my html code:
<label>Search:</label>
<input type="text" id="list_search" class="form-control col-8">
<button class="btn btn-info col-2">Search</button>
You see my input tag has 8 columns and my button has 2.
Then I don't get why I'm getting this:
Isn't supposed they should be X-aligned?
What I expect is:
But I had to use <div class="row"> there, which is modifying margins (look at the label).
You need form inline
and don't forget to set for inside label
<form class="form-inline">
<label for="list_search">Search:</label>
<input type="text" id="list_search" class="form-control">
<button class="btn btn-info">Search</button>
</form>
GL
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 am using a template, the name is Treble One Page Rsponsive Theme from Wrapbootstrap which uses Twitter Bootstrap. I am implementing the template and encountered this small error which drove me crazy.
There is a search bar, consists of <input> tag and <button> tag. Previously it was fine, until I make it inside a <form>, the search bar started to act weird. The <input> field is centered, but the <button> appended into outside the field making the whole things uncentered.
Here is the image, to be clear:
picture
And here is my code:
<div class="row">
<div class="span8 offset2">
<div class="input-append">
<form method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search">
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
</div>
I've googled this template.
This code works on original template as expected:
<div class="row">
<div class="span8 offset2">
<form class="input-append" method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search" />
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
Main idea is to convert "input-append" div into form, instead of adding new form element within it.
Using Bootstrap I want a button group but with one button preselected. If I use the html below then the first button gets preselected, but it remains active even when I click on one of the other buttons.
Using only html how can I define the button group with one button selected where that button will deselect when I click on one of the other buttons.
<div class="btn-group">
<button type="button" class="btn btn-default active">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
It's not completely possible to do this with HTML only - (as your title implies).
Really, the only thing you could do without JavaScript is add the attribute autofocus="autofocus" to the desired element like this:
<button type="button" class="btn btn-default" autofocus="autofocus">Left</button>
As the attribute implies, the button will automatically be focused in supported browsers. If another button is clicked, the focus of the first button will be removed.
EXAMPLE HERE
It's worth noting that the styling of .btn-default.active is the same as .btn-default:focus:
.btn-default:focus, .btn-default.active {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
Unfortunately, the focus will also be removed when clicking anywhere else on the page too. If this is a problem, JavaScript would be needed to solve this. The solution would be to have the active class on the desired element and then remove it when clicking on any of the sibling button elements. The selection would be mutually exclusive like with radio elements.
Here is an example taken directly from the Bootstrap JS documentation. It's worth noting that the Bootstrap JS file/jQuery need to be included.
EXAMPLE HERE
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
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.