I have an html fragment that looks like this:
<style>
.r {
display: flex;
}
.d-flex {
display: flex;
align-items: center;
}
</style>
<div class="r">
<input type="radio" disabled="disabled" value="1">
<div class="d-flex">
<span class="answernumber">1) </span>
<div class="answer"><p>One</p></div>
</div>
</div>
When I render this in a browser the radio button, the "1)" and the "One" are all aligned nicely. But when I render this html in a pdf the radio button is not aligned with the text. I have tried multiple alternative style definitions for the classes r, d-flex, answernumber and answer and also for the input[type="radio"] and every time it looks good in a browser, the result is no good in the pdf.
Interestingly, check boxes work just fine. Is there a way to get the html to render in the pdf aligned? Or is this something that needs to be fixed inside iText?
The html inside the div.answer may be much more complex and I have no control over it as it is delivered to me by an external system, so I am limited as to what I can do with the html. What I am in control over, is the style definitions and any configurations to be done to iText (perhaps some ConverterProperties).
Related
when I use one image inside the container carousel div the image occupies 100vw. But when I add multiple images inside the container it was supposed to be overflown but rather images get shrunk and act weird. I tried the same thing with regular HTML tag and it works perfectly.
My question is how to make a carousel in Next js without using any library where on each slide there is only one Image covering 100% view width.
#code
<div className="embla" >
<div className="embla__container">
<Product_3
src="/lifestyle/14.jpg"
details="Discover the support you need to power through gaming marathons."
name="CHAIRS"
/>
</div>
</div>
#CSS part
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
width:100vw;
height:10rem;
display: flex;
flex-shrink: none;
}
#Product_3 component
function Product_3({ src, name, details }) {
return (
<div className="product_3">
<div className="product3_img">
<Image src={src} layout="fill" />
</div>
<div className="product2_details">
<h3 className="product2_name">{name}</h3>
<div style={{fontSize:"2rem",color:"#999999",margin:"1rem 0 2rem 0"}}>
{details}.
</div>
<button className="learn_more product2_btn">Learn More {">"}</button>
</div>
</div>
);
}
I am working on an application in Ruby. It has 8 pages and on each one of the pages the general layout is bootstrap's .container . row .col-sm-6 .col-sm-6 layout. I have a btn-group in the 2nd col-sm-6 layout that looks great on lg, xl and s devices.
When the screen falls between 992px-768px the button group breaks in an unpleasant fashion
It adjust well when the columns shift one on top of the other on small screens 544px-768px and Breaks bad again on xs devices < 544px
.
I have found a nice solution where I make the btn-group vertical on xs screens by duplicating the code adding the btn-group-vertical to duplicated code and hiding this code until it detects an xs screen (then it hides the horizontal btn-group). However, this is a lot of duplicate code that I have to replicated on 8 pages and still doesn't solve for medium screens.
I thought about keeping my code cleaner by adding scss like this:
.myClass {
#media (max-width: 760px) {
&:extend(.btn-group-vertical all);
}
#media (min-width: 761px) {
&:extend(.btn-group all);
}
}
That I found on stack overflow question 31893581. It doesn't work even with the manipulations that I thought would work. I could follow the solution stated in that same post but I am uncertain how sanitary that would be etc.
If somebody has any advice for me on how to solve for a class that pulls in bootstrap classes at specific browser widths or a completely different solution to my problem, I am all ears.
Thanks in advance.
I can think of a number of ways to do this, here are two methods that are easy to picture:
https://codepen.io/panchroma/pen/XgojBL
Add a clearfix div at the point where you want the buttons to break, then use media queries to hide or show this div.
Another method instead of using a clearfix would be to target .btn-group in your CSS, and using media queries set a max-width at viewports 768 - 992 px.
Good luck!
HTML
<div class="container">
<div class="row">
<div class="col-sm-6">first col</div>
<div class="col-sm-6">
<div class="btn-group">
<button type="button" class="btn btn-primary">btn-1</button>
<button type="button" class="btn btn-primary">btn-2</button>
<div class="cf"></div>
<button type="button" class="btn btn-primary">btn-3</button>
<button type="button" class="btn btn-primary">btn-4</button>
</div>
</div>
</div>
</div>
CSS
.btn-group .cf{
display:none;
}
#media (min-width: 768px) and (max-width: 992px) {
.btn-group .cf{
display:block;
}
}
I have a form in a div where I brought submit buttons out of the div to another part of the screen. This works nicely. However, I want to lock that div down to a specific size and relative position and use overflow:auto so when it grows too big (the form has elements that are unhidden with checkboxes) the entire screen doesn't scroll, just the div. The problem is, as soon as I add the overflow style, the submit boxes I moved off the div are hidden. I assume this is because with overflow all elements are locked into that div and scroll bars allow you to access them, but in this case the elements are moved left:-500px and it doesn't even give me a scroll bar to scroll left to see them. Basic code follows:
<div class="div1">
<div class="div2">
<form>
<input type="submit" class="sub1" />
</form>
</div>
</div>`
CSS would be:
div.div1 {
position:relative;
width:1000px;
margin: 0 auto;
}
div.div2 {
width:500px;
height:500px;
position:absolute;
top:125px;
left:500px;
}
input[type=submit].sub1 {
position:absolute;
left: -500px;
}
So this works, but as soon as I change the div2 css to:
div.div2 {
width:500px;
height:500px;
position:absolute;
top:125px;
left:500px;
overflow:auto;
}
The submit button disappears.
My question: is there any way to get the scrollbar and keep the div2 container to 500px high without losing the elements outside the div?
If I understand correctly, you can move div2 within the form and leave the submit button outside of div2. That way, the submit button will always be visible and div2 can have overflow.
<div class="div1">
<form>
<div class="div2">
<!-- form fields go here -->
</div>
<input type="submit" class="sub1" />
</form>
</div>
Note: You'll likely need to adjust styles on the button, but I'm not entirely sure about your end goal.
I followed the answers to try to achieve a similar look to be found here www.thexxcorporation.com
The first header is using a shortcode (its a Wordpress site).
My problem is that the shortcodes don't reflect their actual styling setting, therefore, I'm trying to reproduce the look, but with my own sizes, images etc.
I've tried this:
h1:after
{
background:url(image path);/* apply your image here */
background-repeat:repeat-x;
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}
This, almost works, but has a problem. The style relates to headers that are with a content div. My other hears fit within the div fine (100% of the width of the div).
The above code results in the background image overflowing outside the content div it sits within.
So, how do I constrain it to the width of the div it sits within?
My page code looks like this:
<div id="main-content" class="clearfix">
<header id="page-heading">
<div class="boxed">
<h1>Test</h1>
</div><!-- /boxed -->
</header><!-- /page-heading -->
<div id="home-content" class="clearfix boxed container">
<article id="post" class="clearfix">
<div class="entry clearfix fitvids">
<h1>Test page for H1</h1>
</div><!-- .entry .clearfix -->
</article><!-- #post -->
<aside id="sidebar">
</aside><!-- /sidebar --></div><!-- #home-content -->
<div class="clear"></div>
The containing divs are set with position:relative.
If I add position:relative to the h1:after - the background image disappears.
slightly baffled.
Cheers,
Mike
the div it sits within should in relative position. add this style to the div
position:relative;
and the h1::after should have 100 percent width - don't use em. change the width to
width:100%;
hope this helps
cheers
We have an HTML5 application (<!DOCTYPE html>) with Twitter Bootstrap and various other JavaScript libraries (including jQuery) - all running on their current versions.
The page contains a text input with the autofocus attribute set.
<input type="text" autofocus="autofocus" />
The page contains more than one 'screen' of content, meaning there will always be a vertical scrollbar on the page. The text input is located within the first 'fold' of the page, approx. 250px from the top of the page.
On Chrome, Safari and Opera the page works as expected. When the page loads, the element is on screen and focused.
On FireFox (current version - 18.0.1) the element has focus, but the page has scrolled to 1533px (determined via window.pageYOffset). The same page with differing lengths of content will always scroll to the same position, and the element will be rendered offscreen.
There is definitely only one element with the autofocus attribute set ($("[autofocus]").length).
Removing the autofocus attribute from the element does not cause the page to scroll at all (i.e. the page remains scrolled to the top - as expected).
Can anyone offer any help or insight?
Things we've tried
The following test works correctly:
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div style="height: 200px">
<h1>Test</h1>
</div>
<div style="height: 2000px">
test
<br />
<input autofocus type="text" />
</div>
</body>
</html>
We've recently retried this with Firefox and can't replicate the issue.
Closing...
You need css code to say this:
.focusedInput {
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
}
Then the text input code to be this:
<input class="form-control focusedInput" type="text">