I need to output a number of divs that contain child divs that are poistioned absolutely:
<div class="parent">
<div class="child">
Some content 1.
</div>
</div>
<div class="parent">
<div class="child">
Some content 2.
</div>
</div>
<div class="parent">
<div class="child">
Some content 3.
</div>
</div>
.parent {
position: relative;
margin-top: 50px;
}
.child {
position: absolute;
top: 0;
left: 10;
width: 200px;
height: 200px;
}
But my trouble is the child divs are stacking on top of each other, I'd like them to be displayed vertically, one after another. I can do this by specifying a height for the parent div:
.parent {
position: relative;
margin-top: 50px;
height: 200px;
}
But is there a way of doing it without specifying a height?
I've created a fiddle:
http://jsfiddle.net/n38546ca/1/
Any help is appreciated.
add a (padding-top: 50px;) to .parent div
.parent {
position: relative;
margin-top: 50px;
padding-top: 50px;
}
Related
Does anyone know how I can do this on my own site? (vuejs)
https://cdn.larkx.xyz/kv2bos6i.gif or https://sparkedhost.com
I am going to put Vuejs aside because this effect can be achieved with CSS only.
You can give a look at the source code of sparkedhost.com for a better understanding of how they implemented this effect, and here is an example of such effect without any embellishment:
.container {
width: 200px;
height: 200px;
background: lightgrey;
overflow: hidden;
}
.content {
width: 150px;
height: 80px;
background: red;
margin: 20px auto;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.scrolling {
position: relative;
animation-duration: 8s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes slidein {
from {
top: 0;
}
to {
top: -500px;
}
}
<div class="container">
<div class="scrolling">
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
<!-- The same block of divs is repeated -->
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
</div>
</div>
I'm trying to center an image inside the slide (swiper) both horizontal and vertically. Kind of the same behavior when we put background-size: cover when it's a div's background image.
By default it shows the image from the top left corner, so I'm trying to change that behavior. What I've tried is:
HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="banner.jpg">
<div class="caption-align">
<div class="caption">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
</div>
</div>
</div>
CSS
img {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.swiper-container {
height: 650px;
}
.caption-align {
display: flex;
align-items: center;
}
Vertically it works fine. Horizontally it cuts the image somehow when pulling it to the left:
Without the X translate:
Any tips?
I am not able to find the element in kedo grid. I have to identify the grid , using that grid i have to identify the cells and enter value in them. but i m not able to identify the grid itself.
Below is the xpath.
IWebElement testoj = driver.FindElement(By.XPath("//*[#id='pricingTableSpreadsheet']"));
if i run this xpath in console it returns the element but wen I run this through code it does not detect the element
HTML
<div id="secContainer">
<div kendo-splitter="" k-panes="[null, { collapsible: true, collapsed: true, min: '235px', size: '235px' }]" k-orientation="'vertical'" id="k-splitter" style="height: 100%; border: 0 solid transparent;" data-role="splitter" class="k-widget k-splitter">
<div role="group" class="k-pane k-scrollable" style="position: absolute; top: 0px; height: 92px; width: 1066px;">
<div ui-view="prdTableView" class="fullHeight ng-scope">
<div ui-view="wipprdView" class="fullHeight ng-scope">
<div style="positi on:absolute; left: 5px; z-index: 900; padding-top: 2px;"></div>
<div style="position:absolute; float: right; right: 5px; z-index: 900;">
</div>
<div kendo-spreadsheet="" id="pricingTableSpreadsheet" style="width: 100%; height: 100%; margin-top: -3px; margin-left: -2px;" k-options="ptSpreadOptions" k-scope-field="spreadsheet" class="noFormula k-widget k-spreadsheet" data-role="spreadsheet">
</div>
</div>
</div>
</div>
</div>
</div>
I am having hard time figuring out how to fix a small alignment issue as shown in the fiddle. The text box and 'R' bootstrap label is not aligned on the top.
https://jsfiddle.net/haribalaji/p7Louzq9/
.inline-form-control
{
display: inline-block;
width: 90%;
}
.labelClass
{
display: inline-block;
height: 40px;
}
.label-primary {
background-color: #337ab7;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
Here is the code
<code>
<form>
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="form-group">
<label for="adrTerm"><span>Adverse Reaction Term</span><span style="color:red;">*</span></label>
<div class="field"><input type="text" name="adrTerm" class="inline-form-control form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1"><span class="labelClass label label-primary">R</span>
<div class="input"></div>
</div>
</div>
</div>
</form>
</code>
This fiddle demonstrates the "R" label being the same height as the input and aligned to its right.
As mentioned in the comments earlier, the markup needed to be much simpler:
<div class="container">
<form>
<div class="form-group">
<label for="adrTerm" class="col-xs-12 control-label text-left">Adverse Reaction Term<span style="color:red;">*</span></label>
<div class="col-xs-11">
<input type="text" name="adrTerm" class="form-control" placeholder="Enter the ADR Term Name" value="" tabindex="1">
</div>
<div class="col-xs-1">
<label class="text-center rLabel">R</label>
</div>
</div>
</form>
</div>
And also, very little custom CSS is required:
.container {
margin: 10px
}
.rLabel {
padding-top: 6px;
padding-bottom: 6px;
background-color: #337ab7;
margin-left: -30px;
color: #fff;
width: 80%;
}
This still may not give you exactly what you want. For example, you may not care for how the "R" label will change width when the window is resized. If so, change the width in the .rLabel class to a fixed width.
Note how the Bootstrap styles are added to the fiddle as an external resource.
Also, note that the use of a container is required.
Updated link to JSFIDDLE
.labelClass
{
display: inline-block;
position:absolute;//added
}
.label {
display: inline;
padding:0 0.6em;//changed
font-size: 75%;
font-weight: 700;
line-height: 1.8;//changed
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
Make label position absolute,
Removed unnecessary padding,
Changed line height of label.
Use input group add-on of bootstrap if you are using.
http://v4-alpha.getbootstrap.com/components/input-group/
Im just new to CSS:
And my problem is My Logo shows up but it's in the back and Should I put my div:top-most into the wrapper? because if I put my div:top-most, it will be shown along with the logo, but I want my lime color to be put on the max width of my browser..
Here's my HTML Code
<body>
<div id="top-most">
</div>
<div id="wrapper">
<img alt="logo" src="images/logo.png" /><div id="wrapper">
</div>
<div id="header">
<p>Put something here</p>
</div>
</body>
And here's my CSS Code:
#top-most { background-color: lime; height:51px ;width:100%; position:absolute; }
#wrapper { width :960px; height:100px ; overflow:hidden; margin:0px auto; }
#logo { margin: 19px 0 0 10px; position:absolute; top: 0px; z-index:2; }
#header { margin: 30px 0 0 20px; float:right; width: 750px; }
#header p { color: #979899; }
And here's the output:
http://imgur.com/gWDNYGB
Hello :) you need to put #wrapper in #top-most.
<body>
<div id="top-most">
<div id="wrapper">
<img alt="logo" src="http://placekitten.com/200/300" />
</div>
</div>
<div id="header">
<p>Put something here</p>
</div>
</body>
I edited your Css code too.
#top-most { background-color: lime; padding: 5px; position:absolute; }
#wrapper { width :960px; height:100px ; overflow:hidden; margin:0px auto; }
#logo { margin: 19px 0 0 10px; position:absolute; top: 0px; z-index:2; }
#header { margin: 30px 0 0 20px; float:right; width: 750px; }
#header p { color: #979899; }
You don't need padding: 5px; in #top-most but it will look better
Demo