I am trying to put an input right after a text ends. (Not after the div that contains the text).
Something like this:
But I don't know how to do it.
I tried to place it with an absolute position but when I resize the window it overlaps the text and input.
This is my css:
.div-heading {
position: relative;
}
.heading-2 {
font-size: 52px;
}
.search{
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-top: -89px;
margin-left: 239px;
padding-left: 10px;
}
Any ideas?
You can achieve it through display: inline:
div {
width: 300px;
word-break: break-all;
white-space:normal;
}
label, input {
display: inline;
}
input {
width: 80px;
}
<div>
<label for="spd">VERYVERYVERYVERYVERYVERYVERYVERYVERYVERYVERYVERYVERYERYVERYVERYVERYVERYVERY</label> <input type="text" name="spd" id="spd" />
</div>
Related
I've got a button with a label absolutely positioned underneath.
I want the label to not wrap to a new line but to be rendered all on one line. I know i can do that with width: max-content or with overflow: visible.
But at the same time i want the label to be centered with the button, which is what i can't find a way to do unless i wrap the label to a new line.
Any way i can achieve this?
button {
position: relative;
width: 40px;
height: 40px;
background: #E30202;
color: black;
border-radius: 14px;
}
span {
position: absolute;
top: calc(45px);
left: 0;
font-size: 12px;
color: black;
width: 100%;
pointer-events: none;
/* width: max-content; */
}
<button>
<span>Label Line</span>
</button>
So your text is centered. There is just not enough width in the container for the text to fall on only one line. You can use the psuedo-element :after to add the centered text. But you'll notice the example 1 in the snippet still doesn't seem centered. The width of the button is doubled on the second example with the same styles showing the centered text.
Another solution would be to add a .wrapper and use display: flex; with flex-flow: column; and justify-content: center; to make sure the text is always centered with the button.
button {
position: relative;
width: 40px;
height: 40px;
background: #E30202;
color: black;
border-radius: 14px;
margin: auto;
}
button.pseudo:after {
content: "Label Line";
position: relative;
top: calc(100% + 3px);
}
.btn-wrapper:nth-child(2)>button {
width: 80px;
}
.btn-wrapper {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
margin-top: 3em;
}
<!-- example 1 -->
<div class="btn-wrapper">
<button class="pseudo">
</button>
</div>
<!-- example 2 -->
<div class="btn-wrapper">
<button class="pseudo">
</button>
</div>
<!-- example 3 -->
<div class="btn-wrapper">
<button>btn</button>
<span>Label Line</span>
</div>
I have these responsive boxes side by side with an image and text inside. However, some of the boxes are not aligned properly due to the text. I have tried to change this with no success.
Here is an image of the problem: https://imgur.com/a/EpXzG4i
Here comes the HTML:
<div id="grid">
<span class="box">
<i class="fa fa-file-text fa-3x"></i>
<div class="service">Super awesome box</div>
</span>
...
</div>
And the CSS:
#grid {
width: 100%;
}
#grid .box {
display: inline-block;
width: 135px;
height: 135px;
margin: 11px;
background-color: #b7cfdd;
}
#grid .box .service {
font-family: "Roboto", sans-serif;
font-size: 17px;
color: #555;
}
#grid .box i {
margin-top: 20px;
color: #00406e;
}
Here you can see the problem in action: http://jsfiddle.net/et72powz/3/
Is there an easy fix to this problem?
Your HTML is invalid. A division tag, cannot be nested inside of a span. Make the span div and you'll be fine.
Make use of vertical-align to line them all up nicely.
http://jsfiddle.net/et72powz/15/
#grid .box {
display: inline-block;
width: 135px;
height: 135px;
margin: 11px;
background-color: #b7cfdd;
vertical-align: top
}
The problem coming from display: inline-block replace it with float: left and it will act as you want check the updated Fiddle.
i got a solution for you but i don't really know the actual behaviour of why this works.. i just deleted some of your css .. try this css code..
#grid {
width: 100%;
}
#grid .box {
display: inline-block;
width: 135px;
height: 135px;
margin: 11px;
background-color: #b7cfdd;
}
#grid .box i {
margin-top: 20px;
color: #00406e;
}
Use flexbox for your grid.
#grid {
width: 100%;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
http://jsfiddle.net/et72powz/8/
Change the height to min-height and also assign them a position(vertical alignment) by giving vertical-align:top;
#grid .box {
display: inline-block;
width: 135px;
min-height: 140px;
margin: 11px;
background-color: #b7cfdd;
vertical-align:top;
}
Also a fiddle : http://jsfiddle.net/et72powz/11/
Is there a way, using css only, to line up a multiline element (and anchor in my example) so that the "before" bit and the "anchor" bit appear side by side as though in a grid.
I.e.
> i am a test link
which goes over
multiple lines
As opposed to the result of this (which will hopefully show it wrapping underneath the before content).
a::before {
content: ">";
padding-right: 20px;
}
div {
width: 150px;
}
<div>
i am a test link which goes over multiple lines
</div>
display:table/table-cell works nicely.
a::before {
content: ">";
padding-right: 20px;
}
div {
width: 150px;
margin: 1em;
border: 1px solid grey;
}
/* relevant stuff */
a {
display: table;
text-decoration: none;
}
a::before {
display: table-cell;
vertical-align: middle;
}
<div>
i am a test link which goes over multiple lines
</div>
Or as inspired by Nenad Vracar's original answer, Flexbox
a::before {
content: ">";
padding-right: 20px;
}
div {
width: 150px;
border: 1px solid grey;
margin: 1em;
}
/* relevant stuff */
a {
display: flex;
align-items: center;
text-decoration: none;
}
<div>
i am a test link which goes over multiple lines
</div>
You can use Flexbox like this and you can also vertically align items
DEMO
div {
width: 150px;
}
a {
display: flex;
flex-direction: row;
align-items: center;
}
a:before {
content: ">";
margin: 5px;
}
<div>
i am a test link which goes over multiple lines
</div>
One approach would be to add the padding-left value to the parent anchor element, followed by display: inline-block/position: relative. Then absolutely position the pseudo element relative to the parent:
a {
position: relative;
padding-left: 20px;
display: inline-block;
}
a::before {
content: ">";
position: absolute;
left: 0;
}
div {
width: 150px;
}
<div>
i am a test link which goes over multiple lines
</div>
I have a div containing an input and an a element:
.wrapper {
width: 300px;
display: inline-block;
}
.custom-input {
display: block;
width: 100%;
}
.button {
width: 20px;
height: 20px;
background-color: #ccc;
display: block;
}
<div class="wrapper">
<input class="custom-input" type="text" />
<a class="button"></a>
</div>
Here's a jsfiddle.
I want my input and my button inline. The input with button always has 100% width of the wrapper. In some cases, I want to remove the button. The input then has 100% width of the wrapper div.
It is only inline when I use inline-flex for the wrapper. But I want it to be able to run on old browsers (IE 8-9), and I want my input and my element to always have 100% width of wrapper.
How can I do it?
Using width: 100% on your input will make it take all the horizontal space available, pushing the button to the line below.
This should work :
.wrapper{
width: 300px;
display: inline-block;
}
.custom-input{
display: inline-block;
}
.button{
width: 20px;
height: 20px;
background-color: #ccc;
display: inline-block;
}
Here's the updated jsfiddle : http://jsfiddle.net/k6yhtf92/3/
try to use display: inline-block instead display:block
updated css
.wrapper{
width: 300px;
display: block;
}
.custom-input{
display: inline-block;
}
.button{
width: 20px;
height: 20px;
background-color: #ccc;
display: inline-block;
}
I would like to put a label and an input[type=text] on the same line, and I would like for the input's width to fill the remaining width of the containing element, regardless of the length of the label's text (see first image).
I tried to use width: auto; for the input, but it seems to have a static width. I also tried width: 100%;, but that moves the input to a new line (see second image).
How can I achieve this using CSS?
It's possible without JavaScript, see: http://jsfiddle.net/Khmhk/
This works in IE7+ and all modern browsers.
HTML:
<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>
CSS:
label {
float: left
}
span {
display: block;
overflow: hidden;
padding: 0 4px 0 6px
}
input {
width: 100%
}
The reason why overflow: hidden is so magically useful in this instance is explained here.
display: table-cell is another option, see: http://jsfiddle.net/Khmhk/1/
This works in IE8+ and all modern browsers:
HTML:
<div class="container">
<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>
</div>
CSS:
.container {
display: table;
width: 100%
}
label {
display: table-cell;
width: 1px;
white-space: nowrap
}
span {
display: table-cell;
padding: 0 0 0 5px
}
input {
width: 100%
}
That still works for me, but ftr this is how Bootstrap 3 does it (thanks to #morten.c's answer to "Bootstrap full-width text-input within inline-form"). Don't know if it's harder to break than #thirtydot's, or anything. But here it is, and here's a fiddle that also gives a basic example of how to deal with a narrow-screen break point.
HTML:
<form class="responsive">
<input type="text" placeholder="wide input..."/>
<span>
<input type="submit"/>
</span>
</form>
CSS:
form.responsive, form.responsive * {
box-sizing: border-box;
width: 100%;
height: 40px !important; /* specify a height */
}
form.responsive {
position: relative;
display: table;
border-collapse: separate;
/* just to be safe */
border: 0;
padding: 0;
margin: 0;
}
form.responsive > input {
position: relative;
width: 100%;
float:left;
margin-bottom: 0;
display: table-cell;
}
form.responsive span {
position: relative;
width: 1%;
vertical-align: middle;
display: table-cell;
}
form.responsive span input {
margin: 0;
margin-left: -1px;
display: inline-block;
vertical-align: middle;
overflow: visible;
}