Is it possible with Angular flex-layout apply responsive api on wrappers not on whole screen?
If I have code:
<div class="main-wrapper" fxLayout.sm="column" fxLayout.gt-sm="row" >
<div>div1</div>
<div>div2</div>
</div>
Flex direction will change only when whole screen is smaller. Is there any way how to change flex dirrection when main-wrapper is small, not the screen?
If not with flex layout, is it possible to do it with css?
There's no way to do what you would like to do. The best that you can do is set your custom breakpoint as said in the official GitHub project here.
Related
I'm using Tailwind CSS to design my website and I keep running into an issue while creating my layout: the page is always wider and taller than the size of the screen. If you've ever had this happen before, you know how annoying it is.
I think this is because I added a navbar with fixed positioning and h-content. In any case, my main wrapper div is supposed to wrap the entire page, fit the screen without creating any scrollbars, and have m-8 margins on all sides, while still fitting the screen.
I'm finding that the height properties (h-full, h-content, h-screen) and width properties (w-full, w-content, w-screen) can be confusing at times. Especially when I start adding other divs to the page to create "sections" with specified heights and widths.
Does anyone have a good tutorial or article on how these properties work? I must not be understanding them properly.
I'm using React and Next.js. On the homepage, I am returning something like this:
<div className="w-screen h-screen">
{/* This nav is applied to all pages through the pages/.app */}
<Navbar className="w-full h-content" />
<div className="flex w-full h-full m-8">
<section className="w-1/2" />
<section className="w/1/2" />
</div>
</div>
Any resources to help me understand how to build layouts using Tailwind would help tremendously.
You need to add this in global css file (probably styles/global.css) before you can use w-full and h-full as they depend on container element's width and height.
In case of a page the container is most probably a div being used to render react. And that div depends on body, which depends on html tag.
html, body, #ID_OF_THE_CONTAINER_DIV_IN_WHICH_REACT_IS_BEING_RENDERED {
width:100%;
height:100%;
}
Also checkout https://nextjs.org/learn/basics/assets-metadata-css/global-styles
The video below really explains in detail how to create this kind of layout:
https://www.youtube.com/watch?v=XQ1m4r3BqaY&ab_channel=WebBlocksApp
And this is the example I created. pay attention to the CSS tab. there are extra styles needed for this to work properly. Also notice I added extra height on purpose, but if you remove the class the content will still wrap the whole available space.
Here is a challenge for bootstrap wizards: how to have my layout swap between .container and .container-fluid depending on the screen size. I.e. on mobile I want fluid, else use the regular container.
<!-- pseudo class definition to exemplify -->
<div class="container-fluid-xs-only container-sm-and-up">
<div class="row">
...
</div>
</div>
Disclaimer: the workaround I'm doing right now is tweaking the margins using media query. I.e. using .container and adding negative margins on mobile. Wondering if there is a better way of achieving this.
Requirements: Ideally I want a purely css-based solution, if really not possible, please consider that I'm using angular 1.x.
PS: I do not want to duplicate whats inside "row", in other words, I'm not interested in doing .visible-xs and .hidden-xs with duplicated content...
Thanks!
The only difference between the container and container-fluid is width so the child elements (rows, cols, etc..) will behave the same in either.
The container becomes full-width (100%) on xs screens by default, so at screen widths less than 768px, the container and container-fluid behave exactly the same. You shouldn't need to make any changes, and you can simply use container.
http://codeply.com/go/8ei2hMKBKd
I just started to use angular ui-layout to allow splitting panes in a UI.
I'm trying to create a sidebar that has this blue element on the bottom
Is there a way to trick the ui-layout directive to achieve this? I tried doing size, but that just does absolute sizing, I want the bluebox just take up some space (showing 100% of its content) and the element above it needs to scroll and take up the rest of the vertical space.
EDIT: added the HTML
<ui-layout options="{ flow: 'row' }">
<div ui-layout-container> top part </div>
<div ui-layout-container> blue box</div>
</ui-layout>
I don't know why you want to use ui.layout, but I would not recommend to use it to achieve what you want.
ui.layout uses flex box model and you can use it by yourself without using another invasive javascript layout. You can fully achieve what you want using css only.
This is what I did to achieve what you want only using CSS. http://plnkr.co/edit/0mSxkNC5wl6WTbWc81z6?p=preview.
<div class="container flex flex-column">
<div class="top flex flex-row flex-auto flex-stretch">
<div class="flex-auto">Top</div>
<div class="sidebar">sidebar</div>
</div>
<div style="background:blue">Bottom</div>
</div>
If you are very interested in using Flex layout, I would recommend to use Angular Material Design, and it is advanced and makes more sense than ui.layout.
To know more about flex box, you can see this example.
http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview.
I have created a grid of images using Bootstrap 3's .thumbnail class. Everything seems to be working great with regards to the images resizing, and the columns changing depending on the window size. The only problem is the images are all different sizes, and both portrait/landscape orientation. This causes awkward breaks and "pile-ups" with the thumbnail divs…
I was hoping to find a way to create a grid of SQUARE responsive divs using the .thumbnail class. So in other words, the width determined by Bootstrap would be mirrored in the div's height. E.g. the thumbnail image is scaled to 220px so the height of the div containing it would be set to 220px as well (and the thumbnail image inside scales up to 100% of eight the height or width, depending on orientation). Sort of like this:
Here is the basic code I'm using:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
<img src="<?php echo $image->url() ?>">
</div>
</div>
</div>
Thanks so much for any help you might be able to offer. I'm also open to suggestions for other approaches. I even tried using jquery Isotope's masonry setting to solve the pile up problem but couldn't get it to work :(
You could try a CSS only approach like this this..
http://bootply.com/85737
However, this is not cross-browser compatible so you still may want to use the Isotope plugin. Here is a working example that uses Isotope + Bootstrap..
http://bootply.com/61482
I have created a small plugin for bootstrap, called bootstrap-grid-h. You can try using it. It is css only solution. You can find it here: bootstrap-grid-h
For something like this I would recommend using masonry which will give you a pinterest effect where images will fit in a block style without breaks.
such as: http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
I am looking at different CSS modularising methodologies and trying to implement some of their ideas into a new project. Some I am looking at are SMACSS, BEM and MVCSS.
I understand that in SMACSS layout rules should be in my _layout.sass file which is fine so my styles are as follows:
.container
+container
+margin-leader
+margin-trailer
+container sets this element as a grid container from Compass Susy and then adds top and bottom margin.
I now want to add a border radius and box shadow to this element.
Where do I place these styles as they don't fit within the layout stylesheet?
2nd issue is:
I have created a media block which basically allows an image to be floated left and some text to be floated right. It has a flipped variation that flips the two around.
I need to be able to specify the width of the image but where does this go? I have for now placed it as part of the media block module code but surely that means that ALL images inside future media blocks will be that width. It seems like the width of the image needs to be elsewhere but I am just not sure where. I know I could add classes to the image in the markup like "small", "large" etc but to be that sounds like adding presentational stuff to the markup which I thought was what were were trying to get away from.
3rd issue:
I have created a title-box module that is marked up as follows:
<div class="title-box">
<h3 class="title-box__header">Upcoming Events</h3>
<div class="title-box__content">
</div>
</div>
I want 3 of these boxes side by side. I know how to do it but unsure of the correct modular way to do this. Any thoughts?
1) According to BEM methodology you can use mixes to solve your first issue:
<div class="container widget"></div>
This means that there are 2 different blocks on the same DOM-node: container (knows about layout) and widget (styles the block with border radius and shadow).
2) You can add class to these images making them elements of media block and then specify types of images with modifiers:
<div class="media-block">
<img class="media-block__image"/>
<div class="media-block__description">Some text</div>
</div>
<div class="media-block media-block_float_left">
<img class="media-block__image media-block__image_type_important"/>
<div class="media-block__description">Some text</div>
</div>
So image elements of media block which are important can be styled with bigger size.
Also you can use modifiers to set float direction.
3) I'm not sure if I got your question right but I think you have two options:
Style title-box itself (e.g. as float with some margins).
Add styles to title-box in it's parent file with cascade if it's possible to use title-box somewhere outside with different layout.