i have a div which is resizeable through css.
HTML :
<div id="resize">
<img src="{{env.assets_url}}assets/images/minified_signhere.png" [hidden]="!isNameNull(sign.name)" [attr.id]="'sign-img' + myindex">
<img src="{{env.assets_url}}assets/images/minified_signhere_dim.png" [attr.id]="'dimimg' + myindex" [hidden]="isNameNull(sign.name)">
<div style="position: absolute;z-index: 1000;left: 100%;" class="signbtns">
<span style="font-size: 17px; margin-bottom: 5px" class="fa fa-trash float-right change-cursor" aria-hidden="true" (click)="deleteSign(myindex)"
data-toggle="tooltip" title="Click to delete the signature."></span>
<span style="font-size: 17px;" class="fa fa-pencil float-right change-cursor" (click)="editSign(myindex)" aria-hidden="true"
data-toggle="tooltip" title="Click to edit the signature."></span>
</div>
</div>
and following is CSS
#resize {
display: flex;
resize: both;
overflow:auto;
}
::-webkit-resizer {
background-color: red;
cursor: ew-resize;
}
div is being resize correctly. i want to customize the background color of resizer but the ::-webkit-resizer doesn't seem to work.
You change the color of #resize, not ::-webkit-resizer.
Related
what I am trying to do is modify the style of my b-collapse since by default it has a vertical style that I think and what I want is to give my menu a horizontal style
This is how I implement it:
<div style="background-color:white;">
<b-collapse id="collapse-cat-lvl1-469">
<div data-cat-acc="473" class="grid-item parent-lvl-2">
<a class="link -1 grid-sty-1" href="#" target="_self" data-menu-item-id="473">
<span class="text">GTI</span>
</a>
</div>
<div data-cat-acc="474" class="grid-item parent-lvl-2">
<a class="link sty-1 grid-sty-1" href="#" target="_self" data-menu-item-id="474">
<span class="text">Pets</span>
</a>
</div>
</b-collapse>
</div>
You can modify <b-collapse id = "collapse-cat-lvl1-469"> in if this: collapse-cat-lvl1-469 ???
What I intend is to give it better style with CSS, or some way that I can see my menu horizontally and not vertically
.navbar-greetings, .login-section{display: none}
#menu-header.collapse:not(.show){
display: block;
}
#menu-header{
position: fixed;
top: 25px;
max-width: 83%;
margin: 0 auto;
left: 8.32%;
.panel{
button{
display: block;
color: white;
font-size: 13px;
font-family: 'VWHead-Bold';
}
}
#accordion-mbl-menu{
display: flex;
}
}
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 3 years ago.
I have a number of containers with the same width but different height. I would like them to stack-up without leaving too much space below.
Currently they have the following CSS:
.myDiv {
width: calc(100% - 67%);
float: left;
}
What else am I missing to accomplish this?
I recommend using grid or flexbox. This is a great example using flex: https://codepen.io/cssgirl/pen/NGKgrM
This is my favorite guide for learning flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here is a cleaned up version from the codepen link:
.container {
max-width: 1100px;
margin: 0 auto;
}
.cards {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 15px;
padding: 1.5%;
box-sizing: border-box;
}
.card {
flex: 0 1 330px;
position: relative;
margin-bottom: 20px;
padding-bottom: 30px;
background: #fefff9;
color: #363636;
text-decoration: none;
}
.card span {
display: block;
}
.card .card-summary {
padding: 5% 5% 3% 5%;
}
.card .card-header {
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .card-title {
background: rgba(157, 187, 63, .85);
padding: 3.5% 0 2.5% 0;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
position: absolute;
bottom: 0;
width: 100%;
}
.card .card-title h3 {
font-size: 1.2em;
line-height: 1.2;
padding: 0 3.5%;
margin: 0;
}
//General styles for page to make it prettier ;P
body {
background :#f0f0f0;
font-size: 17px;
line-height: 1.4;
font-family: 'Jaldi', sans-serif;
}
<html>
<body>
<div class="container">
<div class="cards">
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card that is a bit longer in length</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
</div>
</div>
</body>
</html>
I have this JSFiddle: https://jsfiddle.net/96urhqcz/
There are 4 divs in a row - the HTML looks like this:
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link1/">
<div style="margin:10px; padding: 30px 0px; background:#E74C3C" class="app">
<i class="fa fa-3x fa-comments-o" width="50%" style="display:block; margin:auto" src="/static/launcher/comments-o"></i>
Link Number 1
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link2/">
<div style="margin:10px; padding: 30px 0px; background:#9D55B8" class="app">
<i class="fa fa-3x fa-paper-plane" width="50%" style="display:block; margin:auto" src="/static/launcher/paper-plane"></i>
Link Number 2
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link3/">
<div style="margin:10px; padding: 30px 0px; background:#3395DD" class="app">
<i class="fa fa-3x fa-street-view" width="50%" style="display:block; margin:auto" src="/static/launcher/street-view"></i>
Link 3
</div>
</a>
</div>
<div class="g-1-4 app">
<a style="text-decoration:none;" href="https://link4/">
<div style="margin:10px; padding: 30px 0px; background:#00838F" class="app">
<i class="fa fa-3x fa-line-chart" width="50%" style="display:block; margin:auto" src="/static/launcher/line-chart"></i>
Link 4
</div>
</a>
</div>
The CSS for g-1-4 looks like this:
.g-1-4{
width: 25%;
}
As you can see in the JSFiddle - the margins between the boxes are 'linked' to the appropriate box.
Ultimately I'm trying to have a 4-across layout, but have the margins not linked. When a user mouses between the boxes I want it to be a regular mouse with no clickability.
I'm sure it's something really simple I'm missing - but I can't seem to correct it.
Any thoughts or ideas?
You can set a fixed width to your divs, and using flexbox they will be automaticaly displayed with space which is not 'linked'.
Hope this little code will help you.
.flex {
display : flex;
justify-content : space-around;
}
.div1, .div3 {
width : 120px;
height : 120px;
background-color : red;
}
.div2, .div4 {
width : 120px;
height : 120px;
background-color : blue;
}
p {
margin : 0;
color : white;
line-height: 120px;
font-size : 12px;
text-align : center;
}
<div class="flex">
<a href="#" class="div1">
<p>LINK 1</p>
</a>
<a href="#" class="div2">
<p>LINK 2</p>
</a>
<a href="#" class="div3">
<p>LINK 3</p>
</a>
<a href="#" class="div4">
<p>LINK 4</p>
</a>
</div>
Take the margin off of the <div> and add it to the <a> that's wrapping the div. Also add style="display:block:" to the <a>.
This CodePen has the updates.
The issue is coming from your using the table cell display method.
.g > div,
.g-m > div {
display: table-cell;
vertical-align: top;
}
I also support the flex box usage as pointed out by Louis.
What is happening is that the link element is expanding to the 100% of the container div to get some space you could set a specific width for the a tag or you could add some padding to the container element, you will have to play with padding and width to make it look good though.
https://jsfiddle.net/96urhqcz/1/
.g-1-4{
width: 25%;
padding: 10px;
}
I have the css and html code for a button as given below. the button will be in header..
<div data-role="header" data-position="fixed">
<a href="#home" data-role="button" data-inline="false" data-icon="my-map" data-theme="c" data-iconshadow="false">
<img src='http://img3.wikia.nocookie.net/__cb20131126195004/epicrapbattlesofhistory/images/a/aa/Home_icon_grey.png' alt="custom buttom" />
</a>
css code:
.ui-icon-my-map {
background-position: 4px 50%;
background-size: 16px 11px;
height: 12px;
margin-top: -8px !important;
width: 15px;
background-color: transparent;
}
The button should appear like image instead of button.and how to reduce the size of button to normal home icon size.
Change the code to this....
<div data-role="header" data-position="fixed">
<a href="#home" data-role="button" data-inline="false" data-icon="my-map" data-theme="c" data-iconshadow="false">
<img src='http://img3.wikia.nocookie.net/__cb20131126195004/epicrapbattlesofhistory/images/a/aa/Home_icon_grey.png' alt="custom buttom" style="height:32px;border:none;" />
</a>
Please comment back if you need/require further help
<div data-role="header" data-position="fixed"> <a href="#home" data-role="button" data-inline="false" data-icon="my-map" data-theme="c" data-iconshadow="false" class="home"><img src='http://img3.wikia.nocookie.net/__cb20131126195004/epicrapbattlesofhistory/images/a/aa/Home_icon_grey.png' alt="custom buttom" />
.home img {
height:35px;
display:block;}
http://jsfiddle.net/Vgcuj/
In the theme that I use, there is a shortcode making googd accordians. I am making the site RTL. Accordian's title and content have been RTL. But the plus sign (the square) does not follow the CSS rules added. I was wondering if anyone could help me make the plus sign RTL.
Page URL: http://sciself.com/?page_id=4766
HTML code is as follows,
<div id="text-13" class="widget widget_text">
<div class="textwidget">
<div class="accordian">
<h5 class="toggle">
<a href="#">
<span class="arrow">
</span>
title
</a>
</h5>
<div class="toggle-content " style="display: none;">
text
</div>
<h5 class="toggle">
<a href="#">
<span class="arrow">
</span>
title
</a>
</h5>
<div class="toggle-content " style="display: none;">
text
</div>
<h5 class="toggle">
<a href="#">
<span class="arrow">
</span>
title
</a>
</h5>
<div class="toggle-content " style="display: none;">
text
</div>
</div>
</div>
</div>
and CSS rules added are,
#text-13 .textwidget .accordian .toggle-content {
font-family: bkoodak !important;
direction: rtl !important;
text-align: justify !important;
}
#text-13 .textwidget .accordian h5.toggle a {
font-family: bkoodak !important;
direction: rtl !important;
float: right !important;
}
in the .arrow class in the line "2073" in your style.css add property like so:
h5.toggle span.arrow {
float:right;
direction:rtl;
margin-right:0;
margin-left:17px;
}
also your form need to be rtl, in the .gform_fields class add this property:
.gform_fields{
direction:rtl;
text-align:right;
}
موفق باشید :)
Try this:
h5.toggle span.arrow {
float:right;
direction:rtl;
margin-left:10px;
font-family:bkoodak;
}