I enlarged the font/spacing tag in the body element on my site. It revealed a hard coded height that seems completely unnecessary in the 33.750 em media query in the light theme (didn't check besocial).
[code index.css]
.pagelinks {
height: 30px;
/* Necessary for some browsers to keep the pages all on the same line */
min-width: 100%;
}
It caused overlapping buttons on that size mobile screens after I changed the font size. Removing it caused no harm that I saw. Could use padding instead if you just want some additional height.
Here's another one in index.css for the 33.375em media query.
[code index.css line 4201]
dd input, dd select, dd textarea {
width: 90% !important;
max-width: 90% !important;
}
The dd select shouldn't be there. That doesn't make the select 90% of the width of the container it makes it 90% of the width of its contents. So it's basically saying please be sure to chop off my contents even if there's plenty of room to display them.
I have no idea what the proper way to say I want the select box to size to it's container.
On the default color scheme it's fairly well disguised, but when you click the go up/down buttons it draws a rectangular box around the buttons which looks odd given the rounded shape you've given them. I turned it off using #gotop:focus, #gobottom:focus {outline: none;}
It might be a good thing to add to index.css
For the select I'd try something like that:
.styled-select {
width: 90% !important;
max-width: 90% !important;
}
.styled-select dd select {
width: 100% !important;
max-width: 100% !important;
}added after the declaration you posted above.
Can't check the up/down problem at the moment... maybe round the "clicked" outline too?
Why is that declaring !important? That should hardly ever be used anywhere, if at all.
I know some people think you have to declare it on everything in the CSS file (I really have see it taken to ridiculous extremes sometimes) but it should not be required. Let's face it: this is just presentation. It's only effing important if the person using, or customising, the interface thinks it's important.
This block is in a @media (one of the smallest) I made it that way in order to "force" the settings to stay on two lines: one with the label/description and one with the "box" (check, text, select, whatever). And that last one forced to be 90% wide and aligned to the right.
Have a look for example at the account settings page:
http://www.elkarte.net/community/index.php?action=profile;area=account
at less than... 400px I think.
Yes but there should be no need to use !important. Just declare the width as you normally would. Putting !important everywhere is just bloat.
Is not *everywhere*, it's just there (two attributed for two declarations).
TBH I did it quite a bit of time ago, and I don't remember the details, but I seem to remember that the problem was that the alternatives were use "important" or put tens of different selectors in order to match all the possible variants of cases all around the globe. I went for what I considered more readable.
But feel free to change it. ;D
The two lines above still need some work. They give you a select just smaller than your styled select button so when you touch it nothing happens. This setup works in chrome's emulator. (Nothing nearby to test on a real device.)
dd input, dd textarea {
width: 90% !important;
max-width: 90% !important;
}
.styled-select {
width: 90% !important;
max-width: 90% !important;
}
dd select {
width: 100% !important;
max-width: 100% !important;
}
I'll let you two handle the !important stuff.
I take it back. Works fine on the post page, but makes the general forum pages awful as the goto select extends beyond the width to everything else.
Stupid me, it was:
.styled-select {
width: 90% !important;
max-width: 90% !important;
}
.styled-select select {
width: 100% !important;
max-width: 100% !important;
}
The latest change still has the same problem. Causes the jump to select to expand past the width of the page.
Strange it worked for me with chrome... :-\
And FF as well.
Yes it works to expand the select, but the select on the "jump to" at the bottom of say a board topic display page no longer respects the page width and extends too far. I have some long section names, but without the new markup the select is fine. With it the select and follow on go button stick way out.
Here' a picture of the problem.
Okay, that's pretty odd: I understand why it should happen, and the fix should simply be:
dd .styled-select {
width: 90% !important;
max-width: 90% !important;
}
dd .styled-select select {
width: 100% !important;
max-width: 100% !important;
}Though the odd thing is that I can't reproduce it... :-\
Well that's picture was produced from a slightly older pull from the master. I don't think anything has changed that should make it vanish though.
Ooops, sorry I didn't see the picture (it was in page 2 and I answered from page 1... :-[).
I was referring to the last post of the previous page.
Anyway, I've never seen the "jump to" like that...
Here it aligns right and if the board names are long it goes slightly out on the left.
Though I'm not sure this can be fixed with CSS alone... :-\
But of course I may be badly wrong as usual. LOL
But now another funny question: why the jump to is not there for guests? :P
/me feels this is a bug. lol
Does anyone ever use the jump to? I've never used it apart from testing, and it's always been a PITA. I've ditched it from custom SMF interfaces and never received even one complaint.
Well this isn't a custom theme, just a pull from master with your changes applied. Without the changes it looks normal. That's why I'm saying the changes break it.
And I also was surprised it was not there for guests. And I also never use it. And why is there a "Go" button after the select when changing the select actually cause the go to to happen automatically. The "Go" button is only useful to going to the page you're on.
Proposal: ditch the silly thing. Easy to do. Saves trouble. Saves code. Nobody will miss it.
Fine with me.
Ok, so everyone is agreed then. :D
Some odd things in poster area in display.
.poster has a min-width but not a width, so long names (even ones that area easily wrapped) push the poster area way out into the post itself.
And once that is fixed by adding a width to it, the names will be clipped no wrap because they're links. So I added white-space: normal and word-break: normal to them so that names would wrap.
I think there's a media query that sets a smaller min width like 10em instead of 15em. It should also probably get a width. What am I missing that it is min-width instead of width in the first place?
IIRC there was an ellipse or something on the names a while ago, if you are reporting that it was probably removed, maybe unintentionally...
Maybe
@TE remembers something? :P
There is an overflow hidden on some element that will clip names short, but only if you set a width. With just a min-width the area just expands to fill the name.
The changes other than setting a width were to make names with white space wrap rather than get cut off.
I did have to add width:auto to .poster in the first media query and white-space:nowrap to the name to keep the mobile one line poster display working after my other changes to help desktop mode.
Nope, don't remember but I'd simply hide that jump to for the related media query.
I meant the width of the username. :P
No problem, I'll try to figure out what the issue is (unless someone else beats me).
It looks like the same as:
http://www.elkarte.net/community/index.php?topic=1216.0
and this as well:
http://www.elkarte.net/community/index.php?topic=1275.0
Seriously, why keep the jump to at all? It seems like an ideal opportunity to get rid of useless code.
Re the username: it will need either break-word or ellipsis text overflow. IIRC it had one or the other originally. Will have to look at my old builds on local.
I thought i already posted working css code in this thread. Set a width, set some wrap, then basically unset them when you move it up to a single line at the top in small screen mode.
I'm talking about user names.
I still vote drop the jump thing.
https://github.com/emanuele45/Dialogo/commit/1d6b53ee8f08684f20eef1375f1ad792d8519119
Should work...I hope.