What's the best way to align these elements? I want to avoid using margin-top on the check mark icons to align them to the centerline of the buttons.
I Want To Avoid This
<div class="icon check" style="margin-top:11px;"></div>
Live example here:
JSFiddle
<div id="statusbar">
<div class="icon check"></div> <a class="btn inactive" href="">Button 1</a>
<div class="icon check"></div> <a class="btn inactive" href="">Button 2</a>
<div class="icon check"></div> <a class="btn inactive" href="">Button 3</a>
</div>
A good way is to set vertical-align:middle to the wrapper and using display:inline-block for the child like this:
<div id="statusbar">
<div class="icon check"></div> <a class="btn inactive" href="">Button 1</a>
<div class="icon check"></div> <a class="btn inactive" href="">Button 2</a>
<div class="icon check"></div> <a class="btn inactive" href="">Button 3</a>
</div>
.icon{
width:10px;
height:10px;
border:1px solid #000;
display: inline-block;
}
.inactive{
display: inline-block;
}
#statusbar{
height:auto;
vertical-align: middle;
}
DEMO
I would try setting the height of the checkbox icons to be equal to the button height, then centering the checkbox background image vertically. Depending on how the button height is set, this could be by font-size and line-height, or just a height. Then I'd use:
.icon {
background-position: 0 center;
}
Please share some of your CSS or a JSFiddle if that doesn't help.
Related
I'm using bootstrap 4 and I have a problem with navigation .nav .dropdown-menu and .text-truncate on mobile view when content text length is too long, it can't be ellipsis.
I have try set max-width 100% to .dropdown-menu so children element only expand maximum to parent width.
screenshot actualy happen
here the code
<nav class="navbar navbar-expand-sm navbar-dark bg-dark shadow fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-husr-navbar" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="collapse-husr-navbar" style="">
<ul class="navbar-nav" id="navbar-husr-right">
<div class="d-block d-sm-flex">
<div class="p-2 text-truncate">
<span class="d-inline">
<i class="fas fa-map-marker-alt"></i>
<small><span id="husr-branch-name">DUMMY BRANCH A</span></small>
</span>
</div>
</div>
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">
<span class="d-inline d-sm-none d-md-inline d-lg-inline">Menu</span>
</a>
<!-- here the first I try to put max-width:100%; so children element can't push parent to expand, but not work. :( -->
<div class="dropdown-menu dropdown-menu-right show" style="max-width:100%">
<span class="dropdown-item-text text-nowrap" style="
">
<i class="fas fa-user"></i>
<span id="husr-user-name">Staff User</span>
(<em><span id="husr-user-type">STAFF</span></em>)
</span>
<!-- here the second I try to put max-width:100%; so children element can't push parent to expand, but also not work. :( -->
<span class="dropdown-item-text head-email" style="max-width:100%">
<!-- here the third time put max-width:100%; so children element can't push parent to expand, butthis also not work. :( -->
<div class="text-truncate" style="max-width:100%">
<i class="fas fa-envelope"></i>
<span id="husr-user-username">i_mean_it_to_be_ellipsis_text_truncated_but_container_div_still_expanded</span>
<!-- yeah the text has no space because it contain an email that should be nospace -->
</div>
</span>
</div>
</li>
</ul>
</div>
</nav>
screenshot expected
For text-overflow to work, you need a max-width but also overflow: hidden. You should be able to remove the text-truncate div and use this CSS:
.head-email {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
}
From the MDN documentation for text-overflow:
The text-overflow property doesn't force an overflow to occur. To make text overflow its container you have to set other CSS properties: overflow and white-space.
EDIT:
In your case bootstrap under 576px doesn't limit the size of the navbar itself. Adding a max-width: 100%; on your div with class navbar-collapse fixes smaller viewport sizes.
i have a div which is resizeable through css.
HTML :
<div id="resize">
<img src="{{env.assets_url}}assets/images/minified_signhere.png" [hidden]="!isNameNull(sign.name)" [attr.id]="'sign-img' + myindex">
<img src="{{env.assets_url}}assets/images/minified_signhere_dim.png" [attr.id]="'dimimg' + myindex" [hidden]="isNameNull(sign.name)">
<div style="position: absolute;z-index: 1000;left: 100%;" class="signbtns">
<span style="font-size: 17px; margin-bottom: 5px" class="fa fa-trash float-right change-cursor" aria-hidden="true" (click)="deleteSign(myindex)"
data-toggle="tooltip" title="Click to delete the signature."></span>
<span style="font-size: 17px;" class="fa fa-pencil float-right change-cursor" (click)="editSign(myindex)" aria-hidden="true"
data-toggle="tooltip" title="Click to edit the signature."></span>
</div>
</div>
and following is CSS
#resize {
display: flex;
resize: both;
overflow:auto;
}
::-webkit-resizer {
background-color: red;
cursor: ew-resize;
}
div is being resize correctly. i want to customize the background color of resizer but the ::-webkit-resizer doesn't seem to work.
You change the color of #resize, not ::-webkit-resizer.
This is what our dropdown looks like now:
We want it to be like this:
Here is our current code:
<li>
<a target="blank" class="pull-left dropdown-menu__split-li-left" href=""><i class="fa fa-link margin-right-5 text-muted"></i>
Public Invoice View</a>
<a class="pull-right dropdown-menu__split-li-right" data-clipboard-text="" href="#" title="Click me to copy to your clipboard"></a>
<div class="clearfix"></div>
</li>
We're using Bootstrap 3 and here is some custom CSS:
.dropdown-menu__split-li-left {
margin-right: 0;
display: inline-block;
clear: inherit;
}
.pull-left {
float: left;
}
How do we make Public Invoice View and it's associated icon on the right?
Here is my solution JSFiddle
<li class="dropdown-item item">
<a target="blank" class="" href="#">
<i class=" fa fa-link icon"></i>
Public Invoice View</a>
<a class=" fa fa-clipboard clip" data-clipboard-text="" href="#" title="Click me to copy to your clipboard"></a>
</li>
.clip {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 30px;
text-align: center;
}
I made the clipboard icon position:absolute and gave the entire li item some padding-right to accommodate the clipboard icon.
This will ensure that the icon always remains to the right even if the text is long.
Also the dropdown will take the width equal to maximum width of the text.
I have this JSFiddle: https://jsfiddle.net/96urhqcz/
There are 4 divs in a row - the HTML looks like this:
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link1/">
<div style="margin:10px; padding: 30px 0px; background:#E74C3C" class="app">
<i class="fa fa-3x fa-comments-o" width="50%" style="display:block; margin:auto" src="/static/launcher/comments-o"></i>
Link Number 1
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link2/">
<div style="margin:10px; padding: 30px 0px; background:#9D55B8" class="app">
<i class="fa fa-3x fa-paper-plane" width="50%" style="display:block; margin:auto" src="/static/launcher/paper-plane"></i>
Link Number 2
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link3/">
<div style="margin:10px; padding: 30px 0px; background:#3395DD" class="app">
<i class="fa fa-3x fa-street-view" width="50%" style="display:block; margin:auto" src="/static/launcher/street-view"></i>
Link 3
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link4/">
<div style="margin:10px; padding: 30px 0px; background:#00838F" class="app">
<i class="fa fa-3x fa-line-chart" width="50%" style="display:block; margin:auto" src="/static/launcher/line-chart"></i>
Link 4
</div>
</a>
</div>
The CSS for g-1-4 looks like this:
.g-1-4{
width: 25%;
}
As you can see in the JSFiddle - the margins between the boxes are 'linked' to the appropriate box.
Ultimately I'm trying to have a 4-across layout, but have the margins not linked. When a user mouses between the boxes I want it to be a regular mouse with no clickability.
I'm sure it's something really simple I'm missing - but I can't seem to correct it.
Any thoughts or ideas?
You can set a fixed width to your divs, and using flexbox they will be automaticaly displayed with space which is not 'linked'.
Hope this little code will help you.
.flex {
display : flex;
justify-content : space-around;
}
.div1, .div3 {
width : 120px;
height : 120px;
background-color : red;
}
.div2, .div4 {
width : 120px;
height : 120px;
background-color : blue;
}
p {
margin : 0;
color : white;
line-height: 120px;
font-size : 12px;
text-align : center;
}
<div class="flex">
<a href="#" class="div1">
<p>LINK 1</p>
</a>
<a href="#" class="div2">
<p>LINK 2</p>
</a>
<a href="#" class="div3">
<p>LINK 3</p>
</a>
<a href="#" class="div4">
<p>LINK 4</p>
</a>
</div>
Take the margin off of the <div> and add it to the <a> that's wrapping the div. Also add style="display:block:" to the <a>.
This CodePen has the updates.
The issue is coming from your using the table cell display method.
.g > div,
.g-m > div {
display: table-cell;
vertical-align: top;
}
I also support the flex box usage as pointed out by Louis.
What is happening is that the link element is expanding to the 100% of the container div to get some space you could set a specific width for the a tag or you could add some padding to the container element, you will have to play with padding and width to make it look good though.
https://jsfiddle.net/96urhqcz/1/
.g-1-4{
width: 25%;
padding: 10px;
}
I know I can push navbar items to the left and right, but how would I center them?
text-align:center;
doesn't work nor any of the other things I thought of.
You will need to modify some CSS rules for Navbar component. So add a class center to nav.navbar and the following rules:
.navbar.center .navbar-inner {
text-align: center;
}
.navbar.center .navbar-inner .nav {
display:inline-block;
float: none;
}
Working demo (Bootstrap 3.3.7)
To extend upon the selected answer, adding vertical align top will prevent the space from appearing under the nav items.
.navbar.center .navbar-inner {
text-align: center;
}
.navbar.center .navbar-inner .nav {
display:inline-block;
float: none;
vertical-align: top;
}
Demo
I had similar problem. What worked for me is adding rule 'justify-content' like this:
CSS:
.navbar-expand-lg .navbar-collapse {
display: flex!important;
justify-content: space-around;
flex-basis: auto;
}
HTML:
<nav id="hamburger" class="navbar sticky-top navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav center">
<div><a class="nav-item nav-link active" href="#">
Start <span class="sr-only">(current)</span></a>
</div>
<div><a class="nav-item nav-link" href="#">Portfolio</a></div>
<div><a class="nav-item nav-link" href="#">Blog</a></div>
<div><a class="nav-item nav-link" href="#">O mnie</a></div>
<div><a class="nav-item nav-link" href="#">Kontakt</a></div>
</div>
</div>
</nav>
Use text-center or mx-auto or container-fluid or use flexbox technique, flex justify-center
You could use this hack text-center (this does not only apply for text)
Or use the exact boostrap class mx-auto
example
class="text-center" or class="mx-auto"
in context
<div class="btn-group text-center"> or <div class="btn-group mx-auto">
TRY NOT TO USE inline styles (bad practice)
<div class="btn-group" style="margin:0 auto">
References here:
text-center =>
https://getbootstrap.com/docs/4.0/utilities/text/
mx-auto => https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering
You can use
text-align:center;
to a wrapper element to center its childs, but only if the childs have
display: inline;
/* or */
display: inline-block;
Another option, if you know the width of the element you want to center, is
display: block;
width: /* something */;
margin: 0 auto;