Boostrap 3 : alignment problems of an input control inside nested "row" div class - twitter-bootstrap-3

I am using Boostrap 3. Is it normal that an input control inside a DIV with "row" class is not aligned left with the parent ?
It is shifted on the left. I think it might be a bug ?
Is there a way to make it aligned properly without tweaking CSS (meaning through Bootsrap-only CSS classes).
Please find the demonstration of the problem here :
http://jsfiddle.net/7vRQr/2/
<div class="col-xs-11">
<div class="row">
<div class="col-xs-offset-1 col-xs-10">
<h2 class="main-info-title">Following input should be aligned</h2>
<div class="row">
<input type="text" class="col-xs-12" placeholder="But it is not aligned on the left"/>
<label class="col-xs-12">But I am aligned!</label>
</div>
</div>
</div>
<span class="col-xs-12">So texts are aligned, I would have expected the input control to be aligned instead of the text inside the input</span>

Try this :
<style>
.form-horizontal .control-label {
text-align: left;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-10">
<h2>Following input should be aligned</h2>
<div class="row">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="textbox">
</div>
</div>
</form>
</div>
</div>
</div>
</div>

Might be the only one facing this issue...
Well, so for now I wrap every form control (input, textarea, select) inside a div with col-xs-12, and then it works OK.
So in my question, replacing this :
<input type="text" class="col-xs-12" placeholder="But it is not aligned on the left"/>
By this (encapsulating inside a div with col-xs-12) :
<div class="col-xs-12">
<input type="text" class="col-xs-12" placeholder="But it is not aligned on the left"/>
</div>
Fixes indentation issue. Please find the fully updated example here :
http://jsfiddle.net/7vRQr/5
Anyone with information about whether it is a bug or not (seems like one) or any other method to workaround is highly welcome. Because this solution does add a lot of extra HTML markups.

Related

Vuetify and Screenreader issue - label of v-select isn't read

I am actually using Vuetify 2.6.6, sticking to the standard components.
Beeing asked to make it accessible for screen reader users I struggle with the label not read by NVDA in case of v-select. (it must be read on hovering the label)
<v-select :items="items" label="name">
</v-select>
I already played around with some of the examples on https://vuetifyjs.com/en/features/accessibility/ but nothing really helps.
Interesting: Not even the examples on the vuetifyjs site are read.
Also: Clicking in the input field makes NVDA read the label. Unfortunately, having selected sth. it says nothing is selected or blank.
Having finally selected sth. and hovering an inch to the right of the label... it is read.
The items in the v-select are just an array of strings.
If I understood right, semantic tags like label and input do not need to have additional aria attributes but my knowledge in this field is limited.
However, this is what gets rendered:
<div class="v-input theme--light v-text-field v-text-field--is-booted v-select">
<div class="v-input__control">
<div role="button" aria-haspopup="listbox" aria-expanded="false" aria-owns="list-14" class="v-input__slot">
<div class="v-select__slot">
<label for="input-14" class="v-label theme--light"
style="left: 0px; right: auto; position: absolute;">Name</label>
<div class="v-select__selections"><input id="input-14" readonly="readonly" type="text"
aria-readonly="false" autocomplete="off" control-id="ControlID-2"></div>
<div class="v-input__append-inner">
<div class="v-input__icon v-input__icon--append">
<i aria-hidden="true" class="v-icon notranslate mdi mdi-menu-down theme--light"></i>
</div>
</div>
<input type="hidden">
</div>
<div class="v-menu">
<!---->
</div>
</div>
<div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper"></div>
</div>
</div>
</div>

Bootstrap form Input not working in grid system unless col-lg-

Here is the sample code;
http://www.bootply.com/lHB0p7sBFI
Basically the input textbox works perfect in large screen mode, but if I shrink the web browser to md, sm, or xs I lose all functionality of the input box I cannot enter text after I click on the box.
Thats because the second div overlaps on the first division. first div has height of just 1px. to solve the issue either provide height to first div or remove col-* on nested div.
<form method="POST" enctype="multipart/form-data" action="gallery/new/update/">
<div class="col-lg-6">
<div class="form-group">
<label>Title</label>
<input type="text" name="title" tabindex="1" autofocus="" class="form-control" required="">
</div>
</div>
<div class="col-lg-12 text-center">
<button type="submit" name="submit" value="new-update" class="btn btn-primary">Add Gallery Item(s)
</button>
</div>
</form>
Also its better to wrap your col-* into container and row, here is the bootply.

Bootstrap Profile Card

I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
and here's the where I'm at:http://jsfiddle.net/L3789n7u/1/
Any help is greatly appreciated. Thanks!
~Tony
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6">
<div class="well">
<div class="profile-image">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg">
<div class="card-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As ever you have multiple options, here is example of one of them.
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6" style="border: 1px solid black;">
<div class="row">
<div class="profile-image" style="float:left;">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg" />
</div>
<div class="profile-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
<div class="profile-link">
VIEW PROFILE
</div>
</div>
</div>
</div>
</div>
</div>
Basically you need to make profile image to float left, so other content will appear next to it. Also because your example how you would like it contains border around card you need to wrap image, info and link in row. If you want to customize image size you can still use all Bootstrap's col-size-number.
Working example on JSFiddle

Bootstrap3 horizontal forms with rows or inline forms

I'd like to accomplish a horizontal form with rows of multiple left aligned form controls per row. The final layout should look like this
First of all I want the icon show up NEXT to the name of the user on the right side of the user's name just like in the image showed above.
I use GWT along with bootstrap3.3.2. I read a lot about mix of horizontal forms
with inline forms or using horizontal forms along with rows of form controls. The last approach I like most.
I prepared a bootply which shows my first problem (I'll create a second bootply and stackoverflow post for additional problems). http://www.bootply.com/hheckner/GiPzaqWHlT
As you can see there, the icon does not align well (vertically) to the name of the user. Furthermore I'd like to show up the icon NEXT to the user's name, so if the user name is longer the image should move to the right and vice versa. Using the grid does not help here (I think at least). The icon should show up immediately next to the user name?
How can I accomplish this?
To get icon showing next to some text you just need to have span right after text, but still inside your <p> element.
I made somewhat similar form to the one you provided in screenshot using only Bootstrap Grid. There are probably multiple solutions, that could be better in terms of lines of code, but when you get used to grid system this should be quite fast method.
I have to warn you I used <h4></h4> for all text, and no special element for some text, so you should fix it accordingly. Also Bootstrap's form-inline class works only when viewport is bigger then 768px - you might not see working example on JSFiddle as you would want, but when you see it on screen bigger then 768px, it should be just fine.
<div style="text-align:left;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h4>Owner</h4>
</div>
<div class="col-md-8">
<h4>Hannes Heckner <span class="glyphicon glyphicon-pencil"></span></h4>
</div>
</div>
<form class="form-inline">
<div class="row">
<div class="col-md-4">
<h4>Scheduled for</h4>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-1">
<h4>Begin:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="beginDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="10:30">
</div>
(Duration: <div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="30">
</div> min)
</div>
</div>
<div class="row">
<div class="col-md-1">
<h4>End:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="endDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="endTime" placeholder="11:30">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h4>Location</h4>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" class="form-control" id="location">
</div>
</div>
</div>
</form>
</div>
</div>
JSFiddle https://jsfiddle.net/dejanmarolt/5ctd4fe5/

Bootstrap 3 in line form or input group

I am trying to create a search form, something like below..
http://tinypic.com/r/2py0scy/8
I am new to front end development and confused if an in-line form or a input group should be used?
The issue with inline forms is I am unable to size the input box (width) so any pointer there would also be really helpful.
Thanks!
Code Update
from home.HTML
<form class="form-inline" role="form">
<input class="form-control input-lg" type="text" placeholder="Discover">
<button type="button" class="btn btn-danger btn-lg">Go</button>
</form>
from the layouts - application.html.erb
<div class="container">
<%= yield %>
</div>
To play with the width in Bootstrap, see the grid system and the use the columns:
For instance, if you want a form on the right and the width at the 50% of the container, you can do:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
This is div on the left
</div>
<div class="col-xs-12 col-md-6">
<form class="form-inline" role="form">
<input class="form-control input-lg" type="text" placeholder="Discover">
<button type="button" class="btn btn-danger btn-lg">Go</button>
</form>
</div>
</div>
</div>
The previous code, is designed to change the behavior on small devices.
You can use both depending on what you're trying to accomplish. Bootstrap is well-documented, did you read their documentation regarding forms ? http://getbootstrap.com/css/#forms
By default input items are 100% width in bootstrap (e.g. they fill the containing element they are in). For instance:
<input type="text" class="form-control" placeholder="Text input">
would result in a 100% width input field and
<style>
.smallwidth {max-width: 200px;}
</style>
<div class='smallwidth'><input type="text" class="form-control" placeholder="Text input"></div>
would result in a 200px width input field, because it is restricted by the outer div I put around it.