I have two buttons.
They have exactly the same classes.
But one is inexplicably wider than the other.
All other buttons on the page render full width like the "Declaim" button. There's nothing to the right of these buttons. I have tried refreshing my browser cache and Laravel's view cache. The classes you see are from Tailwind and Bulma and haven't been touched by me other than:
.button:active {
position:relative;
top:2px;
}
What could be happening here?
Update:
In response to Phix and Saqib, yes, it did have a grandparent with flex but I
Deleted all custom css in app.scss
Created a demo component with nothing but a container with a div of class "buttons"
Rendered it alone directly inside main
And incredibly I still have the same problem. Without the div of class "buttons", the buttons are the same size. But I can't work out why "buttons" would be doing this.
Update 2
This is what happens when I set a fixed width:
Someone probably knows exactly what is wrong looking at that? I unfortunately don't.
I was told not to mark my own question as solved so I am writing the solution I found here.
The problem was mixing Tailwind and Bulma. The solution was using is-fullwidth instead of w-full. Bulma applied a margin that checked for is-fullwidth but obviously had no idea about w-full.
Modifying the "buttons" or "button" classes wasn't working but I know now that I needed to use .buttons:not(:last-child) {}. However, switching to is-fullwidth makes much more sense.
If both buttons have same padding, it might just be the length of the text of the button. "Declaim" is longer than "Claim".
Try adding a fixed width and box-sizing: border-box; to include the padding in the width.
Also the default position of a is inline-block. Try making setting it to block.
Related
I'm implementing a userscript (in Tampermonkey) for a website I frequently use, and I'm trying to add a div to the page. All's well if I add the div to the top of the page (to the root element):
But as soon as I add it inside a Bootstrap column, I get some annoying extra padding as seen below:
I've tried fiddling with the styling through the Chrome Developer Tools and the only way I could get the padding to disappear was by deleting all the elements occurring before in the column and also setting the ":before" element in the parent row to "display:inline". I think I'm probably misunderstanding how Bootstrap works and there's probably an easy fix, but I've been experimenting for a while and searching online and I haven't found anyone with a similar issue. Does anyone have any idea what might be causing the padding issue, and how I might fix it?
Edit: the Bootstrap version seems to be 3.3.2 (I can't update it as this is a userscript) and the HTML, once inserted, looks like the following (the "project-dropdown" element is the one I have inserted):
The CSS applied to the "project-dropdown" element looks like this:
The project-dropdown element has a parent class col-x-x that introduced left and right padding. On top of that, said column is placed in a row class, introducing top and bottom padding.
Because of the nature of CSS itself, those properties will be “inherited” by children elemen too. To remove all padding, override the default value at the parent col and row classes.
Cheers!
I want to create a button/link that is centered in the content area of a webpage. Because it's a button, and not just a link, I'm adding some padding and background colour to it.
The link is centered horizontally, but the padding seems to expand outside the line-height of the parent element, causing it to overlap with previous/next elements. See: http://fths.convoke.info/what-can-i-do/
I tried creating a fiddle, but wasn't seeing the same issue: http://jsfiddle.net/convoke/g9wu6ws9/
So what am I missing? Conversely, is there a better way to center a link like this? I don't like using margin: auto because it requires you specify the width. Ideally the width would be dynamic, so if the text on the button was longer or shorter, it would remain centered.
In this case, the answer I needed came from user #CBroe in the comments of my original question. He suggested using display:inline-block and that worked like a charm.
Still unsure as to why I was getting different results on the fiddle vs the actual website...
I use some DIV to create blocks with data inside.
I've set them to "inline-block" because I want the div to adjust his width to the content.
IE8 adjust his width to my content but I have a weird problem.
If you go to this fiddle : http://jsfiddle.net/GvMW8/ and click to the first or second link, you can see that divs are overlapping.
If you go to this fiddle : http://jsfiddle.net/hhpRP/1/ and do the same operation, it works!
The only difference between these two fiddles are the 'id' attribute of the main divs.
I don't understand why I have this problem, but can you tell me how to make it works with the inline-block display AND a div id?
Thanks for your help!
Looks like a little IE8 bug.
Check out http://jsfiddle.net/willemvb/fjqUc/
I added an extra class for the div around bigBlock and made it display: inline-block.
I also shortened your javascript.
This seemed enough to make IE8 listen :)
I use example 3 given in this page:
http://simple-navigation-demo.andischacke.com/
and I have a problem because when I open the main page (for example)
http://simple-navigation-demo.andischacke.com/
I get an empty div on the left instead of the content div filling the whole area.
On the other hand when I open a page from the menu (for example)
http://simple-navigation-demo.andischacke.com/books
Everything is just fine.
Can someone propose a solution? How can I completely remove the div in CSS if it does not contain anything?
There are lots of solutions; it depends on where you want your logic to be. A pure CSS solution might be tricky; it might be easier to do this sort of thing in JS.
That said, try changing #sub_navigation's width property to be a max-width instead. This way, it can still be set to float:left, but when there's no ul element inside it, it can collapse.
You might need to modify the width of your content div after that, but hopefully this gets you on the right track.
I have been trying for 2 hours to get my footer to stay at the bottom.
I have been trying "Matthew James Taylors" technique, but no luck.
Anyone see what I am missing or doing wrong?
Here is a Live Example : http://glustik.com/essex/index.html
Any help would be GREAT!
I would attached the CSS Code with the { } but it always breaks for me.
I feel like the CSS to fix this will still be problematic, I would be tempted to rewrite the whole thing: HTML markup and CSS, otherwise I suspect there will be more trouble down the road.
Here are some things that are most likely giving you trouble:
Duplicate id values (as mentioned)
Unnecessary absolute positioning
Hard-coded height values on several divs
Unnecessary use of "clearfix" divs
Overuse of negative margins to compensate for padding on other elements (always problematic)
Minor but relevant: use of classes like floatRight, just as bad as using inline styles.
I think in general, instead of trying to control the positioning and height of everything - just let the normal content flow dictate it. Naturally, the last element in your markup (footer) should be on the bottom without all these over-thought restrictions.
Best of luck!
EDIT: Apparently I've come off as unhelpful, so I felt I should add a direct response: For a quick fix, to simply get the footer on the bottom:
Remove the height and bottom padding from #mainBody
(tested in FF4 and IE8). There will still be some padding issues within the footer, but that can be resolved in a number of ways depending on how you'd like to approach it. Once again, good luck with your project.
You have the footer positioned absolutely in #container, which is positioned relatively. therefore, its being positioned at the bottom of #container.
try moving it out of #container, or remove the relative positioning from #container
Because all of the content inside your main container (#mainBody) is floated, the container's only way to determine it's height is via the "height" property, which is set to 100px;. The footer is correctly rendering right below the 100 pixel height of the main container.
You have three options:
you can either properly clear your main container so that its height is dynamic based on its content using a clearfix like this
or you can set the height of the main container to something larger. I changed it to 700px and the footer rendered well below the main body.
or you can remove the height altogether, which will probably be the best solution in the long-run. Thanks to #Gaby aka G. Petrioli for pointing this out.
I've been doing this a long time and have never heard of this method. That doesn't make it bad, but the currently accepted version in my circles comes from Ryan Fait (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)
If you load this up in Chrome and disable the position:relative from the container it does properly glue the footer to the bottom of the page. That signals a problem to me, because it's contrary to what the tutorial says. Regardless, it accomplishes your goal.
You should take at least a look at Compass. It makes CSS so much easier. For your particular question, take a look at:
http://compass-style.org/reference/compass/layout/sticky_footer/
Make the following changes and it rendered fine in Chrome for me:
remove bottom:0; from #footer
change padding-bottom:167px; in #mainBody to the desired location (I used 455px and it looked pretty good)