Hi I have a simple label "District" and drop-down with a list of zip-codes. I simply want to have the label and the drop-down to be side-by-side, horizontal on one line but for some reason it will work. It keeps displaying vertically, as in the label on top and menu on bottom.
here is my html:
<div class="filterButton leaflet-control">
<span><i class="fa fa-filter fa-7x"></i>
<label class="menu">District: </label>
<select class="ml-1 menuContent" name="zipcode" [(ngModel)]="zipcode" (ngModelChange)="selectedZipcode()">
<option>-All-</option>
<option *ngFor="let zipcode of artworkList | duplicates ">{{zipcode}}</option>
</select>
</span>
</div>
and my css:
.filterButton {
margin-left: 43px;
border-radius: 0;
background-clip: padding-box;
border: 2px solid rgba(0, 0, 0, 0.2);
background-position: 50% 50%;
cursor: pointer;
text-align: center;
background-color: #fff;
padding: 3px;
}
.fa-filter:hover {
color: #5690C6;
}
.fa-filter {
color: #1770a6;
font-size: 21px;
padding-left: 4px;
padding-right: 4px;
align-content: center;
}
.menu, .menuContent {
display: inline;
}
You should make display: inline; or display: inline-block on the filterButton, the wrapper of your elements.
Related
How to change the style of a radio button in vue.js that will merge the radio button and the label of the button together. I tried to change it according to this link Simple Radio Button Styling but I am unable to change it. Below is the code
<div id="product">
<h4>{{$translate('options')}}</h4>
<div v-for="(a,key,index) in attribute">
<h5>{{a}}</h5>
<v-radio-group small row v-model="selected[index]">
<v-radio :label="v" :value="v" v-for="v in options['V'+(index+1)]" :key="v"></v-radio>
</v-radio-group>
</div>
I wanted to make it from this style of button
to this type of style
I really hope there is a way to solve this problem and I wanted to learn from my mistakes as I am still learning vue js
You can use a v-for to render any HTML code. It doesn't have to be a Vue radio button...
In this case, you need to create a wrapper for each radio button. Typically I recommend wrapping the input INSIDE the label so the entire thing becomes clickable. The following example would give you lots of styling opportunities.
<label class="radio">
<input type="radio" name="group"/>
<span>Label Text</span>
</label>
So in VUE you would need something like this:
<label v-for="opt in options" v-bind:key="opt.value">
<input type="radio" v-model="opt.checked" value="opt.value" name="opt.groupName" />
<span v-html="opt.value"></span>
</label>
The browser's default CSS should render that something like:
[ ] Label text
And now that I have more time here's how you could do the styling.
Assuming that you managed to get your HTML structured like I did, you have a lot of options. To make this work you're going to use the adjacent sibling selector to change things when the radio button is selected. Also since styling radio buttons themselves is difficult we're just going to hide it and use its state to determine what should happen.
.example {
margin: 20px;
}
.example input {
display: none;
}
.example label {
margin-right: 20px;
display: inline-block;
cursor: pointer;
}
.ex1 span {
display: block;
padding: 5px 10px 5px 25px;
border: 2px solid #ddd;
border-radius: 5px;
position: relative;
transition: all 0.25s linear;
}
.ex1 span:before {
content: '';
position: absolute;
left: 5px;
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #ddd;
transition: all 0.25s linear;
}
.ex1 input:checked + span {
background-color: #fff;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
.ex1 .red input:checked + span {
color: red;
border-color: red;
}
.ex1 .red input:checked + span:before {
background-color: red;
}
.ex1 .blue input:checked + span {
color: blue;
border-color: blue;
}
.ex1 .blue input:checked + span:before {
background-color: blue;
}
.ex1 .orange input:checked + span {
color: orange;
border-color: orange;
}
.ex1 .orange input:checked + span:before {
background-color: orange;
}
<div class="example ex1">
<h4>Select Color</h4>
<label class="radio red">
<input type="radio" name="group1"/>
<span>Red</span>
</label>
<label class="radio blue">
<input type="radio" name="group1"/>
<span>Blue</span>
</label>
<label class="radio orange">
<input type="radio" name="group1"/>
<span>Orange</span>
</label>
</div>
If you want remove material design icon from your project or customize it, u can use something like that:
.mdi-radiobox-blank{
background-color: #fff;
border: 0.084em solid #736c63;
border-radius: 50%;
width: 20px !important;
height: 20px !important;
margin-top: 2px;
margin-right: 2px;
}
.mdi-radiobox-marked{
border: 0.084em solid #003974;
border-radius: 50%;
position: relative;
width: 20px !important;
height: 20px !important;
margin-top: 2px;
margin-right: 2px;
}
.mdi-radiobox-marked::before{
background-color: #003974;
border-radius: 50%;
width: 10px !important;
height:10px !important;
content: " ";
}
Result without material design icons:
I want to create an icon that looks like a circle with a "plus" icon inside and right below it a descriptive p tag.
For I reason I cannot figure out doing this completely breaks the whole block. What am I doing wrong?
jsfiddle
Here's the HTML:
<div class="follow-single">
<div class="follow-wrapper">
<a class="follow" id="#follow_4" rel="nofollow" data-method="put" href="/jessie/follow">
<span class="glyphicon glyphicon-plus"></span>
<p class="title">Unfollow</p>
</a>
</div>
</div>
And the CSS:
follow-single {
max-width: 360px;
margin: 0 auto;
border-top: 1px solid #ddd;
margin-top: 20px;
padding-top: 20px;
}
.follow-single .follow-wrapper {
text-align: center;
}
.follow-single .follow-wrapper .follow {
color: #3c763d;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
padding: 10px 17px;
border-radius: 4px;
}
.follow-single .follow-wrapper a {
text-decoration: none;
}
.follow-single .follow-wrapper .title {
font-size: 12px;
display: block;
}
Set the display on the achor tag to be inline-block.
.follow {
display: inline-block;
}
Fiddle
Additionally, an unrelated to the original question, your definition of follow-single is missing a leading dot character: .follow-single
I am trying to have it so users can log in into my website using fb etc. For some reason, the text gets hidden behind the buttons in my existing code. I am not sure what's wrong since the text used to show up where it needed to be up until I changed the background of the buttons and added social icons to them. Could you please help?
Here is the relevant code:
HTML:
<a class="alt-sign-in facebook">Login with facebook</a>
<a class="alt-sign-in google">Login with google</a>
<a class="alt-sign-in twitter">Login with twitter</a>
<form>
<input type="text" name="name" placeholder="name">
<input type="text" name="email" placeholder="email">
<input type="submit" name="submit">
</form>
<button id="computer-button">Start</button>
</div>
CSS:
#import url('http://weloveiconfonts.com/api/?family=entypo');
#import url('http://weloveiconfonts.com/api/?family=zocial');
html, body {
height: 100%;
background: #ddd;
}
.alt-sign-in {
position: relative;
display:block;
height: 40px;
width: 300px;
margin: 10px 0px auto auto;
padding: 5px;
font: 700 16px/40px'Quattrocento Sans', sans-serif;
text-decoration: none;
text-transform: uppercase;
text-align:center;
line-height: 40px;
color: #555;
border-radius: 2px;
background: linear-gradient(to bottom, white 40%, lightgrey);
box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
cursor: pointer;
box-sizing: border-box;
}
.alt-sign-in:before {
color:white;
position:relative;
top: -5px;
left: -5px;
display:block;
box-sizing: border-box;
height: 40px;
width: 45px;
font: 20px/40px entypo;
text-align: center;
color: #fff;
border-radius: 2px 0 0 2px;
}
http://jsfiddle.net/prettysweet/Dv9rC/24/
Thank you so much!
The code you have posted seems to be an incomplete, or older version.
But by judging from your jsfiddle link, I suggest to change the following;
.alt-sign-in {
/* removed: box-sizing: border-box; */
}
.alt-sign-in:before {
position:absolute;
top: 5px;
left: 5px;
}
see http://jsfiddle.net/Dv9rC/27/
I think you have floating element problem. If you add these lines to your css code, it'll be OK.
.alt-sign-in.facebook:before {
...
float: left;
}
.alt-sign-in.google:before {
...
float: left;
}
.alt-sign-in.twitter:before {
...
float: left;
}
Bonus Edit: After adding all of these codes, just add form tag to your CSS document for top margin.
form{
margin-top:15px;
}
I have the Following Radio buttons in my jQuery mobile app , I need to style them as the Radio button in the image bellow . I have tried the following css but it didn't give me the same result , Please Help me ..
Html
<div data-role="page">
<div data-role="header" data-theme="b" style="height:63px;">
</div>
<div data-role="content">
<form>
<fieldset>
<input type="radio" id="Male" value=" Male" name="radio-group-1" />
<label for="Male" data-inline="true" style="background:transparent !important;">Male </label>
<input type="radio" id="Female" value=" Female" name="radio-group-1" />
<label for="Female" data-inline="true" style="background:transparent !important;" >Female </label>
</fieldset>
</form>
</div>
</div>
CSS
input[type="radio"] {
display: none;
}
.ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{
width: 25px;
height: 25px;
}
.ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{
margin-top: -18px;
margin-left: -38px;
}
.ui-btn.ui-radio-on:after{
width: 55px;
height: 55px;
background: green !important;
background-size:100px 24px;
}
This is what i get
To get a green inner circle with transparent around it and a border after that, you really need 2 circles. This could be achieved by adding a :before element as well as the :after element in CSS.
Here is a DEMO
The CSS makes the whole button 56px tall and vertically centers the text by making the line-height the same. When off, the radio image is 26x26 with a gray border. When on, the :before css adds a new 26x26 empty circle with a border while the :after css creates a smaller green circle in the center. NOTE: you may need to tweak sizes and margins to get your desired results.
input[type="radio"] {
display: none;
}
.ui-radio label {
height:56px;
line-height: 56px;
padding-left: 50px;
}
.ui-radio .ui-btn.ui-radio-off:after {
background-image: none;
width: 26px;
height: 26px;
border: 2px solid #6E7983;
margin-top: -13px;
}
.ui-radio .ui-btn.ui-radio-on:after {
background-color: #86D51C;
width: 14px;
height: 14px;
margin-top: -6px;
margin-left: 10px;
border: 0;
}
.ui-radio .ui-btn.ui-radio-on:before {
content:"";
position: absolute;
display: block;
border: 2px solid #6E7983;
border-radius: 50%;
background-color: transparent;
width: 26px;
height: 26px;
margin-top: 14px;
margin-left: -39px;
}
I'm trying to add a box shadow on two inputs next to each other, but the shadows are overlapping the inputs.
I've tried to add a position: relative and z-index to the inputs, but then the shadow overlap the input with the lowest z-index.
Is there a way to prevent the shadow from overlapping the other input next to it?
HTML:
<form method="post">
<input name="email" type="text" >
<input name="send" type="submit">
</form>
CSS:
.email {
height:45px;
width: 395px;
float: left;
box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
-webkit-appearance: none;
}
.search {
height: 45px;
width: 60px;
float: right;
box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
cursor: pointer;
-webkit-appearance: none;
}
Here is an example of what i mean:
Thanks :)
- Jesper
You have to wrap the two inputs into divs :
<form method="post">
<div class="input--email">
<input name="email" type="text" class="email">
</div>
<div class="input--search">
<input name="send" type="submit" class="search">
</div>
</form>
And give them the same shadows :
.input--email, .input--search {
float: left;
box-shadow: 0 0 40px 6px rgba(0,0,0,0.65);
height: 45px;
}
.input--email{
width: 395px;
}
.input--search{
margin-left: 15px;
width: 60px;
}
.email, .search {
width: 100%;
height: 100%;
position: relative;
-webkit-appearance: none;
}
.search {
cursor: pointer;
}
Here is a fiddle : http://jsfiddle.net/VLy6Q/