I've created HTML input.
<input type="submit" id="Submitbtn" onclick="javascript:function()" value="Login" name="Submitbtn">
CSS is:
input:hover, input{
background: none repeat scroll 0 0 #1356B4;
border: medium none;
margin-right: 0;
padding: 3px 10px 5px 0;
vertical-align: middle;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font: 14px/26px Arial,Helvetica,sans-serif;
height: 26px;
-webkit-transition: all 0.3s ease-in-out 0s;
}
The output in web browsers:
And in iPad:
How to resolve this?
I suppose you must get rid of the webkit appearance on your button by adding in your CSS:
-webkit-appearance: none;
Related
This absolutely positioned pseudo-element has a position:relative parent. We should expect its border styles to be applied, but they are not. Why?
:root {
--color-border: #E5E5E5;
--color-background: #FFFFFF;
}
.tooltip {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.tooltip::after {
position: absolute;
top: 11px;
right: 100%;
left: -8px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: var(--color-border);
background-color: #ffffff;
}
.tooltip-hard-coded {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid #e5e5e5;
background-color: #ffffff;
}
.tooltip-hard-coded::after {
position: absolute;
top: 11px;
right: 100%;
left: -9px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: red;
background-color: pink;
}
<div style="display: flex; flex-direction: column">
<div style="padding: 32px;">
<div class="tooltip">With CSS variables</div>
</div>
<div style="padding: 32px;">
<div class="tooltip-hard-coded">With hard-coded values</div>
</div>
</div>
<div class="tooltip">Hi</div>
no border with the following CSS:
:root {
--color-border: #E5E5E5;
--color-background: #FFFFFF;
}
.tooltip {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.tooltip::after {
position: absolute;
top: 11px;
right: 100%;
left: -8px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: var(--color-border);
background-color: var(--color-background);
}
when hard-coding a border color value, the pseudo-element only gets the style partially applied:
<div class="tooltip-hard-coded">With hard-coded values</div>
with hard-coded values:
<div class="tooltip-hard-coded">With hard-coded values</div>
What is the correct way to apply border styles to an absolutely positioned pseudo-element using CSS custom properties?
Tried several variations of the styles applied to pseudo-element; tried hard-coded values, tried changing display methods, etc
I have a webpage Find a walk which uses Leaflet to enable site visitors to find a walk in the British Isles from a specific location.
The page generates a search box and map.
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search by city, town or village" />
<div class="result" ></div>
</div>
<div id="walkingBritainMapDivWrap">
<div id="walkingBritainMapDiv" class="walkingBritainMapDiv"></div>
</div>
For all browsers except IOS the lists of results from the search are displayed in front of the map. However with IOS the list of results is hidden behind the map.
I have tried using z-index on the relevant divs but this has no effects. I understand that Laeflet uses z-indez to add layers to the map which m,ight complicate the issue.
The CSS for these divs is :-
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
margin-bottom: 12px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid red;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
background-color: white;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
.walkingBritainMapDiv {
padding-top: 75%;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: rgb(0, 0, 0);
z-index: 0;
}
Any help would be appreciated to solve this problem.
I am using jquery-3.4.1.min.js and jquery-ui-1.12.1 .
I have a problem with jquery ui sortable widget.
When I try to drag "div.container", which is child of "div.containerList" (with applied sortable), I am not able to trigger dom change on whole height of sibling element, I have to adjust dragged element vertical position.
Can somebody please explain this behavior, possibly with solution?
Thank you very much!
https://jsfiddle.net/chada090/47ku2jer/
A added some modificaton to make it more "contrast" for each element.
HTML
<div class="containerList">
<div class="container"><span class="title">test kontejner</span>
<div class="addTask">
<div class="switch">Přidat úkol</div>
</div>
<div class="taskList"></div>
</div>
<div class="container">
<span class="title">test kontejner1</span>
<div class="addTask">
<div class="switch">Přidat úkol</div>
</div>
<div class="taskList"></div>
</div>
<div class="container placeholder"><span class="title_newCont">Nový kontejner</span></div>
</div>
JS
$(".containerList").sortable({
// containment: "parent",
placeholder: "ui-state-highlight container",
change: function( event, ui ) {
console.log(ui);
}
}).disableSelection();
CSS
.containerList{
display: flex;
min-height: 600px;
}
.containerList .container{
display:inline;
margin-left: 15px;
margin-right: 15px;
flex: 0 0 300px;
min-height: 150px;
width: 300px;
display:flex;
flex-direction: column;
background: gray;
padding: 20px;
}
.container .title_newCont{
cursor: pointer;
color: blue;
}
.container .addTask{
margin-top: 10px;
margin-bottom: 10px;
background-color: white;
box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.18), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11);
min-height: 20px;
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
}
.container .taskList{
margin-top: 20px;
background: brown;
height: 20px;
}
.taskList > div{
background-color: white;
margin-top: 15px;
}
.taskList .taskItem{
margin-bottom: 10px;
background-color: white;
box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.18), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11);
min-height: 40px;
display:flex;
align-items: center;
padding: 5px;
background: blue;
}
.taskNewItem > *{
padding: 3px;
background: green;
}
.taskNewItem input{
border: none;
outline: none;
background: red;
}
.addTask .switch{
text-align: center;
width: 100%;
background: yellow;
}
.taskNewItem{
display: flex;
flex-direction: column;
}
.taskNewItem input{
width: 100%;
}
.taskNewItem .taskButtonAdd{
width: 100%;
background-color: green;
flex:0 0 40px;
font-size: 15px;
border: none;
}
.ui-state-highlight{
background-color:blue !important;
}
after reading through API documentation, I found option "tolerance", which solved my problem.
tolerance Type: String Default: "intersect" Specifies which mode to
use for testing whether the item being moved is hovering over another
item. Possible values: "intersect": The item overlaps the other item
by at least 50%. "pointer": The mouse pointer overlaps the other item.
Code examples: Initialize the sortable with the tolerance option
specified:
1 2 3 $( ".selector" ).sortable({ tolerance: "pointer" });
See here jsfiddle http://jsfiddle.net/KvKsm/2/embedded/result/
edit here http://jsfiddle.net/KvKsm/2/
html
<input type="submit" value="Contact Us">
css
input {
-moz-transition: -moz-transform 0.2s ease-in-out 0s;
background: none repeat scroll 0% 0% #2E2E2E;
border-radius: 8px 8px 8px 8px;
border: 0pt none;
box-shadow: 0pt -1px 1px rgba(255, 255, 255, 0.15) inset;
color: #FFFFFF;
display: inline-block;
font-size: 32px;
line-height: 1;
padding: 10px;
text-shadow: 0pt -1px 1px rgba(19, 65, 88, 0.8);width:180px
}
in Desktop browsers
in iPad and iPhone
I want fixed width button.
I found an answer here
http://thinkvitamin.com/design/styling-submit-buttons-for-mobile-safari/
adding -webkit-appearance: none; solved the problem
I need a quick solution to getting some decent layout working within the tabnav widget display area. I'm already using blueprint css for other aspects of the layout but I don't have enough CSS chops to figure out how to get blueprint containers to display within the tabnav's content area.
The tabnav's content area is <div class="main_tabnav_content" id="main_tabnav_content">
and this is the related css:
.main_tabnav {
color: #000;
border-bottom: 1px solid #ccc;
margin: 13px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }
.main_tabnav ul {
margin: 0px;
padding: 0px;
}
.main_tabnav li {
display: inline;
overflow: hidden;
list-style-type: none; }
.main_tabnav li span.disabled {
color: #888888;
background: #FAFAFA;
border: 2px solid #DDDDDD;
border-bottom: none;
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none;}
.main_tabnav a, main_tabnav a.active {
color: #000000;
background: #EEEEEE;
font-weight: bold;
border: 1px solid #ccc;
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none; }
.main_tabnav a.active {
background: #FFFFFF;
border-bottom: 3px solid #FFFFFF; }
.main_tabnav a:hover {
color: #FFFFFF;
background: #CCCCCC; }
.main_tabnav a:visited {
color: #000000; }
.main_tabnav a.active:hover {
background: #FFFFFF;
color: #000000; }
.main_tabnav_content {
background: #FFFFFF;
padding: 20px;
border:1px solid #ccc;
border-top: none;
z-index: 2;
}
I'd like to be able to put some columns inside the main_tabnav_content area like this
<div class="span-5 colborder">
stuff
</div>
<div class="span-5 colborder">
stuff
</div>
<div class="span-5 colborder">
stuff
</div>
At the moment the columns are displayed but the main_tabnav_content box doesn't expand around them. Any suggestions for how to get the blueprint layout nested inside the main_tabnav_content area?
From Blueprint: screen.css:
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right:10px;}
.last, div.last {margin-right:0;}
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
and also:
div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
I think if you add this <div class="clearfix"></div> before the end of the main_tabnav_content div it should fix the float problem.
Do you have the css for the span-5 & colborder classes? It sounds like it might be a float problem. Basically what's happening is when you add the columns to the main_tabnav_content div, the div doesn't expand, right?