I place dgrid table into widget, but grid overlapped my toolbar. How to fix broken layout?
Here current layout for my custom widget:
<div data-dojo-type="desktop/users/UsersWidget">
<div data-dojo-type="dijit/layout/LayoutContainer">
<div data-dojo-type="dijit/Toolbar" data-dojo-props="region: 'top'">
<!-- Here buttons, separators, etc -->
</div>
<div data-dojo-type="desktop/grids/UsersGrid" data-dojo-props="region: 'center'"></div>
</div>
</div>
Also, CSS:
html, body, .layout-container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
index.html
<body class="Claro">
<div data-dojo-type="dijit/layout/LayoutContainer" class="layout-container" id="layoutContainer">
<div data-dojo-type="desktop/menus/MainMenu" data-dojo-props="region: 'top'"></div>
</div>
</body>
My widget initialized when user select one of main menu items and added as child of layoutContainer widget.
Related
I am creating a landpaging and I am facing some style difficulties due to lack of practice.
I want to modify the backgroud of the navbar, so I wanted to make the background transparent so that the bottom of the page appears. How can I do this?
enter image description here
<template>
<div class="Shellhub-LP-1280">
<div class="textura Nuvem">
<b-navbar>
<template slot="brand">
<b-navbar-item tag="router-link" :to="{ path: '/' }" transparent="true">
<img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
>
<!-- <img src="#/static/logo-inverted.png"> -->
</b-navbar-item>
</template>
...
</b-navbar>
</div>
</div>
</template>
<style>
.Shellhub-LP-1280 {
/* width: 100%; */
height: 2283px;
background-color: #333640;
}
.textura {
/* width: 100%; */
height: 771px;
}
.Nuvem {
width: 100%;
height: 755px;
object-fit: contain;
opacity: 0.9;
float: right;
background: url('../static/nuvem.png');
background-repeat: no-repeat;
background-position: right;
}
Thanks
buefy navbar API:
https://buefy.org/documentation/navbar/#api-view
Passing this props:
<b-navbar :fixed-top="true" :transparent="true" >
Vue docs - components props (recommend to read):
https://v2.vuejs.org/v2/guide/components-props.html
transparent "bug":
Open github issue:
BUG: navbar is-transparent not working .
IMPORTANT: transparent affect navbar items (Not the navbar wrapper himself).
Remove any hover or active background from the navbar items
So add simple CSS styling:
nav.navbar.is-fixed-top {
background: transparent;
}
body top padding issue
I won't find a way to remove body top padding. I added this style:
body{
padding-top: 0px!important;
}
Basic example:
const app = new Vue()
app.$mount('#app')
img.responsive_img{
width: 100%;
height: auto;
}
body{
padding-top: 0px!important;
}
/* change navbar background color */
nav.navbar.is-fixed-top {
background: transparent;
}
<link href="https://unpkg.com/buefy/dist/buefy.min.css" rel="stylesheet"/>
<div id="app">
<b-navbar class="is-link" :fixed-top="true" :transparent="true">
<template slot="brand">
<b-navbar-item tag="router-link" :to="{ path: '/' }">
<img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
>
</b-navbar-item>
</template>
<template slot="start">
<b-navbar-item href="#">
Home
</b-navbar-item>
<b-navbar-item href="#">
Documentation
</b-navbar-item>
<b-navbar-dropdown label="Info">
<b-navbar-item href="#">
About
</b-navbar-item>
<b-navbar-item href="#">
Contact
</b-navbar-item>
</b-navbar-dropdown>
</template>
<template slot="end">
<b-navbar-item tag="div">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</b-navbar-item>
</template>
</b-navbar>
<header style="min-height: 200vh;">
<img class="responsive_img" src="https://picsum.photos/2000/600"/>
</header>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
Change navbar background color on scroll
only by custom code
See this codepen (I added a class on scroll):
https://codepen.io/ezra_siton/pen/jOPZgmR
Change the background color on scroll her:
nav.navbar.is-fixed-top.isActive{
transition: background-color 0.5s ease;
background: red; /* change color on scroll */
}
Change navbar links color to white (For dark hero) - add "is-link" modifier:
https://bulma.io/documentation/components/navbar/#colors
<b-navbar class="is-link" :fixed-top="true" :transparent="true" >
Remove hover/active
:transparent="true"
Remove any hover or active background from the navbar items.
I am using Materialize CSS and I'm trying to center a div. I'm trying to get the white boxes to center on mobile and desktop to the center of the page. All the white boxes are in the same div called root.
index.html
<body>
<div class="container">
<div id="mainContent" class="row">
<div id="root" class="col s12 xl l6"></div>
</div>
</div>
</body>
styles.css
#mainContent {
background-color: blue;
margin: auto;
display: block;
}
#root {
margin: 0 auto;
position: relative;
}
On mobile, it centers the white boxes correctly.
On desktop the boxes are on the left side.
If I add margin-left to .root{} then it's not centered on the mobile version.
I think the best way is to use grid offsets on the columns:
<body>
<div class="container">
<div id="mainContent" class="row">
<div class="col s12 l6 offset-l3"></div>
</div>
</div>
</body>
Adding the class offset-l3 will add an offset of 3 columns on the left for screen sizes l and xl. With 12 total columns and the content being 6 columns an offset of 3 will result in the content being centered.
The style.css can be updated to only set the background-color:
#mainContent {
background-color: blue;
}
I added a wrapper to index.html like so
<div id="mainContent" class="row">
<div class="valign-wrapper">
<div id="root" class="col s12 xl l6"></div>
</div>
</div>
Now the white boxes are centered in the middle on both smaller resoultion displays and bigger.
I have added a jumbotron to my webpage, my page is now displaying the bottom and right scroll bar! Not sure how to resolve this.
Any tip's or pointers much appreciated.
url http://tyrescanner.net/contact-us
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1><span style="color: #ffffff;">Welcome to Tyrescanner</span></h1>
<p></p>
<h2>Contact us.</h2>
</div>
</div>
</div>
</div>
what are you asking for? I assume you just don't want bottom scrollbar ,is that right?
If so, below is your CSS for HTML . change that as below it's in your bootstrap.css file and line number 1071
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow: auto;
overflow-x: hidden;
}
Your jumbotron is wrapped with divs row and col-md-12:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
Delete them and leave only jumbotron.
or remove paddings from your css:
.container-fluid {
width: 100%;
padding-top: 0px;
/* padding-left: 0px; */
/* padding-right: 0px; */
padding-bottom: 0px;
}
It overwrites bootstrap css and cause problem with page width.
After viewing your site I see some issues:
You're using a container-fluid and a nested container-fluid as the jumbotron parent element, the nested one is redundant.
Then I see you've overridden container-fluid and .col--12 classes default bootstrap left/right padding to 0px but you didn't change the default margin of the .row class to have 0px left/right margin hence your bottom scroll bar.
For the footer, remove the margin-top and make the footer a direct child of the body element then add the following css to the form, body and html elements: height:100%;, the rest is margins that you added to the elements.
I would like to have a Twitch player with chat on my site. I need it to be responsive. I am working with Bootstrap.
I have this code
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-1 nopadding">
<div id="player">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" style="border: 0px; top:0px;" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="col-md-2 nopadding">
<div id="chat">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="chat" src="https://www.twitch.tv/example/chat?popout=" style="border: 0px;"></iframe>
</div>
</div>
</div>
<div class="col-md-offset-1"></div>
</div>
CSS:
.nopadding {
padding: 0 !important; }
I am using this CSS to remove the padding from grid, I need to have player and chat next to each other, without padding.
The problem is that the chat is to small, exactly the height is too small. I can set the height in css, but this height won't change with the player's height. How can I fix that?
You can do this by setting the chat wrapper to absolute and then setting the iframe inside of it to have a width and height of 100% and position the chat-wrapper to left of 50% and give the row that it is all wrapped in a class and a position of relatve. Then at smaller screens you can position the chat wrapper to relative and left of 0 so that it will stack below the player when you get to mobile widths. Here is the markup I used. Also in the example I use col-sm but you can change it to col-md I just used sm because its easier to view in the fiddle demo.
Here is a fiddle demo drag the output screen larger and smaller to see the results at different screen sizes Fiddle Demo
Html:
<div class="container-fluid">
<div class="row player-section">
<div class="col-sm-6 no-padding">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" allowfullscreen></iframe>
</div>
</div>
<div class="chat-wrapper">
<iframe class="chat" src="https://www.twitch.tv/example/chat?popout="></iframe>
</div>
</div>
</div>
Css:
.no-padding{
padding:0;
}
iframe{
border:none;
}
.player-section{
position:relative;
}
.chat-wrapper{
position:absolute;
left:50%;top:0;right:0;bottom:0;
}
.chat-wrapper iframe{
width:100%;
height:100%;
}
#media screen and (max-width:767px){
.chat-wrapper{position:relative;height:300px;left:0;}
}
Another option is to create you own custom aspect ratios, as described in this blog.
If for example you want to show a pdf (A4 size) in your webpage, you can add the following to your style sheet:
.embed-responsive-210by297 {
padding-bottom: 141.42%;
}
Now you can add your custom stylesheet to your iframe:
<div class="embed-responsive embed-responsive-210by297">
<iframe src="..."></iframe>
</div>
By customising the aspect ratio of the different iframes, you can align the heights of all iframes to match mutually. Another advantage is that you follow the bootstrap philosophy.
I'm a beginner for web front-end design, using bootstrap to make a project prototype.
I want to do a product like this website
The features I want is
* expand carousel to full screen when visiting the website and then can scroll down to another div element.
I found this similar solution, but unfortunately it uses Carousel as the whole background.
To get the effect I want, I check the javascript src code and edit it.
modify this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
into this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'relative', 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
Yep, finally get the effect I want!! However, when the photo transition, a unexpected flicker appear, seems the photo is not at right location at first, then go to its right place immediately.
It's annoying when I see the content inside div below, like 1info or 2info.
here is the jsfiddle demo example for the issue.
I tried to use the solution like set z-index, but fail...
Can someone help me to solve this annoying problem? Thanks a lot!!
Here's a flicker-free version without any plugins:
HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div id="slide1" class="fill">
<div class=" carousel-caption">
<h1>1</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide2" class="fill">
<div class=" carousel-caption" >
<h1>2</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide3" class="fill">
<div class=" carousel-caption" >
<h1>3</h1>
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.carousel, .item, .active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
#slide1 {
background-image: url('http://stylonica.com/wp-content/uploads/2014/03/Cute-Dog-Wallpaper.jpg');
}
#slide2 {
background-image: url('http://hdwallimg.com/wp-content/uploads/2014/02/White-Dog-Running-Wallpaper-HD.jpg');
}
#slide3 {
background-image: url('http://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg');
}
No additional javascript required, just make sure that the jquery and bootstrap.js files are linked in your page.