I want to create fixed szie page, without common scrollbar. Scrollbars have only two div's, where content content goes beyond of div (contend data and sidebar listing area) as on picture. I alreay did it without bs3, and use javascript (for calculate new offsets on page resize).
http://i.imgur.com/4kesDk7.jpg
Today I tried to create fixed size template with Bootrstrap3, but i can't do it. It's possible to do using bs3? Anybody can show how it is done?
I tried modify this code http://www.bootply.com/0FG70wcT3B. I do left and right headers.
Related
I want to reproduce Google's spreadsheet behaviour with frozen first row and first col, in htmlm with little additions. This is done inside a web browser, so it's a site, page or web app (written in React, if that even matters, cuz question is mostly about css). Lets start with layout:
Availble view space of the page is separated in 3 distinct areas:
100% width, variable height Header, attached to top
Main View, occupying space between header and footer
100% width, variable height Footer, attached to bottom
Main View is then gonna to be split into two sections:
Menu of variable width, attached to the left-side
Table view, occupying remaining width
And Table view should have following properties:
Table area is scrollable, except
First row, where table headers must remain always visible
First column, where order No # of item must be always visible
I am stucked of a good and straightforward implementation. I gave up using <table> because it has no power to implement it, so clever <div> handling most probably would do the trick.
My question is How to write css for that layout? Lets omit layout html/jsx, I think its obvious. What css structure and classes would you suggest to me for this particular task?
I am trying to achieve something, I want a main container and a sidebar at the rightside. which should deal with mobile layout as well, I was unable to find such thing or make it. The blue print is given in the image below. Thanks
BluePtint of what im trying to make
You can create this layout using div's with different ids or classes- your main body(red) could go in a div with class "#mainbody" and your sidebar(blue) would go in another div with class "#sidebar", then you can specify the dimensions in CSS.
Have you checked out a CSS framework like Bootstrap? Bootstrap makes it super easy to specify column widths with their grid system, so instead of having to state px or % width in CSS, you can add the class "col-md-3" to a column for a width of "3". Their system is based on units of 12, where 12 would be a full bar, 6 would be half etc: https://getbootstrap.com/docs/4.0/layout/grid/
I have a responsive app. layout with navbar set as fixed-top and pageWidth=fixed
<xe:this.configuration>
<xe:simpleResponsiveConfiguration fixedNavbar="fixed-top"
invertedNavbar="false" pageWidth="fixed"...>
Now I want to add something like a page header but it should be page width. See picture below. So the blue panel should be page width while its content is fixed. What control can I use for that blue panel/header. Should it be another navbar?
Since you are using Bootstrap, I would recommend you create your own custom control that adds a bootstrap row after your navbar. Set the css parameters to fix the position.
The trick here: you can add standard markup into an XPage, so you "just" try what you want to achieve in plain html pages and add the row that worked for you to the custom control.
I am trying to get a livecycle image field to be right up against the side of the page that it is on. It seems that I always have a little space between the image and the edge of the page no matter what I do.
Here is an image so you can see the problem: http://imgur.com/4WVVudi
The person should be on the edge of the page, he should be touching the bottom and right side.
Thanks!
Is the image on a master page or just within the content pages/subforms?
If the image is in the content pages check that the 'content area' in the master page is the full width and height of the page (use the information in the layout tab).
For precise positioning choose anchor bottom right and use the x and y co-ordinates in the layout tab.
cheers
Use the layout panel to check and set values for the content area width that contains your image field. Also set the width and positioning for the parent subform if you have the image in a subform.
Gantry for wordpress question :
Ive fallen in love with Gantry - wordpress theme, its really smooth and configuarable. I dont use it as a base for a blog but instead a simple webpage.
But have one problem that i cant figure out, i can configure all elements like the header, logo, navigation, etc. and splut them up in several elements.
But Content ( the pages ) will always show as one full width element in the middle, what i really would like to do is to split up the main body into 2 "tables" whereas content only shows in ex. a 400 pixel widht box, and then have a picture shown pr. page in the remaining est. 300 pixels on the right.
In the gantry settings menu i can go in and adjust "mainbody" but it just doesnt seem to work for content at all nomatter what i set it to and dont know how to be able to add an element to it as "mainbody" is not a widget you can configure.
Hope someone can help - thanks alot.
There is no way you can split main component into two positions, however you can use sidebars or you can use main-body-top and main-body-bottom positions last two can be splitted up to the 3 exact same positions ... my best advice would be that u use sidebars .. which widths and positions you can then manage in the theme settings.