Recently , i added a button to my mobile app. However , the buttons are displaying differently on mobile screen size.
For an example, when i run it on iphone 6+, the buttons display side by side as show below, But when i am displaying it on iphone 4, the second button is displaying below it rather than beside it.
I used percentage to make it responsive but apparently , something looks wrong with my sass.
for an example , i want the outlook to be as shown in the image regardless of what the screen size is .
this is my sass code
.IonFooter {
button {
width: 48%;
height: 60px;
border-radius: 5px;
font-size: 1.3em;
}
}
Thank you in advance
The behaviour of your buttons is probably caused by the infamous display: inline-block; right margin "bug" (Check this CSS Tricks article about the issue). It could also be caused by padding in the parent element.
Anyway, I suggest that you use flex to avoid having your buttons fall on multiple rows.
.IonFooter {
display: flex;
justify-content: space-between;
button {
flex: 0 0 48%; // Grow: no, shrink: no, width: 48 %
height: 60px;
border-radius: 5px;
font-size: 1.3em;
}
}
Related
I am using Kendo controls for styling my application, I was able to customize the css of almost all other kendo controls by overwriting default css but I am unable to do that in the case of Kendo datepicker.
I have tried many things but I am only able to change the font size inside the calendar/month view. but the height and width of the datepicker's selection box is too big and that doesn't look good in my page.
Can somebody help me to know how to resize the whole calendar container to be smaller that how it looks now.
I have added a live sample link and an image below for reference.
Live sample - click here for a live sample datepicker simulation
Any help would be much appreciated! Thanks in advance!
You'll have to play around with the values to get it the exact size you want, but this should work:
.k-calendar-monthview .k-calendar-td,
.k-month-calendar .k-calendar-td {
width: 20px;
height: 20px;
inline-size: 20px;
block-size: 20px;
}
.k-calendar .k-calendar-cell-inner,
.k-calendar .k-link {
font-size: 8px;
}
.k-calendar-view {
min-height: min-content;
max-width: min-content;
}
.k-calendar-th {
width: 20px;
height: 20px;
font-size: 8px;
}
.k-button-md {
font-size: 8px;
}
I'm having some issues with iOS ignoring a combo of align-self:flex-end and margin-bottom: 8px.
On Android devices, various Windows versions with Chrome and Firefox, and Chrome on macOS, #totalImg is displayed as I'd expect it to be - bottom right corner, slightly raised.
On Safri for macOS and Safari and Chrome for iOS, #totalImg is glued to the bottom.
See the following image for current behaviour:
I'm aware that I could get consistent cross-browser behaviour by applying bottom: 8px, but that seems to be working just in my test case, and fails in production, depending on the screen width of Android or iOS devices. For example, on Chrome for Android, with bottom: 8px, #totalImages can end up in the middle of its parent div, or well below it.
.image.big.j_launch {
display: flex;
display: -webkit-flex;
}
.image.big {
width: auto;
height: auto;
max-width: 320px;
margin-bottom: 10px;
float: none;
position: relative;
}
#totalImg {
display: block;
height: 15px;
position: absolute;
right: 11px;
background-color: rgba(0, 0, 0, 0.35);
padding: 2px 6px;
border-radius: 3px;
color: white;
font-size: 11px;
text-align: center;
align-self: flex-end;
margin-bottom: 8px;
}
<div class="image big j_launch" data-index="0">
<div id="totalImg"><span>1 / 18</span></div>
<img src="https://via.placeholder.com/320x240">
</div>
How can I get a consistent crossbrowser solution, which would place #totalImg as it's currently placed in the first image? Is there a reason for Safari (and iOS in general) to ignore what seems to be working on other platforms / browsers?
Looking at the document inspector in Safari, I can see that the margin is applied - there's an orange rectangle below #totalImg, which keeps growing / extending itself downwards, when I'm changing the margin-bottom value in the stylesheet inspector. It's just not being applied visually as I'd expect it to be.
While this is a solution, is not the best solution, and I'd recommend against it, even though it works.
First, a little bit of JavaScript is needed (as seen on this link).
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
What this block does is that it adds two data attributes to the document itself (and a touch class if it's a handheld device). In my case - iPhone and Mac - data-platform had values of iPhone and MacIntel, respectively. classname and data-useragent are unnecessary in this context, but were not removed from the original code for illustrative purposes.
Next, add some new rules to CSS.
html[data-platform*='Mac'] #totalImg,
html[data-platform*='iPhone'] #totalImg {
bottom: 8px !important;
margin-bottom: unset !important;
}
This relies on partial macthings by the platform, and adjusts the rules accordingly - since bottom was recognized and applied on *OS devices, and margin-bottom was not, the rules are changed.
The reason I dislike this is that looks like a Rube Goldberg machine, and it's overly complicated for something that should've been solved in CSS alone.
Not to mention that it relies on a deprecated / obsolete feature.
I created a drop down menu with menubar. However I have custumization problems :
The transparency is well done, but the size of the horizontal items is too hight (and so not vertically centered. The required height is thirty pixels all inclusive ;
(just resolved with height: 30px; in passive mode (neither hover nor seleted). The selection "Button" item in the horizontal menu remains too hight
The vertical menu items are too separated from each over and the width of the vertical menus too narow ;
The movement in the verticals menu items not be materialized (with a blue color) as it is in the horizontal menu;
Impossible to move to a submenu with a mouse. Only with keybord arrows. Why ?
I tried a long time the css with modification of the "theme.css" of the saga-blue theme, but nothing to do nothing works except the css lines included in my code :
Code:
.p-menubar {
background: transparent;
padding: 0;
height: 30px;
}
What are the particular css elements and clauses to modify ?
Eventually, using Chrome's inspector, I ended up discovering the CSS classes involved. By groping on the values I got about what I wanted.
The impacted code:
In the vue.js file:
<div id="menuU" class="user-menu" v-show="isvisible()">
<Menubar:model="items" class="p-menubar"></Menubar>
</div>
the v-show parameter is application specific and not given here.
In css:
.menu-utilisateur {
background-color: lightgrey;
height: 30px;
}
.p-menubar {
background-color: lightgrey;
padding: 0px;
height: 30px;
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.5rem 1rem !important;
}
.p-menubar .p-menuitem-link {
padding: 0.5rem 0.5rem !important;
}
Don't forget the !important. It overwrites the default values.
It seems there is some magic around the <button>element that I don't understand.
Consider this markup:
<button class="button">Some Text</button>
<div class="button">Some Text</div>
And this CSS:
.button{
background: darkgrey;
height: 40px;
border: 2px solid grey;
width: 100%;
box-sizing: border-box;
font-size: 14px;
font-family: helvetica;
text-align: center;
margin-bottom: 20px;
/*I'm aware I could use this to center it*/
/*line-height: 40px;*/
}
What makes the text in the button element vertically centered? Webkit seems to predefine a -webkit-box-align with a value of center for the <button> element. If I set that to initial the text is no longer aligned to the center. But that doesn't seem to be the full magic, since on the other hand I had no luck centering the text on the div using the -webkit-box-align property.
Here is a fiddle: http://jsfiddle.net/cburgdorf/G5Dgz/
I know this is a couple of years old, but I'll add my thoughts after some investigation in to issue while writing a reset stylesheet for a project.
NOTE** This is based on looking through the Firefox source because it was the easiest to obtain and read through. However, based on similar behaviour in other browsers the implementation is probably similar.
Firstly, the main issue here is that <button> elements - atleast in Firefox - are built with an internal element between the <button> tag and it's children. In Firefox it's called moz-button-content and isn't something that can be reached with CSS and has been set to display block without inheriting the height of the button, you can see this style declaration in the useragent stylesheet:
From "source/layout/style/res/forms.css"
*|*::-moz-button-content {
display: block;
/* Please keep the Multicol/Flex/Grid/Align sections below in sync with
::-moz-scrolled-content in ua.css and ::-moz-fieldset-content above. */
/* Multicol container */
-moz-column-count: inherit;
-moz-column-width: inherit;
-moz-column-gap: inherit;
-moz-column-rule: inherit;
-moz-column-fill: inherit;
/* Flex container */
flex-direction: inherit;
flex-wrap: inherit;
/* -webkit-box container (aliased from -webkit versions to -moz versions) */
-moz-box-orient: inherit;
-moz-box-direction: inherit;
-moz-box-pack: inherit;
-moz-box-align: inherit;
/* Grid container */
grid-auto-columns: inherit;
grid-auto-rows: inherit;
grid-auto-flow: inherit;
grid-column-gap: inherit;
grid-row-gap: inherit;
grid-template-areas: inherit;
grid-template-columns: inherit;
grid-template-rows: inherit;
/* CSS Align */
align-content: inherit;
align-items: inherit;
justify-content: inherit;
justify-items: inherit;
}
Because you can't affect any of the styles on this element, you are forced to add you styling on the <button> tags. This leads into the second issue - The browser is hard coded to vertically position the content of the button.
From "source/layout/forms/nsHTMLButtonControlFrame.cpp"
// Center child in the block-direction in the button
// (technically, inside of the button's focus-padding area)
nscoord extraSpace =
buttonContentBox.BSize(wm) - contentsDesiredSize.BSize(wm);
childPos.B(wm) = std::max(0, extraSpace / 2);
// Adjust childPos.B() to be in terms of the button's frame-rect:
childPos.B(wm) += clbp.BStart(wm);
nsSize containerSize = (buttonContentBox + clbp.Size(wm)).GetPhysicalSize(wm);
// Place the child
FinishReflowChild(aFirstKid, aPresContext, contentsDesiredSize,
&contentsReflowInput, wm, childPos, containerSize,
ReflowChildFlags::Default);
Given these two issues you can start to see how the button force the content to be centered, consider:
<button> tag
+------------------------+ ^
| button extra space | |
| | |
+------------------------+ |
|| ::moz-button-content || | button height
|| display: block; || |
+------------------------+ |
| | |
| button extra space | |
+------------------------+ v
If you give the button a height - like the 48px from your fiddle, the text will be centered because the moz-button-content element is display block and will only have the height of the content (most likely the line-height of the content by default) and when put next to another element you get this behaviour:
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
font-family: san-serif;
background: none;
font-size: 1em;
line-height:1;
vertical-align: baseline;
}
button, a {
height: 3em;
}
button {
background: red;
}
a {
display:inline-block;
background: green;
}
<button>Button content</button>
<a>Link Content</a>
This bug and this bug in the Firefox issue tracker was about a close as I could find to any actually documented bug. But the threads give the impression that despite this not appearing in any actual spec, the browsers have just implemented it this way "because the other browsers are doing it that way"
There is a work-around to the issue if you actually want to change the default behaviour, but it doesn't completely solve the problem and YMMV depending on your implementation.
If you insert a wrapper <span> with display: block as the only child of the button and put all your content inside it you can use it to skip over the moz-button-content element.
You will need to make this <span> element have height: inherit so it correctly fills the height of the button and then add your normal button styling to the <span> instead, you will get basically behaviour you want.
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
font-family: san-serif;
background: none;
font-size: 1em;
line-height:1;
vertical-align: baseline;
}
button, a {
height: 3em;
}
button {
background: red;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
outline: 0;
}
button > span {
display: block;
height: inherit;
}
a {
display:inline-block;
background: green;
}
button.styled > span , a.styled{
padding: 10px;
background: yellow;
}
<button><span>Button content</span></button>
<a><span>Link Content<span></a><br/>
<button class="styled"><span>Button content</span></button>
<a class="styled"><span>Link Content<span></a>
It's also worth mentioning the appearance CSS4 rule (Not yet available):
While this is not a viable option (as of the 5th January) yet. There is a proposal to redefine the appearance rule in the CSS4 draft that might actually do the right thing an remove all assumptions made by the browser. I only mention it for completeness because it may become useful in the future.
UPDATE - 30/08/2016
You should actually use a <span> instead of a <div>, as div's aren't valid children for <button> elements. I have updated the answer to reflect this.
You could use padding.
For example
padding: 20px 10px;
I think that the only reason for this behaviour is that Google Chrome or browsers in general will take the default styles from your operating system.
For example, if you compare the button or scrollbar on Google Chrome run in windows 7 and windows 8:
In windows 7, the button will have a horizontal gradient line in the center of your button
In windows 8, the scrollbar are able to fade in and fadeout on click
This is just my opinion but hope that it can give you some ideas :)
You can use display:table-cell;
vertical-align: middle; as an alternate method.
On Mozilla Firefox I got the -moz-appearance property :
-moz-appareance: button;
In the HTML5 draft, there is a Rendering section, but doesn't details the placement :S
Button elements by default centers child elements vertically. It isn't done in a conventional CSS way, and therefor isn't trivial to override.
The best solution I have found is setting the button to flex column.
button {
height: 100px;
display: flex;
flex-direction: column;
}
span {
height: 20px;
width: 100px;
background-color: blue;
display: block;
}
<button>
<span></span>
</button>
Some answers suggested adding an inner wrapper, and setting it's height to inherit. This might not work for elements that have their height calculated dynamically.
In case you need to get rid of this behavior you can just add span as a child of button. Works better than trying to trick all the browsers.
The website is freetorun.net in wordpress. When viewed on mobile devices the gold "Sign up" button is not centered on the screen.
I was thinking that changing the font-size to 14px in the CSS would fix it:
.large.custom-button span:visited {
font-size: 14px;
padding: 9px 14px 9px;
}
This code is not working though.
The target HTML is this:
<a class="large custom-button align-btn-right" href="http://freetorun.net/wordpress/choose/" title="Register Today!"><span style="background-color:#DAA520; color:#26354A">to start running faster, farther and<br> injury free SIGN UP for a clinic!</span></a>
Your layout on mobile has lots of issues with padding and floated elements. Changing the font size won't help with positioning.
Firstly the div with class social_media_top widget_text substitute_widget_class should probably be full width, and text-align: center;
You also need to remove the float: right on the gold button.
For the record, I did not solve this. And the code provided above didnt either. But the guys who wrote the U-Design theme gave me this and it is much better.
#top-elements .social_media_top {
clear: both;
float: right;
margin-left: -150px;
margin-top: -20px;
padding: 0 20px 0 0;
}
/* Mobile Screen ( smaller than 480px )*/
#media screen and (max-width: 480px) {
#top-elements .large.custom-button span,
#top-elements .large.custom-button span:visited {
font-size: 14px;
}
#top-elements .social_media_top {
padding: 0;
}
}