I am using Bootstrap's tooltip to display text against some of the buttons within the display page. Everything is working fine except that the display of the tooltip goes entirely below the footer. For e.g.
The click button highlighted in blue should give "add new record":
The image below shows the "add new record going below the footer instead of being displayed near to the button itself
Error image:
The CSS code goes something like this:
.tooltip {
position: absolute;
z-index: 1070;
display: inline;
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: .875rem;
word-wrap: break-word;
opacity: 0;
pointer-events: none
}
.tooltip.show {
opacity: .9
}
.tooltip .arrow {
position: absolute;
display: inline;
width: .8rem;
height: .4rem
}
.tooltip .arrow::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid
}
The html looks something this
<div class="tooltip fade bs-tooltip-bottom" role="tooltip" id="tooltip785907">
<div class="arrow">
</div>
<div class="tooltip-inner">Add a new record
</div>
</div>
Any guidance would be much appreciated
On which relative positioned element is the tooltip absolute positioned? I think that is the problem.
Can you show more of your HTML and CSS?
Related
Hi to all out there familiar with materialize.
I would like to make the divider:
<div class="divider"></div>
Look similar to this:
It is basically the divier with text in the middle.
Does anyone have a solution? If not with material divier even with other html and css would be fine
Thanks
I am a fan of wrapping the text with a div with a fixed height. Then position: relative the text inside the div. See the snippet below.
.wrapper {
background-color: black;
height: 1px;
margin: 32px 0 0;
text-align: center;
}
span {
position: relative;
top: -8px;
padding: 0 15px;
font-weight: 500;
border-radius: 4px;
text-transform: uppercase;
font-size: 1em;
color: #000000;
background: #ffffff;
}
<div class="wrapper">
<span>OR</span>
</div>
I was asked my Boss to create this button on our web page
I can create the button add color and text to it but i cannot include that icon present in the button. I shared the problem with my boss then he gave me this link https://gourmet.epark.jp/detail/EG00541264 and told me to look the button in it and do in the same way.
I tried inspecting elements and other ways but still cannot make this.
I don't have much experience of working with CSS so need help.
Thanks in advance.
Edit - I tried this but cannot add that small icon in front of button text
<button style="background-color:#e24f01;color:#fff;border-radius:2px;line-height:30px;font-size:14px;font-weight:700;width:150px">WEB予約</button>
So basically you need to do something like below (copied from the given link):
.shop-navi-app {
font-size: 14px;
font-weight: 700;
width: 200px;
text-align: center;
}
.btn {
background-color: #e24f01;
color: #fff;
border-radius: 2px;
line-height: 30px;
}
.shop-navi-app>a {
padding: 0;
line-height: 35px;
}
.btn>a, .main-search-area-body .search-box .btn-search>a {
color: #fff;
display: block;
line-height: 1;
padding: .3em .8em;
}
a {
color: #2f0a0a;
text-decoration: none;
}
.shop-navi-app .icon {
display: inline-block;
vertical-align: middle;
font-size: 15px;
margin: -1px 10px 0 0;
}
.icon {
font-family: epg-pc!important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.shop-navi-app .icon-caption {
display: inline-block;
vertical-align: middle;
}
.icon-reserve2::after {
content: url(https://image.ibb.co/esaspT/if_Leaf.png);
}
<div class="shop-navi-app btn">
<a href="/reserve/EG00541264">
<i class="icon icon-reserve2"></i>
<span class="icon-caption">WEB予約</span>
</a>
</div>
Explnation:
<div class="shop-navi-app btn">//for button class
<a href="/reserve/EG00541264">//for link to other page
<i class="icon icon-reserve2"></i>// for icon
<span class="icon-caption">WEB予約</span>// for text
</a>
</div>
In the code, you have div for whole button. Then you have a tag inside div which contains link to redirect when you click on button. a tag contains icon in i tag and span tag for text.
Having difficulties with vertical align of inline element with overflow: hidden and differrent line height. Basically this is problem:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
.mybutton {
display: inline-block;
position: relative;
line-height: 36px;
vertical-align: middle;
text-align: center;
padding: 0;
border: 0;
background: transparent;
}
span {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;
text-decoration: underline;
}
.mybutton span {
vertical-align: middle;
display: inline-block;
min-width: 4px;
text-align: left;
line-height: 20px;
}
.overflow-ellipsis {
overflow: hidden;
width: 100px;
display: inline-block;
}
</style>
<ul>
<li style="height: 36px">
<span>
<button class="mybutton">
<span class="overflow-ellipsis">11111111111111111111111111111</span>
</button>
<span>111</span>
</span>
<span>111</span>
</li>
</ul>
And concrete problems are:
This markup is well aligned in Chrome, however in IE 11 first element is a bit lower than second one.
Changing Font to Arial will make it bad aligned in Chrome also.
Any idea how to fix this is welcome.
Note: different line height, overflow: hidden and display: inline-block (on button and contained span) is a MUST
Adding a negative margin on .overflow-ellipsis solves the problem:
.overflow-ellipsis {
overflow: hidden;
width: 100px;
display: inline-block;
margin-top: -2px;
}
Preview it here: JSFiddle
I'm building a single page of text that's a tight fit onto a sheet of paper. For some unknown reason, Edge renders everything larger.
I'm using border-box, null margins and padding. I've tried CSS reset but the result is the same.
In the attached example, the H1 element is 57.03x25px in Chrome, 64.7x25.35px in Edge. H2 is 57.031x16px in Chrome, 64.7x16.09px in Edge.
I assume Chrome is right since I've specifically set a font size of 25px and 16px respectively.
All these small sub-pixel errors creep up until I get quite a significant difference after a page of text. Width increase does not bother me so much, but I assume it to be related.
I can't find any other option or margin to reset, so I assume that Edge/IE somehow adds undocumented white space.
Edit: Firefox also renders larger, 27px text height for a font of 25px.
https://jsfiddle.net/m74b0s09/
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
/*font: 12pt "Tahoma";*/
font: 10.66px "Tahoma"; /* IE/Edge does not render as Chrome with pt units, seems to ignore sub-pixel sizes */
z-index: 0;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.section {
margin-top: 0;
z-index: 0;
}
.section h1 {
border-bottom: 1px solid;
margin-top: 8px;
margin-bottom: 3px;
}
h1 {
margin: 0;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
}
h2 {
margin: 0;
font-size: 10pt;
}
h3 {
margin: 0;
font-size: 9pt;
}
body {
font: 10.66px "Tahoma";
background-color: #fff;
}
a {
text-decoration: none;
}
.header {
margin-top: 0;
}
.header h1 {
border: none;
text-transform: none;
font-variant: small-caps;
font-size: 21px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
.header .name {
display: inline-block;
}
.header .contact {
float: right;
text-align: right;
display: inline-block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-variant: small-caps;
}
</style>
<body>
<div class="section header">
<div class="name">
<h1>Lorem</h1>
<h2>Ipsum</h2>
</div>
<div class="contact">
<h3>
H3 text
</h3>
<h3>more H3</h3>
<h3>even more H3</h3>
</div>
</div>
</body>
Try using CSS Normalize which is a pack of CSS rules to make the main browsers render all elements more consistently and in line with modern standards.
I have been 75% successful by looking at this post: How Do I Make a CSS Button Clickable
But still if the cursor comes in on the left the button is not clickable.
HTML
<span class="buy">Buy Tickets Now</span>
CSS
.buy {
float: left;
position: relative;
display: block;
width: 200px;
height: 27px;
text-align: center;
margin-left: -70px;
margin-top: 30px;
font-family: Calibri,Helvetica, sans serif;
font-size: 22px;
font-weight: 700;
color: #ffffff;
background-color: #39b54a;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 15px;
}
.buy:hover {
background-color: #8dc63f;
}
Could someone help with what I got wrong?
http://christianfordlive.com
The problem is generated by the div mainImage and the left margin. The div mainPage is in front of your button, that's why you can't click on it.
You have two easy options to fix the bug:
1 - Remove the margin-left of your button
margin-left: 0px;
If you do it, the div mainImage will stop overlapping your span.
You can also modify the z-index of your button to force it to go to the front of the mainImage div. For example, just add it to your .buy class:
z-index: 1000;
Both options should fix your problem
First of all, your code is kind of a mess, and you are overruling properties inside the same rule. All you need is:
html:
<a class="buy" href="http://www.christianfordlive.com/buy-tickets/">Buy Tickets Now</a>
css:
.buy {
float: left;
position: relative;
font-family: Calibri,Helvetica, sans serif;
font-size: 22px;
font-weight: 700;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 15px;
background-color: #39b54a;
padding: 15px 40px;
margin-top: 30px;
z-index: 100;
}