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?
Related
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/
enter image description hereI'm trying to have an information panel with three different columns using bootstrap 3. I've nested the columns properly, I think, but the panels are hidden beneath the main row and I can't find a way to reveal it.
it's showing that the container is there, but you can't see it
<div class="row creative_line">
<div class="col-md-12">
<h2 class="text-center">Smart & Creative<br><p>This is why you will use it</p></h2>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-4 multi">
<div class="img-circle">
</div>
</div>
<div class="col-md-4 ui">
<div class="img-circle">
</div>
</div>
<div class="col-md-4 design">
<div class="img-circle">
</div>
</div>
</div>
</div>
</div>
This is my current css
.creative_line {
background: yellow;
min-height: 300px;
color: $primary-color;
font-family: $font-stack;
}
.creative_line p {
color: $primary-color;
font-family: $font-stack2;
font-size: 35%;
margin-top: 10px;
}
h2 {
font-size: 40px;
}
.img-circle {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
background: red;
}
.multi,
.ui,
.design {
min-height: 300px;
color: blue;
z-index: 1;
}
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;
}
I'm trying to destroy descendants of Accordion, that is I have 4 Content Panes within an Accrdion and then when I get new data I want to repopulate the accordion with that data(eg 5 ContentPanes) but the issue is that Once I call destroyDescendants on the accordion the content panes still reside within as dijit__Contained objects left from previous data:
<div class="mblAccordionTitle mblAccordionHasIcon mblAccordionTitleSelected" id="dijit__Contained_0" widgetid="dijit__Contained_0" style="-webkit-user-select: none;">
<a class="mblAccordionTitleAnchor" role="presentation">
<div class="mblAccordionIconParent mblAccordionIconParent2">
<div class="mblSpriteIconParent" style="position: relative; width: 32px; height: 32px;">
<img alt="" src="images/i.png" class="mblSpriteIcon" style="position: absolute; clip: rect(0px 32px 32px 0px ); top: 0px; left: 0px;">
</div>
</div>
<div class="mblAccordionIconParent mblAccordionIconParent1">
<div class="mblSpriteIconParent" style="position: relative; width: 32px; height: 32px;">
<img alt="" src="images/i.png" class="mblSpriteIcon" style="position: absolute; clip: rect(0px 64px 32px 32px); top: 0px; left: -32px;">
</div>
</div>
<div class="mblAccordionTitleTextBox" role="tab" tabindex="0" aria-controls="widget/PersonContainerContentPane" aria -selected="true" aria-posinset="1" aria-setsize="4">
<span class="mblAccordionTitleLabel">John Smith
</span>
</div>
</a>
</div>
Also the contained object is not a child of accordion...
Is there any way to get rid of this when I call destroyDescendants on accordion?
That solved my problem:
for (var i = this.accordion.containerNode.childNodes.length - 1; i >= 0; i--) {
registry.byId(this.accordion.containerNode.childNodes[i].id).destroyRecursive(false);
};
Don't know why destroyDescendants didn't clean up leftover html.