CODEWITHSUNDEEP
htmlcssbuttonposition
Prodan Mihai
Prodan Mihai

Reputation: 21

Fix a button position website html

When I change the country from dropdown, the "search button" is moving. I want it to be fixed in right like the "country button" is fixed in left. enter image description here

Select Country button:

                <div class="dropdown" >
                <button class="dropbtn" id="countryNameBtn">Select country</button>
                <div class="dropdown-content">
                    <a href="#" onclick="selectRomania()">Romania</a>
                    <a href="#" onclick="selectSpain()">Spain</a>
                    <a href="#" onclick="selectFrance()">France</a>
                </div>
            </div>

Search Button:

    <div class="goButton">
<button class="buttonSearch" style="vertical-align:middle" onclick="searchCity()"><span class="spanSearch">Search</span></button>
</div>

CSS:

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    border: 2px solid white;
    border-radius: 4px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    font-size: 1em;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: white;
    color: #43565C;
}
.goButton {
  margin-top: 2%;
  margin-right: -10%;
}
.buttonSearch {
  display: inline-block;
  border-radius: 4px;
  background-color: none;
  border: 1px solid white;
  color: #FFFFFF;
  text-align: center;
  font-size: 12px;
  padding: 7px;
  width: 27%;
  transition: all 0.5s;
  cursor: pointer;
}

How can I fix the position of the search button? I tried with position:fixed but it doesn't work.

Upvotes: 0

Views: 2716

Answers (1)

Masoud Amidi
Masoud Amidi

Reputation: 193

You should use bootstrap grid system. you can see detail and download it in this link : https://getbootstrap.com/docs/3.3/css/#grid

For your question it should be like this :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            border: 2px solid white;
            border-radius: 4px;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

            .dropdown-content a {
                color: black;
                padding: 8px 12px;
                text-decoration: none;
                display: block;
                font-size: 1em;
            }

                .dropdown-content a:hover {
                    background-color: #f1f1f1
                }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropbtn {
            width: 100%;
        }

        .dropdown:hover .dropbtn {
            background-color: white;
            color: #43565C;
        }

        .goButton {
            margin-top: 2%;
            margin-right: -10%;
        }

        .buttonSearch {
            display: inline-block;
            border-radius: 4px;
            background-color: none;
            border: 1px solid white;
            color: #FFFFFF;
            text-align: center;
            font-size: 12px;
            padding: 7px;
            transition: all 0.5s;
            cursor: pointer;
            width: 100%;
        }
    </style>

</head>
<body>
    <div class="row">
        <div class="col-md-2">
            <button class="dropbtn" id="countryNameBtn">Select country</button>
            <div class="dropdown-content">
                <a href="#" onclick="selectRomania()">Romania</a>
                <a href="#" onclick="selectSpain()">Spain</a>
                <a href="#" onclick="selectFrance()">France</a>
            </div>
        </div>
        <div class="col-md-2">
            <button class="buttonSearch" style="vertical-align:middle" onclick="searchCity()"><span class="spanSearch">Search</span></button>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

As you in this code u should use bootstrap files from cdn or you can download it and reference it from your files.

Then you can use div element with row class this makes a entire row for you. Then you can split your space in to standard and responsive columns.

We can use div with col-md-X classes. For more information read the link above. In this way every element has their space and does not have any effect on others.

I hope this helped you.

If you have any questions comment below.

Upvotes: 2

Related Questions