Sorry for my english.
I made a web component, kind of List View, and there is a button at its right. It shows only a item, when you click it, it grows and shows all the items:
The problem is, with display: inline-block when I click in the List View, it grows and pushes down the items below.
I tried to use display: absolute and bigger z-index when I click, but obviously this happens:
The button on the right moves left below the List View. While it is what i want:
Maybe it can be done putting a fixed location with JS, but, there is a easier way to do this with css?
Edit:
The buttons are inside a div, in this example called a-div.
This is the simplified code:
<div class="a-div">
<list-view style="display: inline-block;"class="wButton">
</list-view>
<button class="arrow-button" type="button">
<img src="images/arrow-right.svg" alt="">
</button>
</div>
CSS:
.a-div{
width: 50%;
display: flex;
}
.a-div > *{
margin-right: 1rem;
}
I could use a flex-end on the arrow button, but it will look like this:
a-divand b-div both are inside of another div.
And something important, the with of the List View is dynamic.
Hope you can help me, thanks on advance!
When you apply position: absolute to your list it goes outsite the flow so the button with the arrow is placed right under it. Add a margin-left to the button equal to the width of list (plus a little bit more)
Related
Let me stress that I'm no developer/coder at all and have almost no knowledge of code (even html). Yet I'm faced with a task to build a ABtest for certain pages of our website, using Virtual Webite Optimizer and need some help.
I have an iFrame topbar containg three elements - a logo on the left, a text-string (title) in the center and a button on the right. For the purpose of the text (to create the test variation) I need to "swap" the text with the button, ie. need the button in the center and the text-string on the right. Of course, I can drag the button within the VWO wysiwyg editor, but that way, the button became absolutely-placed and it will not be centered when displayed on different resolutions/devices. So how do I do this through the code? When I display the html code for the individual elements, I get this:
NAV
<nav class="simple-top-bar"> <div class="simple-top-bar__title"> <a class="logo vwo_1489874617112" href="http://Specimen.info" title="Specimen.info"> <img alt="Specimen.info" height="36" src="http://picture.net/pictures/logos/stickybar/xyz.svg"><span class="hide-for-small-only">Specimen.info</span> </a> </div> Contact us <div class="simple-top-bar__center show-for-medium vwo_1489927071979 vwo_1489873911537">Specimen</div> </nav>
Text (which I need to be aligned right)
<div class="simple-top-bar__center show-for-medium">Specimen</div>
Button (which I need to be horizontally centered):
Contact us
Thank you so much in advance for helping the noob out!
When in doubt about positioning, use... flexbox!
nav {
display: flex;
justify-content: space-around;
align-items: center; /* Depends */
}
Oh, and by the way, I would appreciate if you didn't fit all of the code on one line. It's hard to read.
Another way is to use float.
#logo {
float: left;
}
#text {
float: right;
}
#button {
margin: 0 auto;
}
The #logo and the #text will behave as exactly as absolute positioned in the way that they will be taken out of the normal flow.
EDIT: Whoops I forgot to have the console open to clear the cache when working on my actual project. Previous solutions and the ones you suggested work just fine. Thanks guys
So I'm trying to have something slide out while something else inline stays stationary. However, the sliding pushes other elements below downwards.
Here is the basic HTML:
<div id="title-container">
<h1 class="inline-header">Example.</h1>
<h1 id="sliding-text" class="inline-header">slide</h1>
</div>
<button id="slideButton">SLIDE</button>
I tried other solutions I found through searching, but they don't seem to work. For ex, giving the outside container a fixed height with overflow hidden, will prevent the slide from pushing outside elements down, but pushes the left (static) text upwards as the right side goes down. Here is a JSFiddle showing what happens in my orig code.
https://jsfiddle.net/9hj6y79k/11/
Essentially I just want the right side to slide out without moving anything else.
I would like the position to stay as relative (rather than switching it all to absolute positioning), but if switching to absolute is the best way to do it I would not be opposed. Could anybody help out? Thanks!
You will need to add overflow:hidden; in css
https://jsfiddle.net/9hj6y79k/12/
.inline-header {
display: inline-block;overflow:hidden;
}
#title-container {
position: relative;
left: 40%;
}
Change your css class to this:
.inline-header {
display: inline-block;
vertical-align: top;
}
https://jsfiddle.net/9hj6y79k/13/
I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.
So I'm fairly new as far as coding goes, just so everyone knows.
I'm trying to accomplish two simultaneous things
1. The first is, I would like be able to hover over an image in one container and have another image in a different container appear. Even if that means having an image that technically overlaps the container and just happens to have the same dimensions (which are width: 350px and height: 205px, by the way). If another solution is to have the initial image be a clickable link to open the second image, that would be fine too. In fact, that'd be preferable.
2. I need to do this multiple times, each with different initial and secondary images, with float:right or a similar css function involving setting the sets of initial images being wrapped to the right of my first div container.
3. I need to maintain the set of initial images (buttons), in two rows, with overlap-y: hidden and overlap-x: scroll.
My css for the button images is this, and must either stay this way or have a similar effect:
div.img {
margin: 10px;
**padding: 5px;**
**height: 38px;**
**width: 38px;**
float: right;
display:inline;}
div.img img {
**height: 38px**
**width: 38px**
display: inline;
float:right;
margin: 10px;
**border: 12px solid #ffffff;**
**border-radius: 8px;**
**box-shadow: 3px 3px 1px #888888;**
I put all the key points of the css that I need to keep (or display in a similar fashion) in bold. The part in question is the display: inline function. I need my set of images to be in two rows, wrapping to the right side of the container (or at least scrolling horizontally), but instead they are displaying as two rows of three, then one vertical column that is no longer aligned with the two rows of three.
To see the type of solution I'm looking for, here's the page: http://hellothisismelody.tumblr.com/codeconstruction/
As you can see, it's set up like a Nintendo 3DS. I'm looking to make functioning buttons on the bottom screen that make an image appear in the top screen, and looking to have those images set up like the home screen of a Nintendo 3DS, which looks like this:
Click for Nintendo 3DS Homescreen
Thank you for you time.
Regarding your first question, you can use this:
<div class=container1>
<img src='blah1.png'>
</div>
<div class=container2>
<img src='blah2.png'>
</div>
$('.container1 img').hover(function() {
$('.container2 img').get(0).src = 'blah3.png';
});
I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.
I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?
If it is possible, is there an example? I googled it but nothing like what I want came up.
The side-panel can be hidden and shown by click a button so adding padding will not work.
Here is an idea of what I mean:
The days part is #calendar, and the Unscheduled part is the side panel of 150px.
I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.
Thanks
Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Result of float:
Got a working solution for you here.
The code to get this working basically hinges on the following structure:
<div class="sideBar">
...
</div>
<div class="tableWrapper">
<table>
...
</table>
</div>
Next, make sure the elements have these significant CSS properties:
.sideBar {
float: right;
}
.tableWrapper {
overflow: hidden;
}
table {
width: 100%;
}
What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.
Click the button in the demo to see the table automatically resize.
All major browsers and IE10 support flexbox. Not supported < IE10.