I'm working on the pydata-sphinx-theme and we are facing a css issue in our 0.13 release : the css inline code is filling the space to the right.
In short we flavored inline code using the <code> tag and for a strange reason the space to the right is filled as inline code as well. The generated html is as dollowed in the source by Shpinx (I intentionally left it as it is in the file in case it's a just a matter of indentation):
<li class="toc-h2 nav-item toc-entry"><a class="reference internal nav-link" href="#the-gallery-grid-directive">The <code class="docutils literal notranslate"><span class="pre">gallery-grid</span></code> directive</a></li>
and the shown result can be seen in the secondary sidebar of this page:
anyone could explain why the css is extending to the space placed on the right side?
note
I don't know what css would be relevant to share, I'll update the question if someone want more specific insight
Thanks for your answers, unfortunatelly the solution was hidden deeper than the html/css rendering.
For anyone dropping by:
The Sphinx framework is using prettify() from beautifulsoup to output the production website. The paradigm is to put each tag on a single line including all the inline ones, creating extra spaces everywhere.
So the real rendered HTM was:
<li class="toc-h2 nav-item toc-entry">
<a class="reference internal nav-link" href="#the-gallery-grid-directive">
The
<code class="docutils literal notranslate">
<span class="pre">
gallery-grid
</span>
</code>
directive
</a>
</li>
preventing the prettify action I got the uglier but working line I set in the question.
<li class="toc-h2 nav-item toc-entry">
<a class="reference internal nav-link" href="#the-gallery-grid-directive">The <code class="docutils literal notranslate"><span class="pre">gallery-grid</span></code> directive</a>
</li>
Here is a small codepen to see the diff between the 2 configs: https://codepen.io/12rambau/pen/NWBdKYr
Related
Facing an issue with the text editor field in Drupal 9. when I add some HTML content with some classes applied and having no content inside it's tags, all the code disapears after saving the block content.
I have tried full html and other options as well. Code example which I am trying to save in the custom blocks editor field is given below:
I want to display similar content in a particular region on a twig template, but it doesn't show at all.
<ul class="social-icons pt-3">
<li class="social-item"><a class="social-link text-light" href="#"><i class="ti-facebook" aria-hidden="true"></i></a> </li>
</ul>
I have been getting this error only in chrome browser:
element not interactable: element has zero size (Session info: chrome=84.0.4147.105)
when I try to click on <a href="/cart" class="button--counter header__mini-basket" ...></a>.
This is the snippet from my DOM:
<nav class="header__navigation">
<div class="user-section">
<ul class="user-section__list">
<li class="user-section__item user-section__item-my-account js-my-account">
My account<ul class="dropdown dropdown__my-account-desktop">
<li>
<div class="spacer"></div>
</li>
<li>
<div class="arrow-up"></div>
</li>
<li>
<a href="/my-account" role="button" class="my-account__link button button--inverse atm-nav-account" title="My account details">
My account details</a>
</li>
<li>
<a href="/logout" class="logout__link button button--inverse atm-nav-logout" role="button" title="Log out ">
Log out</a>
</li>
</ul>
</li>
<li class="user-section__item">
<a href="/wishlist" class="header__my-wishlist-link atm-nav-wishlist" title="Wishlist">
Wishlist</a>
</li>
<li class="user-section__item dropdown">
<a href="/cart" class="button--counter header__mini-basket" data-toggle="dropdown" data-close-on-bounce="false" data-toggle-status="closed" data-toggle-has-overlay="">
<span class="counter-bubble">
<span class="counter-bubble__quantity">
<span class="cart-counter-wrapper" style="display: inline;">
<span class="counter-bubble__quantity cart-counter" data-counter-type="cart-counter">1</span>
</span>
<span data-counter-type="cart-title">
My cart</span>
</span>
</span>
</a>
<div class="my-account__background-overlay js-account-background-overlay display-none"></div>
</div>
</nav>
I have tried locating the element in different ways:
li.user-section__item a.header__mini-basket
ul.user-section__list a.header__mini-basket
div.user-section a.header__mini-basket
nav.header__navigation a.header__mini-basket
but nothing helped.
This is what I have in the test:
clickOnMiniBasketIcon(){
this.cartIcon.waitForExist(TIMEOUT_5000_MS);
this.cartIcon.waitForDisplayed(TIMEOUT_5000_MS);
this.cartIcon.waitForEnabled(TIMEOUT_5000_MS);
this.cartIcon.scrollIntoView({block: "center"});
this.cartIcon.waitForClickable({timeout: TIMEOUT_3000_MS});
this.cartIcon.click();
}
I am using webdriverio 5 and cucumber.
Interesting point is that running the test against firefox is passing just fine (headless or non headless version) but in chrome (headless or non headless) I get this error.
Also I have to mention that the test resizes window to mock mobile/responsiveness with the command:
browser.setWindowSize(300, 700);
Does anybody have any idea how to resolve this for chrome? Anybody had similar issue?
Any kind of help is very much appreciated.
Thanks!
I can't comment - so this is comment-like
I suspected a Chrome bug at first, but now I think it literally means - you need to check your css - in relation to size zero.
Maybe css is not one of your hobbies (if I'm wrong, write a nice comment and I'll shut up)
Run validator
or/and css_validator will write to you if there are any problems, including spelling errors (sometimes it miss something, but very rarely)
If that doesn't help, check the page code in your browser - (tools for developers or similar) it will show you in colors and literally everything related to your css and html.
You are looking for any size zero -font-size: 0, height: 0,
... also font: normal normal 0 tahoma, sans-serif - it goes like this : font: style variant weight size line-height font-family but some of values can be omitted... It won't be easy
Probably one of this long list is to blame:
<ul class="user-section__list">
<li class="user-section__item dropdown">
<a href="/cart"
class="button--counter header__mini-basket"
data-toggle="dropdown"
data-close-on-bounce="false"
data-toggle-status="closed"
data-toggle-has-overlay="">
<span class="counter-bubble">
<span class="counter-bubble__quantity">
<span class="cart-counter-wrapper" style="display: inline;">
<span class="counter-bubble__quantity cart-counter" data-counter-type="cart-counter">1</span> //</span>
<span data-counter-type="cart-title">
My cart</span> //</span></span></a>
Hm, I was hoping you will find out due to investigation :)
In your browser right-click menu should be this tool or alt+command+i support
if you make a mess - close with x and open again will return with default look
on top you should have Elements E (html), bottom Styles S and in the corner strange picture (cubism like Picasso) P
in E click your tragic <a> and read down in S - on left is like:
a{ font-size: 0; inline on right you have link https://.../style.css:123 = address:line to file containing this ...creature,
but first you can test what exactly is blame - with little checkboxes - disable / enable - play with this sometime it works wonderfully
It emulates behaviour without this piece, you may also (hover mouse around, Opera has this under 3 vertical dots) insert Style Rule - may help (or not) to find solution...
... your code smells like bootstrap or something else what I don't use.
I don't know how you create css - if after following the above you know exactly what to change/remove/add just do it
if you don't know how - let me know... well, we will see
The concern is that CSS is hereditary
for some reason these strange properties were used - maybe by mistake, maybe on purpose
if you change class properties it will affect every element of the class wherever they are
if you remove a class name from <a>, it will lose all properties of that class
there can always be other, more complicated relationships between elements, such as .class div.class2 a.class {}
The least damaging blind solution in this case, is to remove the class name from the <a> element, and to add inline patches if necessary...
I read once again your question - webdriverio 5 and cucumber - unknown for me..
I think you should read this
I had this issue and found a ton of reasons why this can happen in Webdriver.io v4 on NodeJS:
You are trying to click on an ID where there are multiple elements with that ID.
The DOM element you are trying to click on has zero width, height, font-size, line-height, etc.
There is something covering the element to be clicked on.
It's trying to click on something different than what you think it's trying to click on.
You can cover #2 & #3 by clicking directly in the middle of the thing you expect to click on. Does it work? If you can't click on it in the UI, then webdriver.io/chromeDriver can't click on it either.
In my case, it was #1, but I was duped into thinking everything was fine because I had used JQuery (ie. $("#myId").length) & document.getElementByID("myId") and there was only a single element. They lie! They only expect one thing by that ID so they find the first one and return it. Those two methods will only show one item for a given ID even if there are 50.
To find if there's a second element with the same ID, you need to:
Press CTRL-SHIFT-I to open developer tools in Chrome
Go to the Elements tab.
Press CTRL-F to search.
Type in your expected Id (ex. "myId") and keep searching to make sure there is only one.
I am using Twitter Bootstrap for a project.
I have a widget type list-group, which is a list of elements that are used for navigation.
For some reason I can't make those links to work. Although the correct link appears when hovering, they don't take me there.
I created a fiddle to ilustrate the problem.
Can anyone help?
Regards.
When you specify http in the link it will not work in an https site.
Have a look at Bootstrap's documentation for list-group. When I put your links into a UL, things seem to work:
<ul class="list-group">
<li><a
href="http://www.google.com"
class="list-group-item active"
>External link not working</a></li>
<li><a
href="#my_local_anchor"
class="list-group-item active">
Internal link not working
</a> </li>
</ul>
I checked the internal link and it worked when yo use your anchor as an ID
<h1 id="my_local_anchor">
And the external link worked when I added:
<a href="https://www.google.com" target="_blank">
Which opens the link in a new tab which is usually better as your website will keep a presence in the users browser
Never put http protocols in the href for many reasons, one of which the protocol might be the wrong one ! (http vs https).
As for the internal link it is working properly in the JSfiddle once you actually create an element with that id.
Plus the list group should be in a LIST not a bunch of divs
I am getting H2 violation for below anchor tags.
It says 'H2: Combining adjacent image and text links for the same resource'
<div class="selected-label ccyImage">
</div>
<a href="javascript:void(0);" class="btn dropdown-html-toggle" tabindex="-1">
<span class="caret"></span>
</a>
But there is no any image used. Not getting how to resolve it.
So you have some unspecified tool which is detecting an accessibility problem which is different to the accessibility problem you actually have (or it is being really smart and noticing that you are expressing content using background images … don't do that).
There's not much you can do about the misidentification of the problem other than to report a bug to whomever makes the tool.
You can make your HTML more accessible by:
Not using links when you aren't linking somewhere. If you're using href="javascript:void(0);" then you're doing something wrong.
Link to somewhere useful and progressively enhance or
Use a button (not a link) if you can't make it work without JS
Putting content in your links (or buttons). There is no text at all there to give any clue to the user what the interactive element is going to do.
I have a page which is not formatting properly, or at least not formatting as I expect it to.
Below is a simplified version of the code.
<div ...>
<div class="db_notes">
<pre>
Some Text.
<span class="blue">Lots more text that may be one line or multiple lines and is
retrieved from a database in preformatted form and often has one or more
links within the preformatted text.</span>
Some Additional text.
<span class="blue">More text that may be one or more lines and is reformatted
and comes from a database and often contains one or more links
within the text.</span>
And more text.
</pre>
</div>
</div>
Only the font color is changed by the <span class="blue">.
The color of the text between the <span class="blue"> and the <a href...> is blue (as desired), but the color of the text between the </a> and the </span> is black (instead of blue).
Any idea as to why, after the </a> tag, the text color does not return to blue?
Thanks!
John
* UPDATE *
First, thanks to all who created examples to test the premise that the color SHOULD be blue after the </a> tag! You proved I'm not crazy! (or not completely crazy).
I made a copy of the example at JS Bin and on the copy page pasted in a major section of the page with the text color problem. To my amazement, the text after the </a> tag is blue, as it should be.
Next I looked through the CSS to find any style elements that might affect the div, span, a, or pre tags, and put them in the CSS section on JS Bin. The resulting formatting still looks correct, with the text after the </a> tag still blue.
So then I copied the entire CSS file and pasted it into the CSS section on JS Bin. That broke it. The text after the </a> tag changed to black, which was the problem I've been having with the page.
So, somewhere in this massive CSS file there is something which is affecting how this page renders. Why, I don't know. I've always been under the impression that after an in-line closing tag the formatting should return to that in effect before the opening tag, but somehow something is changing that behavior.
It is now about 2:15 AM here, so I'm going to call it a day, get some sleep, and take a fresh look at it after some rest.
John
* UPDATE *
I've gone through the entire page making sure that all tags are matched, the nesting correct (no DIV elements inside a SPAN, etc.), and it still does not format properly.
I can't spend any more time on it, so I've come up with a kludge - close the span immediately before the <a href...> and open a new <span class="blue"> immediately after the </a>, as shown below. I know it shouldn't be necessary, but if that is what it takes to make it work, so be it. So, here is the revised simplified code.
<div ...>
<div class="db_notes">
<pre>
Some Text.
<span class="blue">Lots more text that may be one line or multiple lines and is
retrieved from a database in preformatted form and often has one or more
</span>links<span class="blue"> within the preformatted text.</span>
Some Additional text.
<span class="blue">More text that may be one or more lines and is reformatted
and comes from a database and often contains one or more
</span>links<span class="blue">
within the text.</span>
And more text.
</pre>
</div>
</div>
I still would like to know why the browsers are behaving in this manner. If anyone has any thoughts as to what is happening to cause the formatting to break down after the </a> tag, I'd love to hear them.
Thanks,
John
I couldn't get into a source code file for another project (locked for editing), so while waiting I took another look at the problem page.
In looking through the page in Firebug I noticed that while the page source has exactly one <a name="top"> tag, the Firebug display shows multiple instances of that tag. Strange.
Then I looked closer and noticed that there was no </a> tag matching the <a name="top"> tag.
After replacing:
<a name="top">
with:
<a name="top"></a>
The page works correctly!!!
At some point the web site needs to be updated to replace the:
<a name="top"></a>
...and other "a name=" tags with:
<a id="top"></a>
...tags to comply with HTML 5, but with over 2,300 dynamic pages, most with from one to thirty <a name="text"> tags, it will be a long time before there will be funding for such an effort. Another reason why some tags and options need to be supported for backward compatibility.
Thanks again to all who have contributed assistance in any form!
Best wishes,
John
The color of the text between the <span class="blue"> and the <a href...> is blue (as desired), but the color of the text between them </a> and the </span> is black (instead of blue).
If I assume you are using .blue {color: blue;} this property for span then it will change the text color blue for text which is inside the span tag. The text out of <span> will be black.
Have a look at this DEMO.
in this case, I've changed the <span> color from blue to red and you see <a> tag text is still blue which is by default.
Note: only the text inside span will be in blue color that not include the text inside the<a> tag. by default giving a link to <a> tag its change to blue color.