I have a form where all of the elements use the CSS flex property to handle mobile devices. The flex direction is "row" by default, but I have one element on the page that needs to be forced to "column".
I can manually change, the flex-direction in FF developer tools and it works fine (see image below). However, when I try to modify my CSS file to make the same change, it doesn't take effect.
I tried the CSS below, but it didn't work.
#field_2_14 #content .page .gform_wrapper ul li {
flex-direction:column;
}
What am I doing wrong with my CSS file?
flex-direction requires display:flex.
Note that you can see a hint by pressing the i icon in the inspector
Related
When I create Web Components the default size is 0x0, despite containing elements.
For example here my element is 0x0:
But when I hover over the button contained within then you can see the button does have a width and height:
So my question is how can I make the custom element the same size as the child element?
Why does this happen?
I suspect it is due to the shador DOM and <slot>, but surly there must be a trick to give the custom element the correct height?
Many thanks
By default, custom elements aren't blocks. You need to explicitly set display: block; property in CSS, like this:
juel-menu {
display: block;
}
I created an example on StackBlitz... The fault was mine, the <slot> is inside an absolutely positioned <div> inside the shadow root... Silly me!
I've noticed there is a small amount of padding on one of my containers that i would like to remove entirely however the code i am implementing doesn't seem to be working.
CSS:
.elementor-container elementor-coloumn-gap-default {
padding-top: 0;
}
I think i may have the name of the element wrong. My website is www.monoalarms.co.uk/wp and i am trying to remove the padding from the container that contains that 5 buttons. it is directly under the header image.
You are looking padding in wrong container,
please try next css -
.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated { padding-bottom: 0; }
Seems your padding goes from banner
their could be many other css styles overriding yours. Remember CSS tries to take the last styling, so make sure yours is loaded last. You might need a more specific tag i.e 'body .elementor-container elementor-coloumn-gap-default', right click element and inspect in chrome, at the bottom of the browser you'll see the exact CSS tag it uses.
I have a double scroll bar on my website in Chrome and Firefox (both browsers are up to date). I have been researching the web and stackoverflow and have tried following suggested options on the html element:
html { overflow: hidden; } - afterwards -
html { overflow: auto; } - and - html { overflow: scroll; }
None of them got rid of the double bar, even worse some blocked me from scrolling at all.
I'm not sure which other element to target or what might be causing this. Does anyone have a suggestion?
The website is https://www.lekkerlimburgs.be
I had the same problem with one of my wordpress websites. I added the following CSS which fixed the problem for me :
body{
width:100%;
overflow-x:hidden;
overflow-y:hidden;
}
It seems like you are trying to add the css from within the html tag. For this you will need to add style tags within the body of the html. If this is the case use the following code:
<style>
body{
width:100%;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
Hope this helped :)
You have overflow:auto on your HTML element, which will add a scrollbar if the element exceeds the screen size on some browsers.
MDN:
auto
Depends on the user agent. If the content fits inside, looks identical to overflow: visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.
Alternatively, if you cant locate the source of the bug as explained by Gant, you can Use Browser developer tools to isolate the offending tag. What i do is
Inspect the malformed page elements using your browser developer tools
Hover on suspicious elements and Delete them while keeping an eye on the inner scrollbar. if it disappears then the element you've just deleted is the offender undo deletion (Ctrl+Z) and inspect it. Otherwise if the scrollbar persist even after deleting the element, then the element you just removed isn't the offender. therefore, undo deletion and move to another element
if the offending element is huge/broad perform step 2 on its sub elements and iterate till offending sub element is found. then check the css associated with the sub element causing the issue for overflow:auto
This approach may be better if you have tons of stylesheets and dont know how to go about it
*Adapted from Chris Coyier Fixing Unintended Body Overflow
I want to change the order of sidebar elements using a user style sheet (no access to change html or scripts).
I'm using Stylish CSS to add display: flex; to the container div and order: to the children to be moved and in FF it works perfectly but in Chrome the same CSS formats very differently.
I have reduced the problem to a single line
If I apply the style .sidebar { display:flex; flex-direction: column; } to website http://www.tripadvisor.co.uk/ShowForum-g1-i12105-TripAdvisor_Support.html I get the results I expect and want with Firefox (31.0):
but with Chrome (36.0) the formatting is totally different:
Why are the two browsers handling the same page so differently?
What needs to be done to get Chrome to format the same as Chrome?
Adding an explicit height: makes some difference in Chrome but each child div is still truncated and since I don't know the number or size of the child elements it is not a practical solution
I found that one of the classes specified on the Sidebar child elements had for some, non obvious, reason a height:100%; property that FF appears to ignore for both flexbox and normal column formatting but which Chrome was using when the formatting the column for flexbox.
Changing to height:auto; for both the container and child elements seems to have resolved my problems and I am able to reorder the children as needed
I have a div which has the css overflow property set to auto. But the overflow property doesn't seem to work and instead of showing a scrollbar within the div, the content of div flows outside div.
What am I missing here?
<div id="divPrvChatBox">
</div>
#divPrvChatBox
{
width:330px;
height:200px;
background-color:Yellow;
overflow:auto;
}
overflow:scroll;
This is what you need to explicitly tell the browser to use scroll-bars. When you use auto you are telling the browser that it can decide for itself, often giving some WTF results.
Set overflow to scroll:
#divPrvChatBox
{
width:330px;
height:200px;
background-color:Yellow;
overflow: scroll;
}
Example here.
I believe that (for whatever reason) your overflow CSS style is not being applied. Perhaps you have a syntax error in your CSS. Perhaps your setting is being overridden. As noted in my comment above and shown in this simple test case using overflow:auto does prevent content from drawing outside the borders of the container, and also causes scrollbars to appear as needed.
Use the Developer Tools for your browser (F12 for IE, right-click and Inspect Element for Chrome or Safari, install Firebug for Firefox) to inspect the actual styles applied to the element in question. You will either see that your rule is not being applied, of the property is not part of your rule, or the rule is being overridden by a more specific selector.