I require the following layout, with three columns, left, content & right.
The left and right content simply will have an image within them, and the left col. Image needs to stay to the left of the browser, and the right col. Image to the right side of the browser, so when the browser width is resized both the columns stay to their edge.
Where as the content/centre column needs to be a fixed with of 960px and also remain in the middle of the screen.
So on resize the browser width the content stays in the middle, but then when the browser is width is reduced both left and right columns do not go over the main content but stay either side.
I have tried multiple times but am having much success at present, any help would be appreciated.
thanks si
UPDATE:
As requested I have added a jsfiddle of what I have tried:
http://jsfiddle.net/UcmBj/
I get to 99% of what I want but the content remains centred and the right stays to the right but ideally I would like it so the content and the panels remain centered.
At the moment if scaled down the left column and part of the content is viewable but I would like the content to be viewed in the window/centred so the left column is displaced to the left off the screen. thanks hope the link helps.
Bit of details: side columns should be min width of 280 and the content section width of 960 set, thus the outer container min 1520.
Does this help you at all?
http://www.manisheriar.com/holygrail/index.htm
http://jsfiddle.net/andresilich/6vPqA/3/show/
Well having looked around, looks as if Its not possible just yet for how I wanted to do it, so what I did was have my left and right columns positioned using css to the left and right, then using css media queries added a negative margin to each so that they would move so not interrupting the main content.
Related
I have a case which want to get vaadin-grid the maximum height possible in screen.
So, this is easy.
the problem is that despite the vaadin-grid size is ok, the tbody might be shorter than vaadin-grid.
So, whenever there is not enough rows we get empty space.
it would be ok in case had no border. But, because we do use border on the grid, empty space comes up.
Sure can shift the border to thead and tbody and get it looks good, but than the opposite happen cause bottom border will get lost when tbody in longer than vaadin-grid.
Is there a clean way, non dirty js, to distinguish cases? something else?
Thanks
I think you should be able to get at least very close by using the :host([overflow~="bottom"]) state attribute selector. Add/remove the borders based on that. The overflow attribute value changes based on if rows are overflowing the from the bottom of the grid viewport.
The only issue I see is that the border will disappear when the user scrolls to the bottom of the grid.
I need a vertical slider similar the standard slider. Is there a way to modify the existing one or do I need to make a new one?
The standard slider would work for me. I just need it to work vertically.
Perhaps I should better clarify my issue with the standard slider.
Yes, I can drag the size of the slider and it will be vertical. The problem is that when you select the value of the slider to show the text gets buried in the low side of the slider when you slide it down all the way. It essentially gets cut off and only shows the top half of the slider value character. I find no way to correct this by moving the shown text up a little so it all shows. I see no way to change text vertical or offset position in the properties setting.
The text settings only allow you to change the text format to right, center and left justify. There is no setting that can move the text up to prevent it from being cut off when the slider is all the way to the lower or down position.
The value text shows ok on the top of the slider. The problem is on the bottom side when you set the slider to be vertical.
It looks like the the show value setting does not place the value on the top layer of the slider and it gets hidden behind something else in the slider object.
LC9, Windows 10
I think I'm understanding your question. If you just resize the horizontal slider control so that the width is narrower than the height, the orientation of the slider control will automatically change to vertical.
Apparently it is a bug in this version of LC. At least in Win which is where I am testing.
Putting the scrollbar vertically cuts the value when it reaches the bottom.
But I found a solution so that it does not cut. Play around with the properties of the font. Such as size and family. In my case it worked fine by lowering the font size by one pixel.
Default: Segoe UI font, size 12
I just set the size to 11 and it doesn't cut anymore.
For what it is worth, I do not see this issue on a Mac. A vertical slider works as advertised. Font size makes no difference.
Are you saying that in the horizontal mode, you do not see this, but when changed to vertical, you do?
Try creating a scrollbar and a text field.
Set the scrollbar's showValue property to false and copy the following script to your scrollbar. Note that your field must be called "scroll value".
on scrollbarDrag pNewPosition
local tLoc
lock screen
# The Current Loc of Field
put the loc of field "scroll value" into tLoc
# New Position of scrollbar
put pNewPosition into field "scroll value"
# New Loc of Field
put the mouseV into the item 2 of tLoc
set the loc of field "scroll value" to tLoc
set the left of field "scroll value" to the right of me
unlock screen
end scrollbarDrag
I have created a large schematic. It is larger than the default page size in ExpressSCH. I would like to resize the page boundaries to fit. How do you do this?
There is a rectangle around the sheet, with small squares on each corner. I need to resize this! I would guess that you click on one of the small squares, or navigate the menus to achieve this, but that does not work. There is also no web-searchable directions.
How do you resize the page / change the outer rectangles size?
Select the page tab you're trying to resize, go to "Page size" item in the "File" menu. This gives you a list of available standard sizes such as letter, tabloid, A4 sizes. Once selected, the page will be expanded/shrunk to selected size.
I have a scrolled window in my application, in which I have created a drawing area widget. In the drawing area, I have placed multiple images. When the user enters information about an image in a search box, the appropriate image gets highlighted.
My problem is how do I get the application to scroll automatically to the highlighted Image box without the user using the scroll bar. The scrolledwindow should automatically move the view region, to display the region where the highlighted Image is present.
The scrolling policy used on the scrolled window is XmAUTOMATIC.
Any pointers would be greatly appreciated.Thanks in advance.
Try XmScrollVisible() if this does not work then you will need to:
1. Find out the size of the work area.
2. Find out the size and position of the clip window.
3. Find out the max/ min values for the horizontal scrollbar.
4. Use XmScrollBarGetValues() for the horizontal scrollbar to get its position within the max/min values.
5. Do some math magic to determine how much to move the horizontal scrollbar to get the work area to show through the clip window.
6. Call XmScrollBarSetValues() with Notify = True.
7. Repeat for the Vertical scrollbar.
HTH
I would like to do the same thing with my navbar for my school website project - check this page out as reference - http://www.sketchin.ch/ when you scroll, the hole navbar changes its color.
is this canvas used? Please, I really, really need help with this! Any ideas will be greatly appreciated.
Basically, there are two different menus. The video header at the top is a higher z-index than the black menu. As you scroll down, this menu then comes into view.
Both menus are the same fixed position as each other. The white menu is inside of that first section, which has overflow set to hidden. This means that as you scroll down, the white menu is fixed and so goes out of the header section, so it becomes hidden, and the other menu appears from below the first section because it too is fixed position..