I want to create Buttons with icons and text under it. I started with the following:
<ion-view view-title="Title">
<ion-content>
<div class="list">
<a ng-repeat="image in images" class="item">
<div class="container">
<img ng-src="{{image}}" />
</div>
<div class="container-side-menu">
<div>
<button class="button button-icon">
<i class="icon ion-eye"></i> preview
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-crop"></i> crop
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-android-options"></i> styles
</button>
</div>
<div>
<button class="button button-clear">
<i class="icon ion-social-tumblr"></i> text
</button>
</div>
</div>
</a>
</div>
</ion-content>
</ion-view>
with the following css:
.container {
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("../img/frames/frame_01.png");
background-size: contain;
background-repeat: no-repeat;
width: 245px;
height: 325px;
position: relative;
}
.container img {
width: 87.5%;
height: 68.5%;
position: absolute;
top: 0;
bottom: 13%;
left: 0;
right: 0;
margin: auto;
}
.container-side-menu {
width: 10%;
height: 50%;
top: 20%;
right: 15px;
position: absolute;
margin: auto;
}
.container-side-menu .button {
color: white !important;
}
but the result of it is ofcourse that the text is written next to the icons of the buttons.
How can i set the text directly under the buttons without padding and how can i make my icons greater and my text smaller?
I was able to get the text under the icons:
<ion-view view-title="Title">
<ion-content>
<div class="list">
<a ng-repeat="image in images" class="item">
<div class="container">
<img ng-src="{{image}}" />
</div>
<div class="container-side-menu">
<div>
<button class="button button-icon">
<i class="icon ion-eye"></i>
<span>preview</span>
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-crop"></i>
<span>crop</span>
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-android-options"></i>
<span>styles</span>
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-social-tumblr"></i>
<span>text</span>
</button>
</div>
</div>
</a>
</div>
</ion-content>
</ion-view>
css:
.container-side-menu div {
vertical-align: top;
text-align: center;
}
.container-side-menu span {
display: block;
font-size: 10px;
}
BUT: between the icon and the text is too much space. how can i remove that space?
Alter the line-height of the button inside the container.
angular.module('app', ['ionic']);
.container-side-menu {
width: 10%;
top: 15%;
right: 15px;
position: absolute;
margin: auto;
}
.container-side-menu .button {
font-size: 10px;
line-height: 10px; // Add
}
.container-side-menu .button-icon .icon {
display: block;
font-size: 30px;
margin-bottom: 3px !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<div class="container-side-menu">
<div>
<button class="button button-icon">
<i class="icon ion-eye"></i> preview
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-crop"></i> crop
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-android-options"></i> styles
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-social-tumblr"></i> text
</button>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Using this css bellow:
.button-icon .icon {
display: block; /*** icons on the texts ***/
font-size: 36px; /*** increase size of icons ***/
margin-bottom: 3px;
}
Related
I had this issue fixed with text-break from bootstrap, but for some reason, something is overriding it and now my text does not wrap at all. I put a code snippet that reproduces the issue. I've tried everything and I am sure I am missing something silly. I'm only typing now because stackoverflow wants me to. You can ignore the next set of random thoughts.
.comment_input{
padding: 5px;
margin: 5px;
border-radius: 8px;
border: none;
width: 100%;
}
.profile-name{
display: flex;
align-items: center;
column-gap: 5px;
}
.profile_image{
width: 30px;
height: 30px;
border-radius: 50%;
}
.post{
margin: 10px auto;
width: 80%;
border-radius: 3px;
background: darkgray;
}
.post_padding{
margin: 5px;
}
.post_comment{
display: flex;
align-items: center;
gap: 5px;
}
.post_top{
display: flex;
justify-content: space-between;
}
.hover:hover {
cursor: pointer;
}
.like-and-comment{
display: flex;
justify-content: space-around;
border-bottom: 1px solid white;
border-top: 1px solid white;
align-items: center;
padding: 5px;
}
.view-more{
display: flex;
justify-content: space-between;
font-size: 14px;
}
.lk{
display: flex;
font-size: 14px;
gap: 5px;
}
.right{
border-left: 1px solid white;
border-bottom: 1px solid white;
border-bottom-left-radius: 30px;
width: 5%;
top: 5px;
position: absolute;
height: 120%;
left: -20px;
}
.reply {
display: flex;
gap: 10px;
}
.reply-body{
word-wrap : break-word;
overflow-wrap: break-word;
}
.user{
/* TODO fix text overflow for when no spaces added*/
background: grey;
padding: 8px;
border-radius: 20px;
/*TODO max variable based on content*/
width: max-content;
word-wrap : break-word;
overflow-wrap: break-word;
}
.like-comment, .reply_comment{
cursor: pointer;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="post">
<script id="counter40">1</script>
<div class="post_padding">
<div class="post_top">
<div class="profile-name">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div>
<div id="post_top"> jon </div>
<div id="post_top2" class="location-time"><span class="time">in 3 hours</span><i class="fas fa-globe-americas"></i></div>
</div>
</div>
<div id="three-dots" style="display: block" class="hover">
<div class="dropdown">
<div href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></div>
<div class="dropdown-menu">
<div id="post_edit_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(40)">
<i class="bi bi-pencil-square"> Edit</i>
</div>
<div id="post_ban_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_ban_modal(1)">
<i class="bi bi-eye-slash"> Ban</i>
</div>
<div id="post_history_modal" style="display: none;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_history_modal(1)">
<i class="bi bi-clock-history"> History</i>
</div>
</div>
</div>
</div>
</div>
<!--this is really the post-->
<div class="media ">
<div class="text-break" id="post_body">hi</div>
<img id="media_graphic">
</div>
<!--Finish this, need media link, media article-->
<div class="like-and-comment">
<div class="d-flex align-items-center">
<i id="upvote40" class="fas fa-arrow-up hover" style="color: gray;" onclick="vote(40,1)"></i>
<span id="upvote_count_badge40" class="badge bg-secondary">0</span>
<i id="downvote40" class="fas fa-arrow-down hover" style="color: gray;" onclick="vote(40,0)"></i>
</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(40)">
<i class="fas fa-award hover"></i>
</div>
<div class="dropdown hover">
<div class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-share"></i></div>
<ul class="dropdown-menu">
<p id="post_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(40)">
<i class="bi bi-signpost-2"> Cross Post</i>
</p>
<p id="copytoclipboard" class="dropdown-item" onclick="copyToClipboard('http://127.0.0.1:5000/post/40')">
<i class="bi bi-clipboard"> Copy Link</i>
</p>
<p id="save_post" class="dropdown-item" onclick="save_post(40)">
<i id="save_post_icon40" class="bi bi-save"> Save</i>
</p>
</ul>
</div>
</div>
<div class="view-more">
<div class="hover" id="load_replies40" onclick="loadReplies(40,0)"></div>
<div class="hover" id="comment_collapse"> 1 comments</div>
</div>
<div class="comment">
<div id="reply_loader40"><!--Append Replies Here-->
<div class="lk">
<script id="counter46">0</script>
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div style="width: 100%;">
<div class="user">
<div class="reply_author">jon in 6 hours </div>
<div class="reply-body">word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;</div>
</div>
<div class="reply">
<div class="d-flex align-items-center">
<i id="upvote46" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(46,1)"></i>
<span id="upvote_count_badge46" class="badge bg-secondary">0</span>
<i id="downvote46" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(46,0)"></i>
</div>
<div class="reply_comment" id="reply46">Reply</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(46)">
<i class="fas fa-award hover"></i>
</div>
</div>
<form id="submit_reply46" style="display: none;" autocomplete="off">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input46" maxlength="1024" name="body" placeholder="Write a comment3" required="" type="text" value="">
<div id="comment_input_error46" class="invalid-feedback"></div>
</form>
<div id="reply_loader46"><!--Nested Replies go here--></div>
</div>
</div>
</div>
<form id="submit_reply" autocomplete="off">
<div class="post_comment">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input40" maxlength="1024" name="body" placeholder="Write a comment" required="" type="text" value="">
<div id="comment_input_error40" class="invalid-feedback"></div>
</div>
</form>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
You used max-content for your width in your user container.
The max-content sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows. -MDN
You can change that to 100%. You can learn more on max-content here.
.comment_input {
padding: 5px;
margin: 5px;
border-radius: 8px;
border: none;
width: 100%;
}
.profile-name {
display: flex;
align-items: center;
column-gap: 5px;
}
.profile_image {
width: 30px;
height: 30px;
border-radius: 50%;
}
.post {
margin: 10px auto;
width: 80%;
border-radius: 3px;
background: darkgray;
}
.post_padding {
margin: 5px;
}
.post_comment {
display: flex;
align-items: center;
gap: 5px;
}
.post_top {
display: flex;
justify-content: space-between;
}
.hover:hover {
cursor: pointer;
}
.like-and-comment {
display: flex;
justify-content: space-around;
border-bottom: 1px solid white;
border-top: 1px solid white;
align-items: center;
padding: 5px;
}
.view-more {
display: flex;
justify-content: space-between;
font-size: 14px;
}
.lk {
display: flex;
font-size: 14px;
gap: 5px;
}
.right {
border-left: 1px solid white;
border-bottom: 1px solid white;
border-bottom-left-radius: 30px;
width: 5%;
top: 5px;
position: absolute;
height: 120%;
left: -20px;
}
.reply {
display: flex;
gap: 10px;
}
.reply-body {
word-wrap: break-word;
overflow-wrap: break-word;
}
.user {
/* TODO fix text overflow for when no spaces added*/
background: grey;
padding: 8px;
border-radius: 20px;
/*TODO max variable based on content*/
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.like-comment,
.reply_comment {
cursor: pointer;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="post">
<script id="counter40">
1
</script>
<div class="post_padding">
<div class="post_top">
<div class="profile-name">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div>
<div id="post_top"> jon </div>
<div id="post_top2" class="location-time"><span class="time">in 3 hours</span><i class="fas fa-globe-americas"></i></div>
</div>
</div>
<div id="three-dots" style="display: block" class="hover">
<div class="dropdown">
<div href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></div>
<div class="dropdown-menu">
<div id="post_edit_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(40)">
<i class="bi bi-pencil-square"> Edit</i>
</div>
<div id="post_ban_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_ban_modal(1)">
<i class="bi bi-eye-slash"> Ban</i>
</div>
<div id="post_history_modal" style="display: none;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_history_modal(1)">
<i class="bi bi-clock-history"> History</i>
</div>
</div>
</div>
</div>
</div>
<!--this is really the post-->
<div class="media ">
<div class="text-break" id="post_body">hi</div>
<img id="media_graphic">
</div>
<!--Finish this, need media link, media article-->
<div class="like-and-comment">
<div class="d-flex align-items-center">
<i id="upvote40" class="fas fa-arrow-up hover" style="color: gray;" onclick="vote(40,1)"></i>
<span id="upvote_count_badge40" class="badge bg-secondary">0</span>
<i id="downvote40" class="fas fa-arrow-down hover" style="color: gray;" onclick="vote(40,0)"></i>
</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(40)">
<i class="fas fa-award hover"></i>
</div>
<div class="dropdown hover">
<div class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-share"></i></div>
<ul class="dropdown-menu">
<p id="post_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(40)">
<i class="bi bi-signpost-2"> Cross Post</i>
</p>
<p id="copytoclipboard" class="dropdown-item" onclick="copyToClipboard('http://127.0.0.1:5000/post/40')">
<i class="bi bi-clipboard"> Copy Link</i>
</p>
<p id="save_post" class="dropdown-item" onclick="save_post(40)">
<i id="save_post_icon40" class="bi bi-save"> Save</i>
</p>
</ul>
</div>
</div>
<div class="view-more">
<div class="hover" id="load_replies40" onclick="loadReplies(40,0)"></div>
<div class="hover" id="comment_collapse"> 1 comments</div>
</div>
<div class="comment">
<div id="reply_loader40">
<!--Append Replies Here-->
<div class="lk">
<script id="counter46">
0
</script>
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div style="width: 100%;">
<div class="user">
<div class="reply_author">jon in 6 hours </div>
<div class="reply-body">word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;</div>
</div>
<div class="reply">
<div class="d-flex align-items-center">
<i id="upvote46" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(46,1)"></i>
<span id="upvote_count_badge46" class="badge bg-secondary">0</span>
<i id="downvote46" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(46,0)"></i>
</div>
<div class="reply_comment" id="reply46">Reply</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(46)">
<i class="fas fa-award hover"></i>
</div>
</div>
<form id="submit_reply46" style="display: none;" autocomplete="off">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input46" maxlength="1024" name="body" placeholder="Write a comment3" required="" type="text" value="">
<div id="comment_input_error46" class="invalid-feedback"></div>
</form>
<div id="reply_loader46">
<!--Nested Replies go here-->
</div>
</div>
</div>
</div>
<form id="submit_reply" autocomplete="off">
<div class="post_comment">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input40" maxlength="1024" name="body" placeholder="Write a comment" required="" type="text" value="">
<div id="comment_input_error40" class="invalid-feedback"></div>
</div>
</form>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
I have created a fixed footer for my website:
HTML
<div class="card footerBF">
<div class="card-body space-around">
<button
type="button"
class="buttonBF"
routerLink="/myRouter"
>
<i class="fa fa-lock fa-lg"></i>
</button>
<button
type="button"
class="buttonBF"
routerLink="myRouter"
>
<i class="fa fa-globe fa-lg"></i>
</button>
<button type="button" class="buttonBF" routerLink="myRoute">
<i class="fa fa-plus fa-lg"></i>
</button>
<button
type="button"
class="buttonBF"
routerLink="myRouter"
>
<i class="fa fa-home fa-lg"></i>
</button>
</div>
</div>
CSS
.footerBF {
background-color: white;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
font-size: 1em;
}
.buttonBF {
background-color: white;
color: grey;
display: inline-block;
border: none;
cursor: pointer;
}
The problem is that when I scroll, my footer moves, even though is supposed to be fixed. I attach one picture to show this effect:
There are Bootstrap UI elements for the a fixed bottom navbar, each with props to do this... check out Fixed bottom
<nav class="navbar fixed-bottom">
// Buttons
</nav>
However, if you want your current code from the question to work as intended. I'd just set the footer with display: flex, give it a height and justify-content and align-items center.
body {
background: black;
height: 2000px;
}
.footerBF {
background-color: white;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
font-size: 1em;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #f1f1f1;
}
button {
background-color: white;
border: none;
cursor: pointer;
}
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
<body>
<div class="card footerBF">
<div class="card-body">
<button type="button">
<i class="fa fa-lock fa-lg"></i>
</button>
<button type="button">
<i class="fa fa-globe fa-lg"></i>
</button>
<button type="button">
<i class="fa fa-plus fa-lg"></i>
</button>
<button type="button">
<i class="fa fa-home fa-lg"></i>
</button>
</div>
</div>
</body>
I have 2 navbar which is Top Bar and Menu, The menu is responsive but Top Bar not. How I make a responsive top bar (icon and image)?
<div class="header widget-style1 clearfix">
<div class="container">
<div class="header-wrap clearfix">
<div class="row">
<div class="col-lg-4" style="float: right;">
<div id="" class="">
<a href="/" rel="home">
<img src="{{asset('images/logojipp34.jpg')}}" alt="image">
</a>
</div>
<!-- /. -->
</div>
<div class="col-lg-8">
<div class="page" style="margin-top: 50px">
<div class="row">
<div class="col-md-4 text-right">
<i class="fa fa-instagram fa-2x" style="color: #9D2629"></i>
</div>
<div class="col-md-4 text-right">
<i class="fa fa-facebook-f fa-2x" style="color: #9D2629"></i>
</div>
<div class="col-md-4 text-right">
<i class="fa fa-twitter fa-2x" style="color: #9D2629"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.header-wrap -->
</div>
how I make responsive design with that?
why dont you add something like
body {margin:0;}
.topbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.topbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="topbar">
Home
News
FAQ
</body>
</html>
I have a div with three divs inside of different width. when my window size changes it is overlapping each other.How do I make content remain without overlapping when window size changes.
Here is my code.
#topBarContainer{
background-color: blue;
}
#topBarLeft{
width: 14%;
text-align: center;
}
#topBarMiddle{
width: 26%;
text-align: center;
}
#topBarRight{
width: 60%;
text-align: right;
}
.topBar {
margin-right: -4px;
text-align: center;
display: inline-block;
padding-top: 5px;
padding-bottom: 3px;
}
<div id="topBarContainer">
<!--TopBar-->
<div id="topBarLeft" class="topBar">
<input type="button" ng-click="newMenuType('message')" value="New" id="newButton">
</div>
<!--Top Bar Middle-->
<div id="topBarMiddle" class="topBar">
<div class="searchBoxContainer">
<i class="fa fa-search fa-flip-horizontal" id="searchBoxIcon"> </i>
<input type="text" placeholder="Search Inbox" class="searchBox" ng-model="searchEmail" />
</div>
</div>
<!--Top Bar Right-->
<div id="topBarRight" class="topBar">
<div>
<div class="loginRow">Hi{{loginName()}}</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply"></i>
</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply-all"></i>
</div>
<div ng-if="emailIcon()" class="iconRow" >
<i class="fa fa-reply fa-flip-horizontal"></i>
</div>
<div ng-if="!isDeletedView() && emailIcon()" class="iconRow">
<i class="fa fa-trash"></i>
</div>
</div>
</div>
</div>
It is looking good with normal window when I resize window it is overlapping all.leftBar takes 14%and middle bar takes 26% and rest for the right container.
I am spenting days to fix this. I need to align all so that all 3 sections display in the same line.
you can use display:flex from flexbox
body {
margin: 0
}
#topBarContainer {
background-color: blue;
display: flex;
}
#topBarLeft {
width: 14%;
text-align: center;
}
#topBarMiddle {
text-align: center;
background: red;
width: 35%
}
#topBarRight {
text-align: right;
background: green;
flex: 1
}
#topBarRight > div {
display: inline-flex
}
.topBar {
text-align: center;
padding-top: 5px;
padding-bottom: 3px;
}
#topBarRight >div:last-of-type {
text-align: center
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id="topBarContainer">
<!--TopBar-->
<div id="topBarLeft" class="topBar">
<input type="button" ng-click="newMenuType('message')" value="New" id="newButton">
</div>
<!--Top Bar Middle-->
<div id="topBarMiddle" class="topBar">
<div class="searchBoxContainer">
<i class="fa fa-search fa-flip-horizontal" id="searchBoxIcon"> </i>
<input type="text" placeholder="Search Inbox" class="searchBox" ng-model="searchEmail" />
</div>
</div>
<!--Top Bar Right-->
<div id="topBarRight" class="topBar">
<div>
<div class="loginRow">Hi{{loginName()}}</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply"></i>
</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply-all"></i>
</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply fa-flip-horizontal"></i>
</div>
<div ng-if="!isDeletedView() && emailIcon()" class="iconRow">
<i class="fa fa-trash"></i>
</div>
<div ng-show="canMoveToFolder()" class="iconRow" ng-mouseover="newIcon = true" ng-mouseleave="newIcon = false"> <i class="fa fa-folder-o"> </i>
<div ng-if="newIcon" id="newItemOptions">
<label class='newItemLabel' ng-click="moveMessageToFolder(3)">Inbox</label>
<label class='newItemLabel' ng-click="moveMessageToFolder(4)">Sent</label>
</div>
</div>
</div>
</div>
</div>
I'm not sure if it is what you are looking for but if you put your searchBoxContainer in display:flex; it shud solwe the problem cause it puts your searchBoxIcon in front of the searchBox it self
you have to pu in your css
.searchBoxContainer{
display:flex;
}
#topBarContainer{
background-color: blue;
}
#topBarLeft{
width: 14%;
text-align: center;
}
#topBarMiddle{
width: 26%;
text-align: center;
}
#topBarRight{
width: 60%;
text-align: right;
}
.topBar {
margin-right: -4px;
text-align: center;
display: inline-block;
padding-top: 5px;
padding-bottom: 3px;
}
.searchBoxContainer{
display:flex;
}
<div id="topBarContainer">
<!--TopBar-->
<div id="topBarLeft" class="topBar">
<input type="button" ng-click="newMenuType('message')" value="New" id="newButton">
</div>
<!--Top Bar Middle-->
<div id="topBarMiddle" class="topBar">
<div class="searchBoxContainer">
<i class="fa fa-search fa-flip-horizontal" id="searchBoxIcon"> </i>
<input type="text" placeholder="Search Inbox" class="searchBox" ng-model="searchEmail" />
</div>
</div>
<!--Top Bar Right-->
<div id="topBarRight" class="topBar">
<div>
<div class="loginRow">Hi{{loginName()}}</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply"></i>
</div>
<div ng-if="emailIcon()" class="iconRow">
<i class="fa fa-reply-all"></i>
</div>
<div ng-if="emailIcon()" class="iconRow" >
<i class="fa fa-reply fa-flip-horizontal"></i>
</div>
<div ng-if="!isDeletedView() && emailIcon()" class="iconRow">
<i class="fa fa-trash"></i>
</div>
</div>
</div>
</div>
Why are all elements moved right with that negative margin on the .topBar class? I would just erase that, and add box-sizing: border-box; to .topBar (just to be on the safe side for percentage widths and heights).
So you'd have
.topBar {
box-sizing: border-box;
text-align: center;
display: inline-block;
padding-top: 5px;
padding-bottom: 3px;
}
I am creating a gallery website my goal is the show option button on bottom of the picture when use hover over it.
Here is an example of what I want on pixabay
<div class="image-thumbnail col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
<div class="image-options">
<div class="btn-group" role="group">
<button type="button" class="btn btn-sm ">
<i class="fa fa-thumbs-up"></i>
</button>
<button type="button" class="btn btn-sm ">
<i class="fa fa-thumbs-down"></i>
</button>
<button type="button" class="btn btn-sm">
<i class="fa fa-facebook"></i>
</button>
<button type="button" class="btn btn-sm">
<i class="fa fa-google-plus"></i>
</button>
<button type="button" class="btn btn-sm">
<i class="fa fa-twitter"></i>
</button>
</div>
</div>
</div>
CSS
div.image-thumbnail div.image-options {
position: absolute;
z-index: 2000;
margin-top: -55px;
margin-left: 1px;
display: none;
}
div.image-thumbnail div.image-options:hover {
display: inline;
}
Any ideas ?
EDIT:
It turns out that
div.image-thumbnail div.image-options {
position: absolute;
z-index: 2000;
margin-top: -55px;
margin-left: 1px;
display: none;
}
Don't work at all as the image-options are still visible even with display:none
You can't hover element with display: none, it's not visible. Instead you should define :hover rule on .image-thumbnail element:
.image-thumbnail {
position: relative;
}
.image-thumbnail .image-options {
position: absolute;
z-index: 2000;
margin-top: -55px;
margin-left: 1px;
display: none;
}
.image-thumbnail:hover .image-options {
display: inline;
}
As stated in my comment.
div.image-thumbnail div.image-options:hover {
display: inline;
}
This is saying when we hover over div.image-options display it... This isn't possible. (As you have it set to display: none) plus this is not the element you want to set the hover on.
What you mean to say is
div.image-thumbnail:hover div.image-options {
display: inline;
}
When we hover over div.image-thumbnail then show div.image-options.