I have developed a web page HTML.I wanted to see the behavior of my elements on mobile with Google Chrome mobile emulator.
And I found weird things.
I have this code :
<div>
<div>
<span>config.alarm_vocal_lines_config[1].line_id</span>
<span>1 </span>
</div>
<div>
<span>config.alarm_vocal_lines_config[1].audio_level_line_config</span>
<div>
<span>config.alarm_vocal_lines_config[1].audio_level_line_config.main</span>
<input type="number" value="-90">
</div>
</div>
<br>
</div>
<div>
<div>
<span>config.alarm_vocal_lines_config[2].line_id</span>
<span>2 </span>
</div>
<div>
<span>config.alarm_vocal_lines_config[2].audio_level_line_config</span>
</div>
<br>
</div>
<div >
<div >
<span>config.alarm_vocal_lines_config[3].line</span>
</div>
<br>
</div>
First problem : with this code, in the emulator, the third line is smaller then the other.
Why ? how to avoid it ?
Second problem, if I remove one char from the last line, every line become smaller :
Can someone tell me why the style change and how avoid it?
Not sure if I've made myself clear. Please ask for further clarification.
I haven't any CSS
If its the font size you are concerned about, you could try pasting this into your CSS file (or create one, if you haven't got one)
span {
font-size: 16px !important;
}
You need to add line height for your text.
span {
line-height: normal;
font-size: 16px;
}
Related
I'm trying to build an amp page for my site.
I am trying to achieve a responsive form with a number of range inputs.
So that when the screen size changes they stack nicely, much as I would when using bootstrap.
The code I have is (as a single example);
<div class="form-field" layout="container">
<div class="form-title" layout="responsive">
<span>How much do you need?</span>
<span [text]="[amount]">
£1500000
</span>
</div>
<div layout="responsive" width="auto" height=100>
<input type="range"
name="amountSlider"
min="10000"
step="10000"
value="1500000"
max="3000000"
on="change:AMP.setState({amount: '£' + event.value})">
</div>
</div>
Now when I add the layout attribute to the div. All elements inside disappear. When I inspect the html it seems to be applying the css;
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
color: transparent!important;
}
Now as far as I can see from reading the docs I am compliant with the amp specification, however I must be doing something wrong here?
Can anyone point me in the right direction as to what I am doing wrong an dhow I Can achieve the layout above?
#Matthew-Flynn
The text was disappearing because of color: transparent!important;. I removed that in the code snippet below. But I'm not sure that answers your positioning question: could you build out this snippet a little more and I'll take a look?
.i-amphtml-notbuilt, [layout]:not(.i-amphtml-element) {
position: relative;
overflow: hidden!important;
}
<div class="form-field" layout="container">
<div class="form-title" layout="responsive">
<span>How much do you need?</span>
<span [text]="[amount]">
£1500000
</span>
</div>
<div layout="responsive" width="auto" height=100>
<input type="range"
name="amountSlider"
min="10000"
step="10000"
value="1500000"
max="3000000"
on="change:AMP.setState({amount: '£' + event.value})">
</div>
</div>
I am struggling to get a break to work in my code. The break is not being recognised at all and just displays all text in one line.
I have tried a combination of using divs, spans and p tags, but still the same problem. I can only assume that the code i am using is illegal. I would be grateful if someone could clarify where I am going wrong. Thanks
<div class="message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<p>Landscape mode has been disabled in the app<br>
Please continue by turning your device to protrait<br>
Thank you
</p>
</div>
You probably have display:none on all <br>. If using this doesn't work:
br {display:block}
try using JavaScript to override any display properties on all <br>
Demo
var brArray = Array.from(document.querySelectorAll('br'));
brArray.forEach(function(brk, idx) {
brk.style.display = 'block';
});
/* There's a possibility thisproperty might be somewhere */
p {
white-space: nowrap;
}
/* More than likely this is the culprit */
.message br {
display: none;
}
<div class="alert message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<p>Landscape mode has been disabled in the app <br>Please continue by turning your device to protrait<br> Thank you
</p>
</div>
<p>Click the text above</p>
OPTION 1: Add one more <br> in the second line.
The primary purpose of <br> is to insert a single line break. And this is how it is exactly working in your code. If you need an empty line above Thank You, just add one more br>.
<div class="message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<p>Landscape mode has been disabled in the app<br>
Please continue by turning your device to protrait<br><br>
Thank you
</p>
</div>
OPTION 2: You can wrap your text inside <pre> tag and style it
accordingly.
.no-format{
font-family: initial;
}
<div class="message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<pre class="no-format">Landscape mode has been disabled in the app.
Please continue by turning your device to protrait.
Thank you
</pre>
</div>
In my case I have applied the following style to my label:
white-space: pre-line;
#divWithPreline {
white-space: pre-line;
border: solid 2px red;
}
#divWithoutPreline {
border: solid 2px blue;
}
<div id="divWithPreline">
This is a div
whose content has line breaks
and the <b>white-space pre-line</b> has been applied
</div>
<br>
<div id="divWithoutPreline">
This is a div
whose content has line breaks
and <b>no styling</b> has been applied
</div>
Why is my paragraph bigger than the div when its inside it. To me it doesn't make any sense. Can you guys explain why this is happening and how I can fix it.
CSS:
#whos{
font-size: 15px;
color: black;
}
HTML:
<div id="Text">
<b id="bold">Hello,my name is Navjeeven</b>
<p id="whos">
I am Currently enrolled at
Brampton Christian School
</p>
</div>
What it looks like right now?
You have another style: #inside p which overrides the font size.
https://css-tricks.com/specifics-on-css-specificity/
I have a chunk of html that is dynamically generated. We show it both directly in a page and embed it into an iframe. The strange thing is the div block shown in two places has different height even through all styles are the same. The code is below and the live result is shown in the codepen(http://codepen.io/anon/pen/bdKVqX). Anybody have ideas why this is happening? much appreciated.
Html content
<div class="height-diff" style="width: 198px; font-size: 30px;">
<span style="font-size:12px">
<span>Barlett Knit</span>
</span>
</div>
The same content as above, but inject into an iframe
var html = '<style>.height-diff {background-color: green;}</style>
<div class="height-diff" style="width: 198px; font-size: 30px;">
<span style="font-size:12px">
<span>Barlett Knit</span>
</span>
</div>';
var doc = window.document;
iframe = doc.createElement("iframe"),
style = iframe.style;
iframe.setAttribute("src", "about:blank");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowFullscreen", "true");
doc.body.appendChild(iframe);
var contentDocument = iframe.contentDocument;
contentDocument.open();
contentDocument.write(html);
contentDocument.close();
UPDATED ANSWER: Your iframe html does not have a <doctype> declared and it is going into quirks mode. See codepen with doctype added. I can't believe I didn't notice that earlier.
This appears to be happening because you have not specified a line-height.
See this codepen with line-height added. This also seems to be a rendering bug. It appears white space is being added before the span in the primary document but not in the iframe. It is strange but Height is calculated correctly if you add other characters around the span or set the span to display:block;. Edit: Not strange, just quirks mode.
<div class="height-diff" style="width: 198px; font-size: 30px;line-height:1.2em;">
<span style="font-size:12px">
<span>Barlett Knit</span>
</span>
</div>
<br />
<div class="height-diff" style="width: 198px; font-size: 30px;line-height:1.2em;">
<span style="font-size:12px; display:block;">
<span style="display:block;">Barlett Knit</span>
</span>
</div>
It isn't exact answer, but i found when both element height will be the same. Add some characters (non white characters) directly to div element which you write to iframe.
I don't know why, but in opposite to the div element written by JS, div element in the HTML see characters inside it. Therefore adjust height of element to font-size;. It happen even if there is no direct characters inside.
OK, so my title is terrible. Anyway-
I'm trying to style a simple "product info" template. The CMS I use is drawing in dynamic product information from tags. Looks like this- the divs are styled so they line up as two columns:
<div class="specslabel">
<strong>
{rs_size_lbl} <br />
{rs_material_lbl} <br />
{rs_application_lbl} <br />
{rs_fitting_system_lbl}
</strong>
</div>
<div class="specs">
{rs_size} <br />
{rs_material} <br />
{rs_application} <br />
{rs_fitting_system}
</div>
It all works fine when all those tags are pulling in information properly. However, sometimes one of those fields (it draws from a CSV file) is empty. The tags are smart and won't show the {_lbl} (field label) content if there is no content in the according field. Then there is a blank line, obviously because of the line break.
If I don't use line breaks, the "_lbl" tags all stack up (since the labels are generally short text). Is there another way to style this so that when no content is drawn in, there is no line break- but when there is content, there is a line break?
Rewrite your HTML to put the label with the item.
<div><span class="specslabel">{rs_size_lbl}</span><span class="specs">{rs_size}</span></div>
<div><span class="specslabel">{rs_material_lbl}</span><span class="specs">{rs_material}</span></div>
<div><span class="specslabel">{rs_application_lbl}</span><span class="specs">{rs_application}</span></div>
<div><span class="specslabel">{rs_fitting_system_lbl}</span><span class="specs">{rs_fitting_system}</span></div>
Then, define your CSS as
.specslabel {
display: inline-block;
width: 45%;
}
.specs {
}
What will happen is, when neither the label nor the data gets anything, your html for that line item will be rendered as <div></div>, which has no height by default. Thus the blank space will be collapsed when there is nothing in the div to show.
I'd recommend altering your markup to something like this:
<div class="specs">
<div class="spec">
<span class="label">{rs_size_lbl}</span>
<span class="data">{rs_size}</span>
</div>
<div class="spec">
<span class="label">{rs_material_lbl}</span>
<span class="data">{rs_material}</span>
</div>
<div class="spec">
<span class="label">{rs_application_lbl}</span>
<span class="data">{rs_application}</span>
</div>
<div class="spec">
<span class="label">{rs_fitting_system_lbl}</span>
<span class="data">{rs_fitting_system}</span>
</div>
</div>
Then style span.label and span.data to have a fixed width so they align properly. If they're empty, they should be invisible.
If you format it in the following manner there'd be no issues:
<style>
strong span { float:left; clear:left; }
</style>
<strong>
<span>{rs_size_lbl}</span>
<span>{rs_material_lbl}</span>
<span>{rs_application_lbl}</span>
<span>{rs_fitting_system_lbl}</span>
</strong>
Otherwise, you'd need to alter the server script to output the <br/> appropriately ...