I have this problem that took me the hole day thinking, and I can't figure out what's the matter:
I have a SELECT element, with options of different sizes,
Obviously it takes the size of the longest option by default.
But when I choose one option or another the select box changes it's size,
I don't know what would cause this behaviour since it's happening only in Firefox, and in all the SELECT elements of my app.
Is there any CSS property that would make this happen?
Have you guys any idea? Thanks in advance
You need to give your select a set width within your stylesheet. Without this, it will behave as you describe.
select{
width:200px;
}
Alternatively, if you want to allow it to keep resizing, but only up to a certain size, you can use max-width instead.
select{
max-width:200px;
}
It sounds like the lack of a CSS width is causing the box to size itself automatically. Try adding a CSS width or min-width.
I found what was the problem,
Actually as it's an oldish app, I found some reset css applying this rule:
* {
padding: 0;
}
Seems like only firefox doesn't like this, and so applying this to an element, makes this side effect.
I resolved it giving my tags a padding style to override the reset style.
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.
I am using the Google font 'Lato' and I am having problems with having title and text align properly to the left... The font (when large) appears to have a kern space on the first letter and wont align left without space!?
So here also a fiddle:
<h1>Hello</h1> <p>Hello, this is sentance</p>
FIDDLE
Also, adding a negative value on the margin-left (magin-left:-10px) just seems like a terrible workaround... and this would not work overall for different font-sizes, unless individually adjusted as needed... surly there must be a better solution?
Can anyone help?
Okay, everyone who says it's due to automatic padding or margins due to the line being a header is wrong. See this fiddle as evidence:
http://jsfiddle.net/w25j9L7o/26/
The leading space is not being rendered by the browser or the CSS or anything else at the DOM/Browser level. It is the font. The H glyph has some built-in padding around it, and the larger the font size, the more noticeable that padding will be.
Even if you use negative margins to compensate:
The character itself is shifting over, which includes the empty space, so that empty space will be sliding over as well, affecting layout. The visible character isn't sliding into the empty space, the entire character (visible and invisible) is shifting to the left if you use CSS to fix it.
You would need to adjust that offset based on the font-size or figure out the underlying percentage so that the offset grows with any font-size set.
Or you can just use a different font that doesn't have this characteristic.
PX units are not such a good choice in this case. I recommend using EM unit if you working with font attributes like line-height etc. Because it's automatically calculated for each of font-size. It should look like this:
#yourDiv::first-letter {
margin-left: -0.12em;
}
Try using first letter
h1:first-letter {
margin-left: -10px
}
http://jsfiddle.net/w25j9L7o/1/
You can get kern.js from kernjs.com and edit your front kerning, like they said on their website "click and drag to adjust your kerning, line-height, letter placement, When you're done, copy the generated CSS and use it in your own stylesheet"
The white space is there because it is a header.
You can align it to the left by doing:
margin-left: -10px;
Most Web browsers have different default settings for the base margins and padding. This means that if you don't set a margin and padding on your body and html tags, you could get inconsistent results on the page depending upon which browser you're using to view the page.
The best way to solve this is to set all the margins and paddings on the html and body tags to 0:
Add this CSS:
html,body {
font-family:Lato;
margin:0px;
padding:0px;
}
p{margin-left: 11px;}
DEMO
This problem was driving me crazy so here is an elegant solution that uses ::first-letter selector. For example I was able to fix my spacing issue by adding:
#yourDiv::first-letter {margin-left:-5px;}
Hope this works for others that were in my situation. Here is a link for more information: http://www.w3schools.com/cssref/sel_firstletter.asp
You can use Gill Sans font. It is very similar to Lato. Problem is in Lato font itself not in Css.
Here is your link for GillSans
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]
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.
How can I wrap the text displayed in the browser to either the width of the browser or a specified width, whichever is less?
I have been putting text inside <table width='850'> to wrap at a specific point, so if the user maximizes their browser on a gigantic monitor a whole paragraph doesn't fit in a single line. But when the user makes the browser super narrow, the above method causes text to carry over the edge of the viewable area. Not what I want exactly.
So, I'm looking for a better approach.
Oh, maybe I should add that my pages are extremely simple. There aren't banners up and down the left or right sides of them. Just text and images occupy the space from the left border of the browser to the right. Boring stuff.
EDIT - I accepted an answer, but I did find an issue (and a solution that seems to work) with the accepted answer when used with Internet Explorer. I spent half an hour trying to get max-width to work, but just couldn't. Every other style property worked fine though. Then I discovered this http://svendtofte.com/code/max_width_in_ie which said I had to use the following for max-width to work in IE, and it did: p { width:expression(400 + "px"); }. I don't understand why the fiddle example worked with max-width on IE, but not my page. Maybe it's cuz I include my css in my html page?
You could set the max-width property in your css.
That way, the page will expand until a certain point and then no more.
Example:
.mainDiv{
max-width:700px;
}
Working example: http://jsfiddle.net/Pa5JG/
More info on max-width: http://reference.sitepoint.com/css/max-width
Just use max-width. See this fiddle.