Button alignment when text box shrinks (CSS)
0
Alright, what I am trying to do is, I want the button beside my text box to be aligned beside the text box whenever my page resize, which would cause my text box to shrink or expand accordingly ( as you can see below in the following snippet) Can someone help me out here? Thanks in advance for the help!
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}.topnav {
background-color: transparent;
}
.topnav a {
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
padding-top: 5px;
}
.hehe {
float: right;
padding-top: 5px;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: transparent;
color: skyblue;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 900px) {
.topnav a:not(:nth-child(-n+2)),
.dropdown .dropbtn {
display: none;
}
.topnav a:not(:nth-child(-n+2)),
.hehe {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 900px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .hehe {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
.topnav.responsive .hehe {
display: block;
width: 100%;
text-align: left;
}
}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
position: absolute;
top: 18px;
left: 75px;
}
.test {
position: absolute;
top: 20px;
left: 350px;
}<div class="topnav" id="myTopnav" ng-controller="searchController">
<a href="#!/index" class="searchba"><img ng-src="" />LOGO</a>
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here..."><button class="test">Test</button>
<div class="hehe">
<a href="">Developer</a>
<a href="">Data Enquiry</a>
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>html css
asked Nov 15 '18 at 3:41
ITnypITnyp
628
add a comment |
0
Alright, what I am trying to do is, I want the button beside my text box to be aligned beside the text box whenever my page resize, which would cause my text box to shrink or expand accordingly ( as you can see below in the following snippet) Can someone help me out here? Thanks in advance for the help!
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}.topnav {
background-color: transparent;
}
.topnav a {
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
padding-top: 5px;
}
.hehe {
float: right;
padding-top: 5px;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: transparent;
color: skyblue;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 900px) {
.topnav a:not(:nth-child(-n+2)),
.dropdown .dropbtn {
display: none;
}
.topnav a:not(:nth-child(-n+2)),
.hehe {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 900px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .hehe {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
.topnav.responsive .hehe {
display: block;
width: 100%;
text-align: left;
}
}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
position: absolute;
top: 18px;
left: 75px;
}
.test {
position: absolute;
top: 20px;
left: 350px;
}<div class="topnav" id="myTopnav" ng-controller="searchController">
<a href="#!/index" class="searchba"><img ng-src="" />LOGO</a>
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here..."><button class="test">Test</button>
<div class="hehe">
<a href="">Developer</a>
<a href="">Data Enquiry</a>
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>html css
asked Nov 15 '18 at 3:41
ITnypITnyp
628
add a comment |
0
0
0
Alright, what I am trying to do is, I want the button beside my text box to be aligned beside the text box whenever my page resize, which would cause my text box to shrink or expand accordingly ( as you can see below in the following snippet) Can someone help me out here? Thanks in advance for the help!
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}.topnav {
background-color: transparent;
}
.topnav a {
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
padding-top: 5px;
}
.hehe {
float: right;
padding-top: 5px;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: transparent;
color: skyblue;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 900px) {
.topnav a:not(:nth-child(-n+2)),
.dropdown .dropbtn {
display: none;
}
.topnav a:not(:nth-child(-n+2)),
.hehe {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 900px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .hehe {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
.topnav.responsive .hehe {
display: block;
width: 100%;
text-align: left;
}
}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
position: absolute;
top: 18px;
left: 75px;
}
.test {
position: absolute;
top: 20px;
left: 350px;
}<div class="topnav" id="myTopnav" ng-controller="searchController">
<a href="#!/index" class="searchba"><img ng-src="" />LOGO</a>
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here..."><button class="test">Test</button>
<div class="hehe">
<a href="">Developer</a>
<a href="">Data Enquiry</a>
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>html css
asked Nov 15 '18 at 3:41
ITnypITnyp
628
Alright, what I am trying to do is, I want the button beside my text box to be aligned beside the text box whenever my page resize, which would cause my text box to shrink or expand accordingly ( as you can see below in the following snippet) Can someone help me out here? Thanks in advance for the help!
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}.topnav {
background-color: transparent;
}
.topnav a {
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
padding-top: 5px;
}
.hehe {
float: right;
padding-top: 5px;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: transparent;
color: skyblue;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 900px) {
.topnav a:not(:nth-child(-n+2)),
.dropdown .dropbtn {
display: none;
}
.topnav a:not(:nth-child(-n+2)),
.hehe {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 900px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .hehe {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
.topnav.responsive .hehe {
display: block;
width: 100%;
text-align: left;
}
}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
position: absolute;
top: 18px;
left: 75px;
}
.test {
position: absolute;
top: 20px;
left: 350px;
}<div class="topnav" id="myTopnav" ng-controller="searchController">
<a href="#!/index" class="searchba"><img ng-src="" />LOGO</a>
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here..."><button class="test">Test</button>
<div class="hehe">
<a href="">Developer</a>
<a href="">Data Enquiry</a>
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}.topnav {
background-color: transparent;
}
.topnav a {
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
padding-top: 5px;
}
.hehe {
float: right;
padding-top: 5px;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: transparent;
color: skyblue;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 900px) {
.topnav a:not(:nth-child(-n+2)),
.dropdown .dropbtn {
display: none;
}
.topnav a:not(:nth-child(-n+2)),
.hehe {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 900px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .hehe {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
.topnav.responsive .hehe {
display: block;
width: 100%;
text-align: left;
}
}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
position: absolute;
top: 18px;
left: 75px;
}
.test {
position: absolute;
top: 20px;
left: 350px;
}<div class="topnav" id="myTopnav" ng-controller="searchController">
<a href="#!/index" class="searchba"><img ng-src="" />LOGO</a>
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here..."><button class="test">Test</button>
<div class="hehe">
<a href="">Developer</a>
<a href="">Data Enquiry</a>
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}.topnav {
background-color: transparent;
}
.topnav a {
display: inline-block;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
padding-top: 5px;
}
.hehe {
float: right;
padding-top: 5px;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: transparent;
color: skyblue;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 900px) {
.topnav a:not(:nth-child(-n+2)),
.dropdown .dropbtn {
display: none;
}
.topnav a:not(:nth-child(-n+2)),
.hehe {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 900px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .hehe {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
.topnav.responsive .hehe {
display: block;
width: 100%;
text-align: left;
}
}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
position: absolute;
top: 18px;
left: 75px;
}
.test {
position: absolute;
top: 20px;
left: 350px;
}<div class="topnav" id="myTopnav" ng-controller="searchController">
<a href="#!/index" class="searchba"><img ng-src="" />LOGO</a>
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here..."><button class="test">Test</button>
<div class="hehe">
<a href="">Developer</a>
<a href="">Data Enquiry</a>
</div>
<div class="dropdown">
<button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content" >
<a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>html css
html css
asked Nov 15 '18 at 3:41
ITnypITnyp
628
asked Nov 15 '18 at 3:41
ITnypITnyp
628
asked Nov 15 '18 at 3:41
ITnypITnyp
628
asked Nov 15 '18 at 3:41
ITnypITnyp
628
asked Nov 15 '18 at 3:41
ITnypITnyp
628
628
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Remove absolute positioning from both .test and .searchFeature, then wrap them in a flexbox. I also recommend adding a min-width to the input.
HTML:
<div class="search-wrapper">
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here...">
<button class="test">Test</button>
</div>
CSS:
.search-wrapper {
display: flex;
flex-direction: row;
}
.test {}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
}
answered Nov 15 '18 at 4:11
Beth ShookBeth Shook
12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53312103%2fbutton-alignment-when-text-box-shrinks-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Remove absolute positioning from both .test and .searchFeature, then wrap them in a flexbox. I also recommend adding a min-width to the input.
HTML:
<div class="search-wrapper">
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here...">
<button class="test">Test</button>
</div>
CSS:
.search-wrapper {
display: flex;
flex-direction: row;
}
.test {}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
}
answered Nov 15 '18 at 4:11
Beth ShookBeth Shook
12
add a comment |
0
Remove absolute positioning from both .test and .searchFeature, then wrap them in a flexbox. I also recommend adding a min-width to the input.
HTML:
<div class="search-wrapper">
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here...">
<button class="test">Test</button>
</div>
CSS:
.search-wrapper {
display: flex;
flex-direction: row;
}
.test {}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
}
answered Nov 15 '18 at 4:11
Beth ShookBeth Shook
12
add a comment |
0
0
0
Remove absolute positioning from both .test and .searchFeature, then wrap them in a flexbox. I also recommend adding a min-width to the input.
HTML:
<div class="search-wrapper">
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here...">
<button class="test">Test</button>
</div>
CSS:
.search-wrapper {
display: flex;
flex-direction: row;
}
.test {}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
}
answered Nov 15 '18 at 4:11
Beth ShookBeth Shook
12
Remove absolute positioning from both .test and .searchFeature, then wrap them in a flexbox. I also recommend adding a min-width to the input.
HTML:
<div class="search-wrapper">
<input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here...">
<button class="test">Test</button>
</div>
CSS:
.search-wrapper {
display: flex;
flex-direction: row;
}
.test {}
.searchFeature {
border: 1px solid #999;
padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
border-radius: 3px;
/* transition: background 0.4s; */
width:40%;
}
answered Nov 15 '18 at 4:11
Beth ShookBeth Shook
12
answered Nov 15 '18 at 4:11
Beth ShookBeth Shook
12
answered Nov 15 '18 at 4:11
Beth ShookBeth Shook
12
answered Nov 15 '18 at 4:11
Beth ShookBeth Shook
12
12
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53312103%2fbutton-alignment-when-text-box-shrinks-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
