In my project, I have a button in the body of my div. When I resize the window, the button mysteriously disappears. I have searched for other solutions, however none have worked for me.
Here is my code:
.section-1 {
width: 100%;
height: 100vh;
position: relative;
background: url("https://udodjfjfjfoeoeo.com.dekffrfr") no-repeat center center/cover;
}
.main-signup-btn {
background-color: transparent;
position: relative;
border: 1px solid white;
height: 60px;
width: 245px;
padding-bottom: 1px;
font-weight: bolder;
border-radius: 3px;
color: white;
font-weight: bolder;
top: 253px;
left: -680px;
}
<div class="section-1">
<div class="overlay-1"></div>
<button class="main-signup-btn">Sign up now, uue</button>
</div>
Anybody know the issue? Thank you.
In your css .main-signup-btn you absolutely positioned the button to -680px which sends the button offscreen. remove the - and use only 680px and your button will appear somewhere near the center or a little to the right depending on your screen width. you can completely remove the left: -680px; completely and see i positioned normal at the beginning of the div / screen. You can try this
.main-signup-btn {
background-color: transparent;
position: relative;
border: 1px solid white;
height: 60px;
width: 245px;
padding-bottom: 1px;
font-weight: bolder;
border-radius: 3px;
color: white;
font-weight: bolder;
top: 253px;
/* left: -680px; */ /* This line is sending the button offscreen to the left, change the value or remove completely */
}
Trying to figure out a problem with a styled select box. It is wrapped within a div with a background to create a mask-look to it.
When there is too much text in the input it will overflow into the button.
HTML:
<div class="styled-select">
<select class="form-control required" name="address" disabled>
<option style="" value="">Please Select Address</option>
</select>
</div>
CSS:
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 15px;
font-size: 16px;
line-height: 1;
border: 0;
height: 50px;
border-radius: 10px;
-webkit-appearance: none;
padding-right: 10%;
}
.styled-select {
width: 100%;
overflow: hidden;
background: url(../images/bg/down-arrow.jpg) no-repeat right #FFF;
background-size: 60px;
height: 50px;
border-radius: 10px;
}
#media (min-width: 768px) {
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 18px;
font-size: 18px;
line-height: 1;
border: 0;
height: 55px;
border-radius: 10px;
-webkit-appearance: none;
padding-right: 10%;
}
.styled-select {
width: 100%;
overflow: hidden;
background: url(../images/bg/down-arrow.jpg) no-repeat right #FFF;
background-size: 60px;
height: 55px;
border-radius: 10px;
}
Can anyone solve this?
The problem is, that you are using padding-right: 10%; in your css on the select itself. Measuring the image - the select is approx 270px wide, making 10% of the width only 27px - which is correct by my measures.
To solve this - the background-image for arrow seems to be 60px wide, so use padding-right: 78px; (that is 60px for the background image's width and 18px to respect the padding in mobile media query you've previously set).
See this Fiddle
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 15px;
font-size: 16px;
line-height: 1;
border: 0;
height: 50px;
border: 1px solid #0082ff; /* Just to see the area of the form in white bg */
border-radius: 10px;
-webkit-appearance: none;
padding-right: 55px;
box-sizing: border-box;
}
.styled-select {
width: 200px;
overflow: hidden;
background: url(http://emojipop.net/data/images/emoji_set_651.png) no-repeat right #FFF;
background-size: 50px;
height: 50px;
border-radius: 10px;
text-overflow: ellipsis;
}
#media (min-width: 768px) {
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 18px;
font-size: 18px;
line-height: 1;
border: 0;
height: 55px;
border-radius: 10px;
-webkit-appearance: none;
padding-right: 10%;
}
.styled-select {
width: 100%;
overflow: hidden;
background: url(http://emojipop.net/data/images/emoji_set_651.png) no-repeat right #FFF;
background-size: 60px;
height: 55px;
border-radius: 10px;
}
<div class="styled-select">
<select class="form-control required" name="address">
<option style="" value="">Please Select Address</option>
<option style="" value="">Please Select Address2</option>
<option style="" value="">Please Select Address3</option>
</select>
</div>
without seeing any of your code, it is a bit hard to tell how you're setting up the HTML to be structured. But one thing you could do is fudge it. Make it appear as if thats what is happening. Assuming your dropdown arrow is a separate element from your select item you could give it some of the following code. (.select button is the class i gave to your button on the dropdown)
.selectButton {
display: block;
position: absolute;
height: 100%;
width: 20%;
max-width: 40px;
background: blue;
z-index: 12;
right: 0;
top: 0;
box-shadow: -24px 0px 30px rgba(255, 255, 255, 1);
}
basically what this does is put it in front of the input text element and then the box shadow does the trick of gradually covering up the additional text.
If you need to fudge it without altering the original element, create a parent wrapper with a div or something within the it and have the select element be a sibling then give it a style of pointer-events: none; in order to prevent it from being clicked on but will still have the appearance that you want.
Some people may say this is bad practice, but given the situation this is about the best thing you can do. very easy, very light and more functional than many of the options provided.
Holler if you have any questions!
Good Luck buddy!
after comment
try this css per info from comment. It'd be best to create a psuedo element with a background color, bg image and a box shadow on it with a z-index that is higher than the select to create a fake button that will still be make the select clickable.
.styled-select {
/*have this create the size of the select*/
width: 100%;
overflow: hidden;
background-repeat: no-repeat;
-webkit-background-size: 80% 80%;
background-size: 80% 80%;
height: 50px;
position: relative;
}
.style-select::before {
content: '';
display: block;
position: absolute;
right: 0;
background-color: $blue;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 100%;
background: url(../images/bg/down-arrow.jpg);
/* ^^^^ use this as just the white arrow png ^^^ */
box-shadow: -24px 0px 30px rgba(255, 255, 255, 1);
pointer-events: none;
}
Hello there:
This is my solution, you shall take in a variable, which will be the BG-size of the 'down-arrow'. In this case 60px, so here is it:
.styled-select select{
width: calc( 100% - 60px / 2); //before was width: 100%;
text-overflow: ellipsis;
}
#media (min-width: 768px) {
.styled-select select {
width:100%; //remove it, only one in the mobile first declarationis needed
}
}
Keep all the other CSS same, only changed the above mention ones. HOPE THIS HELPS
You are using a percentage value (10%) for the padding-right of the select element in 2 different places. However, for the background-size property of the .styled-select element you are using a fixed pixel value (60px).
This means that when the .styled-select element is exactly 600px wide, the text of the child select element will be clipped at the point the background-image begins - any bigger and you will start to see white space appear between the text and image, any smaller and the text will start to overlap the image.
So, to solve this, you should change the padding-right to a fixed pixel value equal to the background-size value plus a few extra pixels so the text doesn't run right up to the background-image.
I've also taken the liberty of cleaning up your CSS a bit; you don't need to redeclare all styles within a media query, only those you wish to override or change.
.styled-select{
background:#fff linear-gradient(0deg,#00f,#00f) right / 60px repeat-y;
/** DELETE LINE ABOVE AND UNCOMMENT LINE BELOW **/
/* background:#fff url(../images/bg/down-arrow.jpg) right center / 60px no-repeat;*/
border-radius:10px;
height:50px;
overflow:hidden;
width:100%;
}
.styled-select select{
-webkit-appearance:none;
background:transparent;
border:0;
border-radius:10px;
font-family:Circular,Helvetica,Arial,sans-serif;
font-size:16px;
height:50px;
line-height:1;
padding:15px 75px 15px 15px;
width:100%;
}
#media (min-width:768px){
.styled-select{
height:55px;
}
.styled-select select{
font-size:18px;
height:55px;
line-height:1;
padding-right:78px;
}
}
body{
background:#003;
}
<div class="styled-select">
<select class="form-control required" name="address" disabled>
<option value="">Please Select Address</option>
</select>
</div>
Try this:
.styled-select select {
white-space: nowrap;
width: 10em;
overflow: hidden;
text-overflow: ellipsis;
}
I have been experiencing trouble centering a number within a circular shaped div. The coding I have used has worked for all other elements but for some reason, one number just won't center like the rest.
I have tried to narrow the problem down and the only thing I have found is that the font size seems to be the problem. In smaller font sizes, the number centers fine, larger sizes, the number sits to the left.
Is this a bug or something someone else has experienced?
HTML:
<div class="circle">
<div>4.</div>
</div>
CSS:
#how-can-we-help-section-two .info-box-four .circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
margin: 0 auto;
margin-bottom:-50px;
position:relative;
border: 7px solid #ebeced;
}
#how-can-we-help-section-two .info-box-four .circle div{
font-size: 35px;
font-weight:bold;
color: #fff;
line-height: 90px;
}
Problem is padding: 80px 40px 40px 40px; of .text-box.
You can solve your problem by position:absolute;.
#how-can-we-help-section-two .info-box-four .circle div {
font-size: 35px;
font-weight: bold;
color: #fff;
line-height: 90px;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
Its because of your surrounding wrappers behaviour.
You could use an absolute positioned div or you could replace line-height: 90px with width: 100%; height: 100%; display: inline-block; on your text div inside .circle
I was trying to create a circle with i icon in it for with CSS. However, when page is first rendered the circle looks like an inverted egg and covers the border around it slightly. (Zoom in the browser to see issue in more details)
The tricky part is, if you open Dev Tools and change any value related to it's position(width, height, whatever), everything will snap back to normal and it will become a circle.
https://jsfiddle.net/2yjashje/
<div class="round-egg">
i
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 10px;
cursor: help;
border-bottom: none !important;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
}
What is going on here?
I put the letter "i" in its own span and increased the margin from top to vertically centre it. As for the circle, I modified the border-radius property, and then removed the border-bottom: none; property as well. Assuming you want a circle, you need the bottom border.
https://jsfiddle.net/2yjashje/3/
<div class="round-egg">
<span class="icon">i</span>
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 30px;
cursor: help;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
display: table-cell;
}
.icon {
display: block;
margin-top: 2px;
}
I am just getting back into coding and I would like to know what is the best method for adding heigh to my btn.
Here is the code -
Padding method
.nav-main li a {
display: block;
padding: 70px 10px 70px 10px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
Line-height method
.nav-main li a {
display: block;
padding: 0 10px 0 10px;
line-height: 150px;
color: #6CF784;
border-bottom: 10px solid white;
text-decoration: none;
}
I like to use line-height because it positions the baseline correctly to make the text appear in the middle of the element (whereas with padding it may be off-centre one way or the other based on the font)
Of course, this relies on you using a pixel value for line-height (as you are doing in your question) - using a numeric value like 1.5 may produce different results depending on the font.
I personally use padding as it gives me more control across browsers, as line height can vary on which font you are using, along with what fonts are installed/not installed on the clients' browser.
.link {
text-decoration: none;
color: aqua;
border: 2px solid aqua;
margin: 30px auto;
display: block;
width: 160px;
height: 40px;
line-height: 35px;
text-align: center;
position: relative;
overflow: hidden;
}
.link::before {
content: attr(data-text);
position: absolute;
width: 100%;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 0.5s;
}
You will show the difference between the padding and line height
when you use pseudo element (before and aftere) =>
with line height the pseudo element take the same height of his parent
with padding the pseudo element do not take the height of his parent