Skip to main content
Topic: Minor css tweak (Read 5827 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Minor css tweak

Code: [Select]
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.

Re: Minor css tweak

Reply #1
This is @TE field! :P
Bugs creator.
Features destroyer.
Template killer.

Re: Minor css tweak

Reply #2
Code: [Select]
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.

Re: Minor css tweak

Reply #3
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

Re: Minor css tweak

Reply #4
For the select I'd try something like that:
Code: [Select]
	.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?
Bugs creator.
Features destroyer.
Template killer.

Re: Minor css tweak

Reply #5
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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Minor css tweak

Reply #6
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.
Bugs creator.
Features destroyer.
Template killer.

Re: Minor css tweak

Reply #7
Yes but there should be no need to use !important. Just declare the width as you normally would. Putting !important everywhere is just bloat.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Minor css tweak

Reply #8
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
Bugs creator.
Features destroyer.
Template killer.

Re: Minor css tweak

Reply #9
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.)

Code: [Select]
  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.

Re: Minor css tweak

Reply #10
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.

Re: Minor css tweak

Reply #11
Stupid me, it was:
Code: [Select]
	.styled-select {
width: 90% !important;
max-width: 90% !important;
}
.styled-select select {
width: 100% !important;
max-width: 100% !important;
}
Bugs creator.
Features destroyer.
Template killer.

Re: Minor css tweak

Reply #12
The latest change still has the same problem.  Causes the jump to select to expand past the width of the page.

Re: Minor css tweak

Reply #13
Strange it worked for me with chrome... :-\

And FF as well.
Bugs creator.
Features destroyer.
Template killer.

Re: Minor css tweak

Reply #14
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.