I am working on a page that someone long ago created. One of the things they didn't care about much was the finished button design for one of the buttons on this page. I'm back in this program/page, and decided I'd try to make it look better, and for the life of me I cannot fix this issue.
Here is a fiddle of the button: http://jsfiddle.net/h5CkS/
The white space, no matter what I do, will not go away. I have not been able to find a way to fill it, "paint" over it with the span/div, or anything. If I try to tweak an element to be wider, or fill up the padding, it just restacks the "New" under "Unvet".
I cannot simply fill this button with an image, because of some creative javascript that targets on the button-span-div combo formed.
So I have to somehow tackle this with the CSS. Is there anything that anyone can think of how I can be rid of that damned whitespace?
Thanks.
EDIT: Just to show how frustrating this is. I played with the Fiddle and made this:http://jsfiddle.net/h5CkS/6/ which looks perfect. But when I put that into the page code, I get this: http://i.imgur.com/PXJZi.jpg.
I have created a fork of your Fiddle - http://jsfiddle.net/GXU4w/8/ Changes are:
1) Negative margin on spans
2) border-width: 1px on button
Set the border-width property on .arrow to 9px 14px.
Set the font-size property on .arrow-button to 0.
Set the width property on .arrow-button span to 84px.
Set the font-size property on .arrow-button span to 12px or whatever seems reasonable.
Just change the width of .arrow-button span to 83px and add height: 14px;.
Related
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.
so lately I came up with this problem: My wrapper has a max-width of 1440px and I want to add a 10px solid border around it. When I add it the border just takes 10px of the max-width and is being displayed, everything's fine. But I want that the border does not take anything of the max-width, I want to display the 10px of the border by 1440px +
One solution would be media queries, I know that, and this also works fine. I am just wondering if there is a solution without adding a seperate wrapper and without media queries so the border just appears, when you resize your window over the 1440px and simply is cut off when you resize the window under 1440px.
Just for anybody who is wondering. I have a boxed layout and want to limit the content area for larger screens, but whish to use full-width on smaller screens.
Thanks! :-)
You could possibly add a position relative to the container and have a z-index set. Then have a pseudo item like :before have position absolute and a negative z-index with the height and width set to match the parent. This will put it behind your content and if you have the border added to it you should be set. Probably will need overflow-x:hidden on the body so it doesn't create a scroll bar. I'll create the code for this soon for reference.
Or a less complex option would be
outline:10px solid blue;
Outline goes outside of an element even with box-sizing of border-box.
This did it, the next thing I see is how to get a border-radius with the outline. I remember a trick with box-shadow. I will search for it, since the original question wis solved. Thank you very much! :)
See link: bit.ly/Mh9PGJ
When I make my browser window smaller, eventually 'Commercial Management' is too big for its slider box and gets shifted about. The best solution I believe is to simply increase the overall height of the entire entity (including every slider) so that the text has more space. But for this to work I'm guessing you would need some kind of min-height property there.
My problem is that I've tried min-height on practically everything there and I end up with odd-looking results, like the content expands but the green sliders do not, etc.
Any solution at all to this problem would be amazing. Thank you!
possible solution can be
adding your h2 class to those attributes
white-space: nowrap;
text-overflow:ellipsis;
it is not the correct way but at least if you dont have enough space, you can simple finish the word with ...[3 Dots]
I have this site and as you can see at the bottom the letters and the hr line overflowing the container. I tried to apply a clearfix but it's not working. I've added an overflow: hidden on container class but as I know this is not the best way to achieve that. One "dirty" solution is to add to the last element of the page margin-bottom but i want a more cleaner way. What I've done wrong?
Seems like .wrap's top: 19px is causing it. Switching that to margin-top: 19px (or even dropping it) fixes it. Just check if you need to modify some other rules to get your original design back (check the very top part of the page).
To keep the original look, use padding-top: 19px instead of it.
Given this layout:
http://jsfiddle.net/7xVAu/
The second(yellow) example is the layout im aiming for, as im happy for the grey element to completely overflow it's container, however setting width:99999px; is a 'hacky' approach.
Setting position:absolute on the grey box will also get the desired effect, however it will remove its spacing for the next element, and I cannot set a height property for this element.
Is there a neater solution?
Edit: for clarification: I want it to behave exactly like the width:99999px version, but without setting width:99999px as i feel that is a hacky approach.
I'm not sure if I understood your question exactly. But if you were looking for a different way to do the same thing, check this out: http://jsfiddle.net/7xVAu/15/.
Use %'s as in the jsfiddle and use position:relative;. As you can see, it gives the same effect, but the % depends on the size of the container, which is a bigger benefit. If you adjust the width of the yellow container, the grey one will adjust also, whilst still overflowing the yellow box :) ALSO it allows you to adjust the height with no problems at all!
Hope this helped.
Maybe something like this in which the text is floated?
style="background:#777; margin:0 9px 9px 9px; float:left; white-space:nowrap; height:40px;"
I am not sure if I understood the question though.