I have a mobile search div on this website https://en.bentoandco.com/ that judders on load. This is what happens when clicking on the search icon https://vimeo.com/270001160 . The issue is only specific to Firefox on Android, I am not able to replicate it on the desktop version, not even if I select an Android mobile emulator.
This is my element
<img src=" //cdn.shopify.com/s/files/1/0029/8962/t/26/assets/icon-mobile-search.svg?8955747899599855085" class="js-mobile-search-open" id="mobile-search-icon" alt="Mobile search icon">
<div class="search-dropdown-mobile js-mobile-search-dropdown mobile-search-active">
<span class="icon icon-x js-mobile-search-exit" id="mobile-search-exit" aria-hidden="true"></span>
<div class="wrapper search-content">
<form class="medium-down--show input-group search-bar" action="/search" method="get" role="search">
<div class="one-whole search-grid-wrapper">
<div id="mobile-search-flex" class="one-whole">
<div class="search-input-field">
<input id="searchInputMobile" name="q" value="" placeholder="Enter Search Terms..." class="input-group-field banner js-search-query aa-input" aria-label="Enter Search Terms..." autocomplete="off" spellcheck="false" dir="auto" type="search"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: "Lato", "HelveticaNeue", "Helvetica Neue", sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 500; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: optimizelegibility; text-transform: none;"></pre>
</div>
<div class="search-input-submit">
<span class="input-group-btn banner">
<button type="submit" id="mobile-submit-button" class="btn icon-fallback-text banner js-search-submit">
<span id="mobile-submit-button-text">Search</span>
</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
and this is the CSS for it
.sticky-header.search-is-open {
height: 100vh;
text-align: center;
overflow: hidden;
margin-top: 0;
margin-right: 0;
z-index: 9990;
}
.sticky-header {
top: 0;
right: 0;
width: 100%;
.sticky-header .search-dropdown-mobile.mobile-search-active {
display: flex;
justify-content: center;
align-items: flex-start;
height: 100%;
width: 100%;
background: #ececeb;
top: 0;
-webkit-animation-duration: 0.3s;
}
Does anyone have an idea on how to fix this issue?
Thanks in advance.
I've had similar problems with elements in the past - usually due to using css transforms though. However, more often than not, using the CSS transform property transform: translate3d(0,0,0) solves the problem. Something about using hardware acceleration I guess.
Related
.ProfileSubHeadTitleLinkStyle-181 {
display: flex;
margin-top: 36px;
margin-right: 20px;
margin-bottom: 24px;
justify-content: space-between;
}
.ProfileSubHeadTitleStyle-182 {
font-size: 18px;
font-weight: 600;
margin: 0px 20px 0px 0px;
padding: 0px;
}
.ProfileEditLinkStyle-283 {
font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
font-size: inherit;
font-weight: inherit;
color: rgb(92, 27, 134);
outline: none;
text-decoration: none;
background: none transparent;
border-top: none;
border-right: none;
border-left: none;
border-image: initial;
cursor: pointer;
display: flex;
margin: 0px 10px;
overflow: inherit;
padding: 0px;
text-align: left;
text-overflow: inherit;
border-bottom: 1px solid transparent;
align-items: center;
user-select: text;
}
.profileNameColStyle-282 {
margin: 20px 0px;
display: flex;
flex-flow: row wrap;
}
.flex1-185 {
margin-right: 30px;
margin-bottom: 15px;
}
<div id="profileNameWrapper">
<div>
<div class="ProfileSubHeadTitleLinkStyle-181">
<h3 class="ProfileSubHeadTitleStyle-182">Name</h3>
<button type="button" data-testid="edit-link-test-id" class="ms-Link ProfileEditLinkStyle-283">
<i data-icon-name="Edit" aria-hidden="true" class="root-286"></i>
Edit
</button>
</div>
<div>
<div class="profileNameColStyle-282" aria-hidden="true">
<div class="flex1-185">
<div class="ProfileSubContentTitleStyle-184">First name</div>
<div class="ProfileContentStyle-179">Sarfraj</div>
</div>
<div class="flex1-185">
<div class="ProfileSubContentTitleStyle-184" data-testid="middle-name-test-id">Middle name</div>
<div class="ProfileContentStyle-179">L</div>
</div>
<div class="flex1-185">
<div class="ProfileSubContentTitleStyle-184">Last name</div>
<div class="ProfileContentStyle-179">P</div>
</div>
<div class="flex1-185">
<div class="ProfileSubContentTitleStyle-184">Preferred first name</div>
<div class="ProfileContentStyle-179">P</div>
</div>
</div>
</div>
</div>
</div>
In browse mode, nvda and jaws should read each section after reading the name and edit button, but it's reading the whole container after the edit button. It should read each section one by one.
What would be the way to do that? Also, any documentation on why in browse mode, the focus goes to some items and sometimes it goes directly to their child elements?
You didn't mention how you're navigating but I will assume you're using the up/down arrow keys to walk the DOM.
And what do you mean by "section"? You don't have a literal <section> element and you don't have anything with role="region" (which is the default role for a <section> if that section has an aria-label, which yours doesn't).
I did notice that you have aria-hidden="true" on your <div> for the lower "section" and that will completely hide all child elements in that <div>.
<div class="profileNameColStyle-282" aria-hidden="true">
I have a problem that I want to solve,the date icon when I set the alignment to the left does not move the icon tried all the ways and no benefit but work with me transform but it needs to reponsive on all screen and I must do it for all screens
.zsg-cp,
.zsg-datepicker-wrapper {
position: relative
}
.zsg-datepicker-wrapper .zsg-datepicker-link {
color: #006AFF;
font-size: 1.34em;
line-height: 1;
position: absolute;
left: 7px;
top: 5px
}
<div class="zsg-datepicker-wrapper">
<input name="dateField" type="text" value="" id="cal1DateField" min="2019-08-22" max="2020-08-22" class="zsg-datepicker">
<a id="wrapper" style="text-align:left;left:0;float:left;transform: translateX(50px);" href="" class="zsg-datepicker-link"><span class="zsg-icon-calendar"></span></a>
</div>
Try this with your own CSS classes
.input-container {
display: -ms-flexbox;
/* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: dodgerblue;
color: white;
min-width: 50px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
outline: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<form>
<div class="input-container">
<input class="input-field" type="text" placeholder="Date" name="dateField">
<i class="fa fa-calendar icon"></i>
</div>
</form>
I have an email opt in form for Mail Chimp at the top of my site and I cannot get the size of it to change. I want the subscribe button to be on the same line as the email field. Am I doing something wrong?
This is my form code:
<div id="mc_embed_signup">
<form action="//gleefulthings.us12.list-manage.com/subscribe/post?u=0277df98c0e296a094149262c&id=87ac16e6a6" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="your email address" name="EMAIL" class="email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_0277df98c0e296a094149262c_87ac16e6a6" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
And this is my CSS:
<!-- Defines how wide the opt-in will be and centers everything -->
#mc_embed_signup {
width: 880px;
margin: auto auto !important;
}
<!-- Moves the form to the left and sets the width -->
#mc_embed_signup input.email {
float: left !important;
width: 700px !important;
}
<!-- Defines the height of the div surrounding the form -->
#mc_embed_signup .mc-field-group {
min-height: 20px !important;
}
<!-- Moves the button to the right, removes the rounded corners, pushes the button up 45px -->
#mc_embed_signup input.button {
background: #bbcf14 !important;
color: #fff;
font-weight: 600;
display: inline-block !important;
border-radius: 0px !important;
float: right !important;
margin-top: -45px;
}
Here's a link to my test site: http://gleefulthings.com/WPtestblog/. Any help is much appreciated! I've been Googling and can't figure out why it's not working.
input[type="button"], input[type="reset"], input[type="submit"], .button
{
background-color: #111;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: 300;
padding: 16px 24px;
text-transform: uppercase;
width: 140px;
float: right;
height: 52px;
}
#mce-EMAIL
{
width: 89.9%;
float: left;
}
Dear Friend, I am edit your website online as my inspect element Chrome tool, it work fine.enter image description here This is screen shot of afterward applying CSS into your website.
Still you have any problem feel free to contact me.
As you can see by the image. The icon sits high. Any margin or padding I seem to try moves the text box down with it. With it positioned extra high, it also pushed the search text up. Any suggestions on how to fix?
I just want the search icon to be the same height and even with the search box and not mess with the label text.
.icon-btn {
padding: 0;
margin: 0;
display: inline-block;
height: 26px;
}
.icon-magnifier-dark:before {
background-color: white;
border: solid;
content: "\e035";
color: #color-light;
font-family: outlinedFont;
font-style: normal !important;
font-size: 20px;
line-height: 1;
box-sizing: border-box;
}
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label for="Search" style="">Search</label>
<input type="text" name="Search" id="Search" size="10" style="" />
<a class="icon-btn" href="#" style="">
<i class="icon-magnifier-dark" style=""></i>
</a>
</div>
I think some other CSS might be overriding or changing the aligning, so you should check your full CSS once. I checked your JSFiddle which you provided in comment on one of the answer, I saw the aligning was OK in the Fiddle.
change font-size
font-family: outlinedFont;
font-style: normal !important;
font-size: 15px;
line-height: 1;
box-sizing: border-box;
}
You made it so difficult. Please Check this code below...
HTML:
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label for="Search" style="">Search</label>
<input type="text" name="Search" id="Search" size="10" style="" />
<a class="icon-btn" href="#" style="">
<i class="icon-magnifier-dark" style=""></i>
</a>
</div>
Css:
.icon-btn {
display: inline-block;
width: 26px;
height: 26px;
background-color: red;
text-align: center;
padding:5px;
padding: 3px;
box-sizing: border-box;
}
.icon-magnifier-dark:before {
content: "\e035";
font-family: outlinedFont;
font-style: normal;
}
input[type="text"]{
width:150px;
height:26px;
vertical-align:top;
box-sizing: border-box;
margin-right: -5px;
}
Check the demo on jsfiddle
HI,
Any ideas why I can't highlight the text in the "blurbedit" or "headlineblack" divs?
I think I did a bit of sloppy coding to get the footer divs to line up horizontally, but that then meant that the top divs can't be selected, which isn't great when one of them is an input field!
check out this example to see what I mean: www.gherkin.co.nz/ff/textarea.html
You can select the text of the three divs at the bottom, but not the ones at the top.
I'm sure it's a very obvious thing but I'm having a hard time trying to spot it...
<div class="container">
<div class="headlinered">Homepage Blurb:</div>
<div class="home_headline_edit">
<form method="post">
<input type="hidden" name="id" value="
1">
<textarea name="blurb" cols="40" rows="10" class="box" id="blurbedit">
blurb edit content
</textarea>
<input name="update1" type="submit" class="box" id="editbutton" value="Update Article"></form>
</div>
<div class="header2cms">
<p class="headlineblack">
headline content
</p>
</div>
</div>
</div>
<div class="container">
<div class="headlinered">Footer:</div>
<div style="height:300px;">
<div class="footer">
<p class="bodyblack">
footer content
</p>
</div>
<div>
<form method="post">
<input type="hidden" name="id" value="
1">
<textarea name="footer" cols="30" rows="10" class="box" id="footeredit">
footer edit content
</textarea><br />
<input name="update2" type="submit" class="box" id="footerbutton" value="Update Article"></form>
</div>
<div class="footerhelp">
(footer help)
</div>
</div>
</div>
and here is the css:
.footerhelp{
width: 300px;
position: relative;
left: 475px;
margin-top:60px;
top: -270px;
overflow: hidden;
}
.footer {
width: 170px;
padding-top: 20px;
position:absolute;
}
#blurbedit{
font-family: Helvetica, Arial, sans-serif;
font-size:0.8em;
border: none;
background:#CCC;
color:#666;
padding:10px;
}
#footeredit{
font-family: Helvetica, Arial, sans-serif;
font-size:0.8em;
border: none;
background:#CCC;
color:#666;
padding:10px;
margin-top:20px;
margin-left:20px;
position: relative;
left: 190px;
top: 0px;
}
.headlinered {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.7em;
line-height: 140%;
color: #991200;
margin-top: 0px;
}
.headlineblack {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.7em;
line-height: 140%;
margin-top: 5px;
margin-bottom: 0px;
width:455px;
}
.home_headline_edit{
float:left;
width: 360px;
margin-right:20px;
}
.container {
width: 835px;
margin-right: auto;
margin-left: auto;
position: relative;
}
.header2cms {
width: 455px;
padding-left: 0px;
padding-bottom: 40px;
float: left;
margin-left: -50px;
}
.bodyblack {
font-family: Helvetica, Arial, sans-serif;
font-size: .7em;
line-height: 140%;
color: #000000;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
}
Would you believe that it's a combination of the float: left and position: relative settings of your .home_headline_edit and .container rules that is causing this issue?
Removing the position: relative rule seems to work while retaining the visual style of the page.
Smells like a browser bug...but I can't seem to reproduce it with a trimmed down page.
Do you use hammer.js ?
Because Hammer.js binds the "selectstart" event to various elements.
At least that's a case i've had.