This question already has answers here:
Setting a <button>'s display as table-cell
(6 answers)
Closed 4 years ago.
I'm trying to group an input and a button. Basically the button need to be on the same row as input with no space between them
Because I need to support IE9, I'm using display: table.
.container{
border: 1px red solid;
width: 35rem;
}
.input-group {
border-collapse: separate;
display: table;
position: relative;
}
.input {
position: relative;
z-index: 2;
float: left;
width: 100%;
font-size: .875rem;
line-height: 1.5;
margin: 0 ;
display: table-cell;
}
.button {
color: #fff;
background-color: #0b0b0b;
border: 0;
padding: .375rem .75rem;
text-align: center;
}
<div class="container">
<div class="input-group">
<input class="input">
<button class="button">Get Data</button>
</div>
</div>
I don't know why width:100% is there on the input. It will take whole width of parent space. I have removed it and its working.!
See the Snippet below:
.container{
border: 1px red solid;
width: 35rem;
}
.input-group {
border-collapse: separate;
display: table;
position: relative;
width:100%;
}
.input-group>div {
display: table-cell;
}
.input-group>div:first-child {
width: 100%;
}
.input {
position: relative;
z-index: 2;
width: 100%;
font-size: .875rem;
line-height: 1.5;
}
.button {
color: #fff;
background-color: #0b0b0b;
border: 0;
padding: .375rem .75rem;
text-align: center;
white-space: nowrap;
}
<div class="container">
<div class="input-group">
<div><input class="input"></div>
<div><button class="button">Get Data Dummy Text</button></div>
</div>
</div>
Update 1:
You can use calc to calculate the width of input text. Can I use?
Update 2:
To make it possible without button width, you might want to wrap both input and button in the div. And apply display:table-cell to both div.
You can test it here (as per the #LGSon's answer)
Try this, I added a position: absolute to button, let me know if that help!
.button {
color: #fff;
background-color: #0b0b0b;
border: 0;
padding: .375rem .75rem;
text-align: center;
position: absolute; /*Added*/
width: 100px; /*Added*/
height: 27px; /*Added*/
}
You can check it here
Related
In the bellow code the blue block has a green overline that should be the same width as the text and not overflow. Similar to the pink blocks notice how the green border is the same width as the text.
I've tried using display: inline as well with no luck. Is there maybe some hack to get this to work properly?
Fiddle: https://jsfiddle.net/xq10dnb9/
CSS:
html {
font-size: 50px;
}
.blue {
background-color: #a9f4f4;
}
.blocks {
background-color: pink;
width: 700px;
display:flex;
justify-content: space-between;
}
.block {
padding: 5px;
white-space: normal;
}
.block span {
position: relative;
display:inline-block;
/* display:inline; */
}
.block span:before {
content: '';
height: 4px;
background-color: green;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
HTML:
<div class="blocks">
<div class="block"><span>1 Test</span></div>
<div class="block blue"><span>Test123 Test</span></div>
<div class="block"><span>Testi</span></div>
<div class="block"><span>T asd</span></div>
<div class="block"><span>Testing 5</span></div>
</div>
Add width: min-content in:
.block span{
position: relative;
display: inline-block;
border: 1px solid black;
width: min-content;
}
.block {
padding: 5px;
white-space: normal;
}
When you are using padding,you might want to specify where you want to add padding to like padding-top, padding-bottom, padding-right or padding-left. If you just type padding it will just add space to all side.
So, change it to
.block {
padding-top: 5px;
white-space: normal;
}
Is should solve the issue.
And you add this to your code
*{
padding: 0;
margin: 0;
}
I want to create something like this:
And this is what I tried:
.container {
width: 200px;
white-space: nowrap;
background-color: #E6E9F0;
border: solid 1px black;
vertical-align: top;
display: inline-block;
}
.left,
.right {
display: inline-block;
}
.right {
white-space: break-spaces;
margin: 0;
word-break: break-word;
}
.left {
float: left;
margin-right: 6px;
color: red;
}
<div class="container">
<span class="left">Text</span>
<span class="right">Very very veeeeeeeeeeeeeery veeeeeery very very very long text</span>
</div>
I couldn't figure out how to do it without inserting the first span in the second one, in my example I want both spans to be in the same hierarchy.
How can I solve this?
Why do you have white space nowrap on the container if you just want it to wrap normally? Remove that and all styles after your container apart from your red:
.container {
width: 200px;
background-color: #E6E9F0;
border: solid 1px black;
vertical-align: top;
display: inline-block;
}
.left {
margin-right: 6px;
color: red;
}
<div class="container">
<span class="left">Text</span>
<span class="right">Very very veeeeeeeeeeeeeery veeeeeery very very very long text</span>
</div>
I am trying to use CSS to expand the input box on hover/focus of the search ICON of CSS
Now, I am trying to call a function in html to angular component (seems that I cannot use CSS with datalist element) such that the input tag gets stays expanded when I shift the focus or select an item from datalist
Here is my sample HTML
<div class="searchDiv">
<span class="glyphicon glyphicon-search" id="searchSpan" (click)="searchEvent($event)"></span>
<form [formGroup]="searchGroup" (ngSubmit)="searchEvent($event)">
<input type="text" placeholder="search" id="searchInput" formControlName="localInput" class="" list="promotionsSearchList"
(keyup)="searchEvent($event)" />
</form>
<datalist id="promotionsSearchList" class="test"
onfocus="focusEvent()" onmousemove="focusEvent()">
</datalist>
</div>
Here is my CSS
.customClass {
float: center;
}
.grid {
display: inline-grid;
grid-template-columns: 150px 150px 150px 150px auto;
grid-template-rows: repeat(3,25px);
width: 100%;
}
#headerDiv {
grid-row : 1;
grid-column : 1/6;
padding-top: 14px;
}
#firstElementSpan {
grid-row:1;
grid-column:2/6;
}
#secondElementSpan {
grid-row:1;
grid-column:3/6;
}
#thirdElementSpan {
grid-row:1;
grid-column:4/6;
}
#fourthElementSpan {
grid-row:1;
grid-column:5/6;
}
.rounded-text-box{
border-radius: 2px;
border: 2px solid #555;
padding: 20px;
width: 200px;
height: 15px;
}
.searchDiv{
width: 500px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}
.searchDiv input#searchInput{
width: 45px;
height: 30px;
background: white;
border: none;
font-size: 10pt;
float: left;
color: black;
/*this is to accomadate the search icon */
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.searchDiv #searchSpan{
/*the position needs to be mentioned as absolute for the icon to
appear on top of the input */
position: absolute;
top: 5%;
margin-left: 17px;
margin-top: 7px;
/*for now z index is mentioned as to make the icon on top */
/* z-index: 5; */
z-index : 1;
color: #4f5b66;
background-color: inherit;
}
.searchDiv input#searchInput:hover, .searchDiv
input#searchInput:focus, .searchDiv input#searchInput:active{
outline:none;
width:300px;
}
.searchDiv:hover input#searchInput{
width:300px;
}
.searchDiv:hover #searchSpan{
color: #93a2ad;
}
/* this is not working , hence tried to use get the element in
angular and change its DOM prop*/
datalist:active, datalist:focus input#searchInput{
width:300px;
}
This is my sample angular component call. I have just reduced to the point of func call at this point
focusEvent(){
console.log('onfocusEvent');
const inputElement = document.getElementById('searchInput');
inputElement.style.width = '300px';
}
I don't see the func being called. I tried to use angular's property binding as well but no luck. basically I want the input element to keep expanded when I have shift the focus to the datalist element and going through the list. Could you guys help?
Thanks to #CBroe to notifying this. We cannot listen to any events as well as not do any modifications using datalist. Hence I started using ul
Here is a sample html code modified:
<div class="searchDiv">
<span class="glyphicon glyphicon-search" id="searchSpan" (click)="searchEvent($event)"></span>
<input type="text" placeholder="search" id="searchInput" class="" list="promotionsSearchList"
(keyup)="searchEvent($event)" [(ngModel)]="searchModel"/>
<ul *ngIf="loadDropDown">
<li *ngFor="let pp of promoList" (click)="selectAnyItem($event)" value="pp.id"><span>{{pp.name}}</span>
</li>
</ul>
</div>
Here is the CSS that I implemented.
ul {
padding: 2px;
list-style-type: none;
z-index:2;
background-color:black;
/*below css makes the element clear the float and move to the next
line if placed in the same block */
clear:both;
}
li:hover{
background-color: dodgerblue;
}
.rounded-text-box{
border-radius: 2px;
border: 2px solid #555;
padding: 20px;
width: 200px;
height: 15px;
}
.searchDiv{
width: 500px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}
.searchDiv input#searchInput{
width: 45px;
height: 30px;
background: white;
border: none;
font-size: 10pt;
float: left;
color: black;
/*this is to accomadate the search icon */
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.searchDiv #searchSpan{
position: absolute;
top: 5%;
margin-left: 17px;
margin-top: 7px;
z-index : 1;
color: #4f5b66;
background-color: inherit;
}
.searchDiv input#searchInput:hover, .searchDiv
input#searchInput:focus, .searchDiv input#searchInput:active{
outline:none;
width:300px;
}
.searchDiv:hover input#searchInput {
width:300px;
box-sizing:border-box;
}
.searchDiv:hover ul{
width:300px;
box-sizing: border-box;
}
.searchDiv:hover #searchSpan{
color: #93a2ad;
}
Hope this helps for the users who are trying to implement
Nothing I can find or have tried is working so I hope someone can tell me where I am going wrong. I have a table-like HTML structure with div rows containing only span cells. These in turn can contain either a single span or two rows of spans. Unfortunately, for some reason I've been wrestling with on and off for weeks, the single span cells do not align with the double-row cells.
The minimal HTML is:
<div id="box">
<div id="rowA" class="row">
<span class="container">
<span class="top">A</span>
<span class="bottom">B</span>
</span>
<span class="container">
<span class="single">C</span>
</span>
</div>
<div id="rowB" class="row">
<span class="container">
<span class="top">D</span>
<span class="bottom">E</span>
</span>
<span class="container">
<span class="single">F</span>
</span>
</div>
</div>
with CSS,
body {
font-size: 16px;
}
div#box {
width: 716px;
height: 255px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
div.row {
width: 712px;
height: 47px;
padding: 1px;
padding-left: 4px;
margin-left: auto;
margin-right: auto;}
span.container {
display: inline-block;
width: 40px;
height: 40px;
margin-top: 2px;
padding: 1px;
border: 1px solid black;
border-radius: 4px;}
span.top, span.bottom {
display: inline-block;
width: 100%;
height: 50%;
line-height: 20px;
vertical-align: middle;
}
span.single {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
vertical-align: middle;
text-align: center;
}
The double row cells (e.g. <span class="container"><span class="top">D</span><span class="bottom">E</span></span>) display correctly, the single row cells are shifted downwards for some reason. I know that I can use positioning to correct for the problem but I'd like to understand where I am going wrong. It's tested on Chrome and Firefox and alas their inspectors leave me none the wiser.
All contributions very gratefully received!
body {
font-size: 16px;
}
div#box {
width: 716px;
height: 255px;
margin: 10px auto;
}
div.row {
width: 712px;
height: 47px;
padding: 1px;
padding-left: 4px;
margin-left: auto;
margin-right: auto;
}
span.container {
vertical-align:top; /* ADD JUST THIS LINE */
display: inline-block;
width: 40px;
height: 40px;
margin-top: 2px;
padding: 1px;
border: 1px solid black;
border-radius: 4px;
}
span.top, span.bottom {
display: inline-block;
width: 100%;
height: 50%;
line-height: 20px;
vertical-align: middle;
}
span.single {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
vertical-align: middle;
text-align: center;
}
I have been trying to make a line join two words.
Sentence 1 would be on the left and no 2 on the right.everything should be on the same line.
I want the line to be flexible and adjust its width when the browser is re sized, and have so far failed miserably to do this.
It would be similar to this :
see jsFiddle
<h1>Heading</h1>
<h1>This is a longer heading</h1>
CSS
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}
but with only one line joining the words.
Is this what you're after?
Live demo
HTML:
<div class="header">
<div class="headerPart1">Heading</div>
<div class="headerPart2">This is a longer heading</div>
</div>
CSS:
.header {
overflow: hidden;
text-align: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
vertical-align: middle;
}
.headerPart1, .headerPart2 {
display: inline-block;
clear: none;
}
I guess this is what you are looking for: Is this http://jsfiddle.net/gSsGy/1/
I've added a width: 50% to the h1 element and then floated it to left.
Demo : LINK
just add:
.header {
overflow: hidden;
text-align: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
vertical-align: middle;
}
h1{
display: inline-block;
clear: none;
}
and this div before h1:
<div class="headercontent">