If you enable position:relative for the right one, you will see that it overflows the left one:
http://jsfiddle.net/bfwhoem5/1/
why?
How to solve that (while maintaining position:relative too). Also, I want when mouseover with INSPECT, the right one should not be overflowed over left.
p.s. I dont wish calc, because it is not yet well supported...
Here is one solution:
#left {
position:relative;
float:left; width:180px; background:#ff0000;
}
#right {
position:relative;
width: calc(100% - 180px); background:#00FF00;float:left;
}
<div>
<div id="left">
leftttt
</div>
<div id="right">
rightttt
</div>
</div>
Your issue is with one div having a float and the other not - also if you are going to put two items side by side you cannot have one with a width of 100%, either they will go on top of each other or go to the next line depending on their position relative to each other.
Related
I'm using the wonderful vue-scrollto along with bootstrap. It's working great and lands perfectly when viewed on the desktop. On mobile however, the heading is off the top. I know from previous experience with dynamic scrolling that padding the header is the way to go, which works on one section in my site but not on another.
I thought perhaps it was because I'm loading content dynamically and adding content to the dom, but doesn't seem to be the issue since other, static sections have the same issue. It does seem to be when a content section is taller than the viewport. I was originally targeting the id of the container for the section but changed it to the id of the heading with no change.
If I add offset it can help but inconsistently - works on the about section but the locations section is still way off. I figured it would just scroll the top of the container i'm targeting to the top of the page, but that doesn't seem to be what's happening.
Example link:
<li class="nav-item">
<a class="nav-link nav-btn" href="#" v-scroll-to="'#title-about'" data-toggle="collapse">About</a>
</li>
In my app.js:
Vue.use(VueScrollTo, {
container: "body",
offset: -100
})
You can see it in action here: lovelaundry
It seems as though any section that is taller than the viewport doesn't land right - like it positions in the vertical center rather than scrolling to place the top of the targeted element at the top of the viewport, which would be ideal.
I figured out a solution - not very elegant and I doubt it's the best, but it does work and gives me pretty precise control. I created a root method like so:
scrollTo(target, offset1 = -100, offset2 = -450) {
//viewport break is 991, offset1 is when greater then 991 for larger viewports, offset2 for smaller
console.log('1: ' + offset1 + ' | ' + '2: ' + offset2);
if (window.innerWidth > 991) {
this.os = offset1;
} else {
this.os = offset2;
}
console.log(this.os);
var options = {
container: 'body',
offset: this.os
}
var cancelScroll = VueScrollTo.scrollTo(target, 500, options);
},
Then I either call this directly from HTML through my laravel blade template:
<a class="nav-link nav-btn" href="#" v-on:click="scrollTo('#title-about', -100, -250)" data-toggle="collapse">About</a>
Or emit it up to the parent from a component:
changeLocation(location) {
this.$eventHub.$emit('location-loaded', location);
this.$eventHub.$emit('scroll-to', '#title-locations', -100, -450);
},
In the template:
<a v-for="loc in locations" v-on:click="changeLocation(loc)" class="dropdown-item nav-btn" v-bind:class="{ active: loc.id == location.id }">{{ loc.name }}</a>
I still don't quite get how it's working - I have to use different offset values to make it land in the right place if I'm linking from the top of the page or the bottom.
A more elegant solution would be to make the <b-navbar> fixed to top and offset your content div:
<b-navbar class="fixed-navbar"> ... </b-navbar>
.fixed-navbar {
top: 0;
position: fixed;
width: 100%;
}
To make your navbar not to overlap your content add margin to nuxt element
<Nuxt style="margin-top: 56px" />
Also don't forget to add offset for your vue-scrollTo in your config
['vue-scrollto/nuxt', { offset: -56 }]
I have tried a lot to keep a span valign middle. At the moment it looks like:
But I want that:
Here you can play around: Link
.wrapper{
display:table-row;
}
.image-left{
width:50px;
height:50px;
background-color:grey;
}
.text-block{
display:table-cell;
vertical-align:middle;
}
<div class="wrapper">
<div class="image-left">
</div>
<div class="text-block">
<span>One does not simply css.</span>
</div>
</div>
Whenever I need to align text, I tend to use display: table-cell with vertical-align:middle on the parent element of the span or the div where the text is inside.
But there are literally tons of ways to achieve this. I suggest you google a bit and see which one fits best in your situation. I just prefer table-cells since they auto adjust to all content in the row, and look clean.
Detailed info: http://phrogz.net/css/vertical-align/
Your link didnt work btw.
Ok, this will probably be simple to resolve, but I am a graphic designer & not a developer so wondering if someone can help me out. I have played around with positions but not such luck.
So I have a header div with a backgroud image within it, but when I preview the html/css on ebay the background image within this div appears at the top of the browser (conflicting with the ebay standard header) & not being positioned relative to the container div it is placed in. So basically the bg image is outside the div. I need it to be contained with the div I want it in.
Any help would be appreciated. (This may be a repetitive topic, so sorry about that)
Code:
<div id="HeaderContainer">
<div id="BGHeader"></div>
</div>
#HeaderContainer{
position:relative;
}
#BGHeader {
position:absolute;
top:0;
height:420px;
width:100%;
background-image:url(imagehere.jpg);
background-repeat:repeat-x;
}
You should post your html and css. At least the relevant parts. But having not seen them I would say my best guess is you're using absolute positioning on the header.
You need to wrap that in another element that's relative positioned.
<div id="container">
<header>header here</header>
</div>
where your css is like so:
#container{
position:relative;
}
header{
position:absolute;
top:0;
left:0;
}
If I'm wrong about your needs or situation let me know and I can update.
I have a templated custom widget that inherits from dijit.layout._LayoutWidget, dijit._Container, and dijit._Templated which gives my widget native Widget support for resizing, etc. All I need is a TabContainer, which is sized to the size of widget. Here is my widget.
<div dojoAttachPoint="containerNode">
<div dojoType="dijit.layout.TabContainer" tabPosition="top" style="width:100%;height:100%" >
<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">
hello
</div>
</div>
</div>
Everything looks fine but I get a weird TabList.
I looked into the problem. All the pieces of the widget and TabContainer have the correct width and height values. Only The tablist has a loooong width (50'000 something pixels wide): I have read about similar issues such as this one: http://bugs.dojotoolkit.org/ticket/10495, but in my case all the elements have correct width and length. I have no idea how does tablist get this long width.
I have also tried many ways of adding and removing style="width:100%;height:100;" for the parent container and its parents. But none of the configurations fixed the problem.
Is there a way to fix this problem?
Just in case someone is looking for the solution, I had the same problem, and came to this question. Though I looked at the bug reports, it didn't apply in my case, I was not embedding tabcontainer inside table or setting doLayout to false. I tried setting tabcontroller but that didn't work either. Finally after debuggin, turns out you have to provide 'resize' method in your widget and resize tabcontainer inside it in the following way
widgetTemplate = '... ' + //Our tabcontainer declaration
'<div dojoAttachPoint="containerNode">' +
'<div dojoAttachPoint="widgetTab" dojoType="dijit.layout.TabContainer"' + 'style="width:100%;height:100%" >' +
'<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">hello</div></div></div>' +
'...' //Rest Of template declaration
//Since we are embedding widget inside template we need _WidgetsInTemplateMixin
dojo.declare("MyWidget", [dijit._Widget, dijit._TemplatedMixin,dijit._WidgetsInTemplateMixin], {
templateString: widgetTemplate,
.... //Rest of functions
resize: function(){
this.containerNode.widgetTab.resize() //Resize tabcontainer
}
});
Hope this helps
Try to add attribute to your TabContainer:
<div dojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController" ... >
http://bugs.dojotoolkit.org/ticket/10113#comment:11
Just rewrite your css like this:
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 30px !important;
}
#-moz-document url-prefix() {
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 31px !important;
}
}
If you want to remove the first one : "useMenu : false"
If you want to remove the second and the third : "useSlider : false"
I am trying to show a component,
<div dojoType="dojox.layout.TableContainer" cols="2" labelWidth="50%" colspan=2 id="durationPane" style="display: none;margin-left: 9px;" showLabels=false>
<div dojoType="dijit.form.DateTextBox" required="true" onChange="var x=arguments[0];x.setDate(x.getDate()+1);dijit.byId('toDate').constraints.min = x;" constraints="{datePattern:'MMM dd yyyy'}" label=" From Date :" id="fromDate" placeHolder="From Date" style="margin-bottom: 50px"></div>
<div dojoType="dijit.form.DateTextBox" require="true" onChange="var x=arguments[0];x.setDate(x.getDate()-1);dijit.byId('fromDate').constraints.max =x;" constraints="{datePattern:'MMM dd yyyy'}" label="To Date :" id="toDate" placeHolder="To Date" name="vpnReport._toDate" ></div>
</div>
dijit.byId('durationPane').show();
But it's not showing.
This is a recurring problem with some Dojo "animation" effects such as show, hide, wipeIn, wipeOut, etc. For some reason, if you want page elements to start hidden, so you can show them latter, you cannot initialize them with "display: none" or "visibility: hidden" in the CSS.
Three different workarounds (all of which imply you do not have "display:none" set in the "durationPane" style):
Add the following CSS to the duration pane: position: absolute; left: -999em; then, when you call .show(), also set style to left:0 - you only need to this the first time you call show, because on the next .hide() / .show(), everything works well. This is probably the worst solution because you have to make your element absolute, which can be messy.
Start with the element visible, and then hide it onload, e.g.
dojo.ready(function() { dijit.byId('durationPane').hide(); });
Start with the element visible, and the add the display:none also onload, e.g.
dojo.style('durationPane', { 'display' : 'none' });
This will do what you want. If anyone out there knows why Dojo has this strange behavior, and if there is a more elegant way to fix this problem, please let us know...