Setting:
I have a input type="text", a label and a custom checkbox with its own label inside a span to encapsulate them, inside a div on a li.
Styling:
input type="text" has aesthetic styling only.
label has margin-left:5px;
span has display: inline-block; float: right;
div has classes form-group and form-inline from Bootstrap 3.3
Problem:
The label is initially empty but once I type something in the input, a script will run, filling in that same label with text.
I've been trying to set the width of the input to be auto, having it's width the same as the container it's in, reaching the span, so that when the label appears, it shortens itself out.
Instead, the input remains small. I think I'm doing something wrong but even with some research, I can't understand what it is exactly.
I've tried removing the classes from the div (wich just breaks it), apply width=100%;, wich, makes it large, but pushes it and the label to the line below.
Could someone provide some help, please?
Here is how it looks below:
without text
with text added by js
Link to Codepen.
You need a wrapper around the input and label using calc to set width 100% - (arbitrary amount to allow for checkbox), e.g.
.listWrapper {
width: calc(100% - 75px);
}
You can then set this .listWrapper to display: flex, and give the input flex: 1 1 auto so that the input will grow/shrink as required to take up all available internal space minus whatever space the label requires. You can set flex-wrap to nowrap so it all remains on one line.
Here's an updated codepen:
https://codepen.io/anon/pen/ZXwxKz
The relevant updated styles are here, so you don't have to pick through everything:
.listWrapper {
width: calc(100% - 75px);
float:left;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.listWrapper .listInput {
flex: 1 1 auto;
}
You may also need to use a clearfix on the wrapper due to the floats. If you have a clearfix style already, apply it to ".form-group.form-inline", if not, add this style to your CSS:
.form-group.form-inline:after {
content: "";
display: table;
clear: both;
}
Related
I would like to display my clients first and last name in 2 different inputs in the center of the client page and give each input a minimum width to avoid extra spacing between the two.
I've tried to use min-width or use the "size" attribute for the inputs but it's causing problems when the first input has too much characters.
<div className="input-client-name">
<input value={this.state.fname}/>
<input value={this.state.lname}/>
</div>
.input-client-name {
display: flex;
}
.input-client-name input {
min-width: 0;
max-width: min-content;
}
I expect the output of: " firstName LastName " without worrying from the characters length of each of the ones.
If you're working with flexbox, it's advised to not play with width since we flexbox for achieving responsive behaviour and setting width (even max and min widths) to a value defeats that purpose.
Since you want input boxes displayed side-by-side, and based on window size - you may want to wrap second input box to next line - add a flex-flow to your parent.
.input-client-name {
display: flex;
flex-flow: row wrap;
}
flex-flow is a combination of flex-direction and flex-wrap properties.
Next, you want to give a min width to your input boxes, you can achieve this by using flex-basis - which works as an initial size for your element.
.input-client-name input {
flex-basis: 40%;
margin: 8px;
}
Note: margin is added as space between two input boxes. You can choose to use justify-content: space-between or justify-content: space-evenly for same purpose.
Additional references:
A demo fiddle for this is availale here.
Want to learn more about flexbox? Read a nice article on it here.
Hope this helps.
input {
text-align: center;
width: auto;
}
I've been trying to get my head managing a specific layout without using flexbox (specifically flex-direction: column). I'm almost certain this has been asked elsewhere but for the life of me I haven't been able to find it, so I'm very sorry if it has and will gladly close if anyone can show me it answered somewhere else.
The problem is this: given an arbitrary number of divs, all but one of which have a fixed height, how can I lay them out in a column such that the remaining element fills 100% of the height available to it, after the others have been taken into account?
It looks like (Codepen):
div.container
div.cell.fixedheight
div.cell.fillheight
div.cell.fixedheight
div.cell.fixedheight
div.cell.fixedheight
This is pretty easily achievable using flexbox with something like:
.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.fixedheight {height: 20px;}
.fillheight {flex: 1;}
But I'm essentially not in a position to use flexbox, since supporting older browsers is necessary here.
Edit when I say I can't use flexbox, I mean not even vendor prefixes :(
You can achieve it with table layouts, with a light wrapper of row-style and cell-style divs. If anyone knows of a solution that doesn't involve an extra wrapper in the markup I'll gladly take it :)
See the approach on this Codepen but I'll put the relevant code here:
div.container
div.row.fixedheight
div.cell
div.row.fillheight
div.cell
div.row.fixedheight
div.cell
div.row.fixedheight
div.cell
div.row.fixedheight
div.cell
and then the CSS:
.container {
display: table;
}
.row {
display: table-row;
}
.row.fixedheight {
height: 20px;
}
.row.fillheight {}
.cell {
display: table-cell;
}
The .cells will accept very little further styling (margins etc) so they'll need to act as a wrapper for whatever richly styled divs you want to put inside them.
Also note that multiple .fillheights will share the available height between them equally.
Also note that the fixed height rows are not in fact fixed height - the 20px will be used as effectively a min-height, but the cell will wrap whatever it has in it. I've been accepting this and setting height: 0 on the cell and height: 20px on an inner div which isn't table-styled.
What is the best/correct way of making a table like thing with divs.
I've tried different methods, with position: and using percentage's.
What I want is text and input box on the same line and make the input box scale with the size of the parent div, responsive design.
JSFiddle
Help would be appreciated :)
just add this extra line of CSS -
#box input[type="text"]
{
width: 100%;
box-sizing: border-box; /* This line */
}
Fiddle Demo
You can also use - display: table-cell on div to mimick like a table cell, similarly, you have display: table-row, table-column, etc. They implement table like behavior to divs.
ive got some problem with my css styles:
I have different groups ( <div>'s ) that have subgroups displayed in ONE colum
or MULTIPLE ( max. 3) colums.
The problem i have is, that my vertical-align wont work within float elements with an 100% height.
within the subgroups: ST200 | Überblick... | EN DE should be displayed with vertical-align: middle
Maybe someone could help me.
complete code posted on jfiddle
http://jsfiddle.net/ZAa33/
Andres's comment here seems to address your problem: the line-height of the text is confining it to a smaller area than its container div.
To test, I changed the line-height property on .kursid to 35px, and the ST200 was successfully centered vertically, but only for those divs that had heights of 35px. For a more general solution, you could redesign your code to allow line-height and height to be set explicitly equal on all divs with text you want centered vertically, or you could see the other answers to that question for other options.
Vertical-Align Property works with only inline and inline-block elements. if you float any element, by default that element display property value is changed to block. In your case that is why vertical-alignment is not working on floated element. one solution for your problem is use inline.
[Inline-block demo](http://jsfiddle.net/Mostwanted_cJ/W8nf8)
Your JSFiddle is edited.
change all of your span to div and apply display:inline-block and vertical-align:middle
Inline-block demo
i found a solution to my Question that works pretty nice ;)
i just needed to set:
.kurs {
border-radius: 15px 15px 15px 15px;
background-color: #c5c5c5;
width: 100%;
min-height: 35px;
margin-bottom: 10px;
display: flex;
! display: -webkit-flex; <- remove
! display: -moz-box; <- remove
align-items: center; <- add
justify-content: center; <- add
}
The updated fiddle ;)
http://jsfiddle.net/ZAa33/9/
I've a big problem!
You know, a div default width is 100% (of the parent). And if its content width is more than 100% (100%=1440px), div shows content in multiply lines.
Now, if i want, the div shows its content in one line, what should I do? look at the simple code::
<div>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
......(more than 100 other div, with unknown width)
</div>
NOTE: I don't know the content width.
I tried display: inline; and display: inline-block; and display: table;. they didn't work.
NOTE 2: I tried display: -moz-box;. It works, but Only in FIREFOX!
Thanks ...
The simplest way is to use white-space: nowrap on the parent, and display: inline-block on the children:
See: http://jsfiddle.net/4Yv83/
I also added overflow-x: auto, because presumably you don't want this.
Just tell the text inside the div not to wrap.
div {
white-space: nowrap;
}
a few years passed but ... I think it would be better to set overflow to hidden, because we don't need to show all of children elements at once. we use this kind of styling in thumb-slide like components. so I suggest to set "overflow:hidden" to parent element.
/* for parent element */
overflow: hidden;