html css responsive
How to achieve this layout please somebody help do me I have made some part of it #css #html #front-end
47 Replies
please give #How To Ask Good Questions a look and share your code in a way people can see in their own browser (preferably codepen)
Html-<div class="gap">
<div class="form-group">
<div class="dropdown">
<img class="search-icon" src="./assets/icons/searchicon.svg" alt="">
<input
type="search"
id="search-box"
button
class="btn btn-default dropdown-toggle"
placeholder="placeholder"
data-toggle="dropdown"
>
<img class="dropdown-icon" src="./assets/icons/vectordropdown.png" alt="">
</div>
</div>
<div class="right-border">
<div class="right-header">
<h2>Selected Segments</h2>
<button>Clear all</button>
</div>
<div class="selected-segments">
<ul>
<li>Lorem</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum amet</li>
<li>Lorem Ipsum amet</li>
I have used flex still left side drop down is not taking 50% of space and the right side is taking the whole space maybe because ul li
How can I make it 50-50%
please put the complete code and in codeblocks
i see in this screenshot you are using codepen. if you log-in and save, you can share the link with us
This is complete code
Thanks in advance
uhh but it looks incomplete tho 😕 lemme check the codepen anyways
It’s complete for the part I want the solution for
well ok
uhh i think i might not be able to help you, an experienced person will help you
i apologize 😓
so you want to recreate just this section from your original picture?
what issue are you having doing that?
For now yes because I have done the top section but having problem in this
what problem?
https://codepen.io/rogeraman/pen/gOyVgNK refer to this
okay, that's just unfinished though
do you want someone to finish it for you?
??
Display flex on parent but the left side drop down is not taking full width and the right side ul li is responsible for this
When I remove ul they both take equal width
I want them to take equal width
flex isn't the best solution if you want direct control over the width of the sections, it's better to use grid
with grid and
grid-template-columns: repeat(2, 1fr); you'd be guaranteed they'd both always be half widthI want to do that with flex if possible
why?
Because I am using bootstrap for grid
And I have used Chris for outer layout
flex-basis: 50% or width: 50% on children but i agree with Jochem
Grd*
you can nest grid layouts
But why flex is not working?
I have used flex before it never does that
because flex, by design, will take the intrinsic size of its children into account
Is ul li the culprit
only in that it's trying to be very wide compared to the dropdown
flex makes childreen as small as possible
Ik but the both are children it must apply on both then
Why it is acting on one side
what? i don't follow
it's looking at what size both elements would be if they weren't in a flex container, and then distributing the size available between them
read up on flex sizing https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout
Grid is not working
looks to me like both are taking half the screen?
Drop down still not having similar width
you mean the input field?
Yes
give a width of 100%?
It is 100%
no it's not
I will show you just a sec
https://codepen.io/MannixMD/pen/gOyVmLB
input element has a default min-width it won't magically grow if you don't tell it to
Yup, exactly. Flex only controls the size of elements that are direct children, it doesn't change the size of grandchildren unless those are dependent on the width of their parent(s). Your flex child is .dropdown, the input inside will just have its normal, default width
setting width: 100% on the input will make it grow to the width of its parent
Yes yes
Gotcha
I was using bootstrap that is why the input field css was not active as I didn’t link the bootstrap in the codepen
It’s working fine now
Thankyou guys
just fyi you can add bootstrap etc when you click the cog icon. I just did it in my pen 🙂
Okay thanks
Now I will have to move on next section