ryanmwangi/Compware
1
0
Fork 0
Code Issues Pull requests Releases Activity

style(editable_cell): add styling to have a grid layout.

Browse source
This commit is contained in:
ryan 2025-01-06 16:06:06 +03:00
parent 0e15699b13
commit 8de9623a0d
2 changed files with 47 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
assets/style.css
View file

@ -68,4 +68,40 @@ th, td {
th { th {
background-color: #f2f2f2; background-color: #f2f2f2;
}
/* Style for the grid container */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjust the minimum width for cells */
gap: 1px; /* Gap between cells */
background-color: #ccc;/* Grid line color */
border: 1px solid #aaa; /* Outer border */
}
/* Style for individual cells */
.editable-cell {
display: block; /* Allow it to fill the parent container */
width: 100%; /* Full width of the allocated space */
height: 100%; /* Full height of the allocated space */
position: relative;
}
/* Style for the input field inside the editable cell */
.editable-cell-input {
width: 100%; /* Ensure input takes up full width */
height: 100%; /* Ensure input takes up full height */
border: none; /* Remove input box borders */
padding: 8px; /* Add padding for spacing */
box-sizing: border-box; /* Ensure padding doesn't cause overflow */
font-size: 14px; /* Adjust font size */
text-align: left; /* Align text to the left */
outline: none; /* Remove outline for better UI */
background-color: transparent; /* Make background transparent */
}
/* Optional: Style for the focused input field */
.editable-cell-input:focus {
background-color: #e0f7fa; /* Light blue background when focused */
border: 1px solid #00796b; /* Green border when focused */
} }

19
src/components/editable_cell.rs
View file

@ -53,13 +53,16 @@ pub fn EditableCell(
}); });
view! { view! {
<input <div class="editable-cell">
type="text" <input
value=move || local_value.get() type="text"
on:input=handle_input prop:value=move || local_value.get()
on:focus=handle_focus on:input=handle_input
on:blur=handle_blur on:focus=handle_focus
node_ref=input_ref on:blur=handle_blur
/> node_ref=input_ref
class="editable-cell-input"
/>
</div>
} }
} }