search box too big in main menu

[DaveP]

Hi,

After I put <<search>> in MainMenu, the resulting search box is too
wide and protrudes beyond the right margin on which the text in
MainMenu is aligned.

How do I either make MainMenu wider or the search box smaller?

Assuming both is possible, what are the advantages of one over the
other?

-Dave

[Alex Hough]

Hi Dave,

I made what I understand to be a minimal test case (MTC)  [1] that you can look at - (FND can you confirm that this *is a MTC) and include an explanation below;

Overview
-------------
To change sizes you need to edit the StyleSheet tiddler.
In your case, you can either change the width of the MainMenu or the width of the search box.
To do this you use CSS. First need to 'select' the element you want to change.

To find out which 'selector' you need, a good place to start is StyleSheetLayout in shadow tiddlers.
Here you will see the TW default settings.

Steps
--------
1) In StyleSheetLayout, find, then cut and paste the MainMenu bit into StyleSheet:

#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}

2) Then edit so that only the width remains

#mainMenu {width:10em;}

3) Then try higher values. One 'em' is one character width, like if you think five more character spaces might do the trick try:

#mainMenu {width:15em;}

Changing Search
------------------------
To change the width of the seach follow the same process, but it is slightly less obvious. The search box has a 'class' "txtOptionInput" - you will see it in StyleSheetLayout as

.txtOptionInput {width:11em;}

The dot '.' means class where as '#' means ID. When there are many items its class, when only one, its ID. This is why its '#mainMenu' - there is only one MainMenu tiddler, where as there are a few txtOptionInput or 'text inputs'

To change the width of your txtOptionInput in the MainMenu and not elsewhere (in options - where you type UserName for example) you need to use both selectors

#mainMenu .txtOptionInput {width:15em;}

But you will also then have to shift over your tiddlers. Otherwise you will get the MainMenu overlapping the tiddlers.
So, you'll have to alter the margin on the display area, the area that contains the tiddlers (look in PageTemplate to see how the order of the elements)

#displayArea {margin:2em 17em 0em 25em;}

the order of the values is top, right, bottom, left. So the 25em is the left margin, which is more than enough to hold your new wide MainMenu

Alex

[1]https://dl.getdropbox.com/u/1316865/TiddlyWiki/TiddlyWikiTestCases/MainMenuSearch.html

2009/11/3 DaveP <dave....@gmail.com>

--
http://www.multiurl.com/g/64

[FND]

> FND can you confirm that this *is a MTC

Aye.

-- F.

[Alex Hough]

2009/11/4 FND <FN...@gmx.net>

> FND can you confirm that this *is a MTC

Aye.

Would it be possible to get some kind of 'FND MTC' certification of this for my CV? ;)

Alex
 

-- F.

--
http://www.multiurl.com/g/64

[FND]

> Would it be possible to get some kind of 'FND MTC' certification of this
> for my CV? ;)

Sure:
http://groups.google.com/group/tiddlywiki/msg/1c9285a558f86055

("The future's pretty cool, boom de yada... ")

-- F.

[DaveP]

Alex,

Thanks for the thoroughly informative reply!

I went with making the search box smaller: #mainMenu .txtOptionInput
{width:9em;}

Curious that making the box 10em (supposedly the width of mainMenu,
since I didn't change it) still resulted in a slight but definite
protrusion, so I had to make it 9em.

Thanks again!
-Dave

[Alex Hough]

It's a pleasure to be able to help after receiving so much of it myself.

Alex

2009/11/6 DaveP <dave....@gmail.com>

--
http://www.multiurl.com/g/64

[FND]

> #mainMenu .txtOptionInput {width:9em;}

You might consider using .searchField instead of .txtOptionInput, just
in case there are other input fields in the MainMenu which you don't
want resized.

> Curious that making the box 10em (supposedly the width of mainMenu,
> since I didn't change it) still resulted in a slight but definite
> protrusion, so I had to make it 9em.

I can't seem to reproduce this in a vanilla TiddlyWiki document with
"#mainMenu .searchField { width: 10em; }".

Having said that, total width and height depend on a variety of factors:
http://www.w3.org/TR/CSS2/box.html
(in short, padding, border and margin add to the total size)

-- F.